diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/uk | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/uk')
940 files changed, 0 insertions, 139583 deletions
diff --git a/files/uk/_redirects.txt b/files/uk/_redirects.txt deleted file mode 100644 index 5c4a912d26..0000000000 --- a/files/uk/_redirects.txt +++ /dev/null @@ -1,207 +0,0 @@ -# FROM-URL TO-URL -/uk/docs/Glossary/Block/Скриптинг /uk/docs/Glossary/Block/Scripting -/uk/docs/Glossary/DTD /uk/docs/conflicting/Glossary/Doctype -/uk/docs/Glossary/Інструкція /uk/docs/Glossary/Statement -/uk/docs/Glossary/Інтернет /uk/docs/Glossary/Internet -/uk/docs/Glossary/Абстракція /uk/docs/Glossary/Abstraction -/uk/docs/Glossary/Алгоритм /uk/docs/Glossary/Algorithm -/uk/docs/Glossary/Арґумент /uk/docs/Glossary/Argument -/uk/docs/Glossary/Буфер /uk/docs/Glossary/buffer -/uk/docs/Glossary/Веб_Доступність /uk/docs/Glossary/Accessibility -/uk/docs/Glossary/Вікно_перегляду /uk/docs/Glossary/Viewport -/uk/docs/Glossary/ДК /uk/docs/Glossary/UX -/uk/docs/Glossary/Дешифрування /uk/docs/Glossary/Decryption -/uk/docs/Glossary/Динамічна_мова_програмування /uk/docs/Glossary/Dynamic_programming_language -/uk/docs/Glossary/Замикання /uk/docs/Glossary/Closure -/uk/docs/Glossary/Змінна /uk/docs/Glossary/Variable -/uk/docs/Glossary/Значення /uk/docs/Glossary/Value -/uk/docs/Glossary/Компіляція /uk/docs/Glossary/Compile -/uk/docs/Glossary/Криптоаналіз /uk/docs/Glossary/Cryptanalysis -/uk/docs/Glossary/Криптографічна_геш-функція /uk/docs/Glossary/Cryptographic_hash_function -/uk/docs/Glossary/Криптографія /uk/docs/Glossary/Cryptography -/uk/docs/Glossary/Метод /uk/docs/Glossary/Method -/uk/docs/Glossary/ООП /uk/docs/Glossary/OOP -/uk/docs/Glossary/Обгортка /uk/docs/Glossary/Wrapper -/uk/docs/Glossary/Оператор /uk/docs/Glossary/Operator -/uk/docs/Glossary/Посилання /uk/docs/Glossary/Hyperlink -/uk/docs/Glossary/Рекурсія /uk/docs/Glossary/Recursion -/uk/docs/Glossary/Символ /uk/docs/Glossary/Symbol -/uk/docs/Glossary/Тенета /uk/docs/Glossary/World_Wide_Web -/uk/docs/Glossary/Тип /uk/docs/Glossary/Type -/uk/docs/Glossary/Функція /uk/docs/Glossary/Function -/uk/docs/Glossary/Шифр /uk/docs/Glossary/Cipher -/uk/docs/Glossary/Шифротекст /uk/docs/Glossary/Ciphertext -/uk/docs/Glossary/ідентифікатор /uk/docs/Glossary/Identifier -/uk/docs/Learn/CSS/CSS_розмітка /uk/docs/Learn/CSS/CSS_layout -/uk/docs/Learn/CSS/First_steps/Що_таке_CSS /uk/docs/Learn/CSS/First_steps/What_is_CSS -/uk/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps -/uk/docs/Learn/CSS/Styling_text/Стилі_списків /uk/docs/Learn/CSS/Styling_text/Styling_lists -/uk/docs/Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти /uk/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards -/uk/docs/Learn/HTML/Forms /uk/docs/Learn/Forms -/uk/docs/Learn/HTML/Forms/Your_first_form /uk/docs/Learn/Forms/Your_first_form -/uk/docs/Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML /uk/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -/uk/docs/Learn/How_to_contribute /uk/docs/orphaned/Learn/How_to_contribute -/uk/docs/Learn/JavaScript/Асинхронний /uk/docs/Learn/JavaScript/Asynchronous -/uk/docs/Learn/JavaScript/Будівельні_блоки /uk/docs/Learn/JavaScript/Building_blocks -/uk/docs/Learn/Tools_and_testing/Git_та_GitHub /uk/docs/Learn/Tools_and_testing/GitHub -/uk/docs/Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта /uk/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks -/uk/docs/Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte /uk/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started -/uk/docs/Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта /uk/docs/Learn/Tools_and_testing/Understanding_client-side_tools -/uk/docs/Learn/Tools_and_testing/Тестування_кросбраузерності /uk/docs/Learn/Tools_and_testing/Cross_browser_testing -/uk/docs/Learn/Доступність /uk/docs/Learn/Accessibility -/uk/docs/Learn/Навчання_та_отримання_допомоги /uk/docs/Learn/Learning_and_getting_help -/uk/docs/Learn/Фронт-енд_веб-розробник /uk/docs/Learn/Front-end_web_developer -/uk/docs/MDN/Community /uk/docs/orphaned/MDN/Community -/uk/docs/MDN/Contribute/Guidelines /uk/docs/MDN/Guidelines -/uk/docs/MDN/Contribute/Guidelines/Настанови_зі_стилю /uk/docs/MDN/Guidelines/Writing_style_guide -/uk/docs/MDN/Contribute/Howto/Create_an_MDN_account /uk/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/uk/docs/MDN/Contribute/Howto/Do_an_editorial_review /uk/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/uk/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /uk/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/uk/docs/MDN/Contribute/Howto/Бета_тестування /uk/docs/orphaned/MDN/Contribute/Howto/Be_a_beta_tester -/uk/docs/MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки /uk/docs/MDN/Contribute/Howto/Create_and_edit_pages -/uk/docs/MDN/Contribute/Structures /uk/docs/MDN/Structures -/uk/docs/MDN/Contribute/Structures/Шаблони /uk/docs/MDN/Structures/Macros -/uk/docs/MDN/Contribute/Structures/Шаблони/Загальновживані_шаблони /uk/docs/MDN/Structures/Macros/Commonly-used_macros -/uk/docs/MDN/Contribute/Tools /uk/docs/MDN/Tools -/uk/docs/MDN/Contribute/Tools/KumaScript /uk/docs/MDN/Tools/KumaScript -/uk/docs/MDN/Contribute/Tools/KumaScript/Усунення_помилок_KumaScript /uk/docs/MDN/Tools/KumaScript/Troubleshooting -/uk/docs/MDN/Guidelines/Настанови_зі_стилю /uk/docs/MDN/Guidelines/Writing_style_guide -/uk/docs/MDN/Kuma /uk/docs/MDN/Yari -/uk/docs/MDN/Structures/Шаблони /uk/docs/MDN/Structures/Macros -/uk/docs/MDN/Structures/Шаблони/Загальновживані_шаблони /uk/docs/MDN/Structures/Macros/Commonly-used_macros -/uk/docs/MDN/Tools/KumaScript/Усунення_помилок_KumaScript /uk/docs/MDN/Tools/KumaScript/Troubleshooting -/uk/docs/MDN/Про /uk/docs/MDN/About -/uk/docs/MDN/з_чого_почати /uk/docs/MDN/Contribute/Getting_started -/uk/docs/Mozilla/Add-ons/WebExtensions/Що_таке_Web_Розширення /uk/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -/uk/docs/Web/API/API_відображення_сторінки /uk/docs/Web/API/Page_Visibility_API -/uk/docs/Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність /uk/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -/uk/docs/Web/API/WindowTimers /uk/docs/conflicting/Web/API/WindowOrWorkerGlobalScope -/uk/docs/Web/API/WindowTimers/setTimeout /uk/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout -/uk/docs/Web/API/Подія /uk/docs/Web/API/Event -/uk/docs/Web/API/Подія/target /uk/docs/Web/API/Event/target -/uk/docs/Web/CSS/CSS_Animations/Використання_CSS_анімацій /uk/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/uk/docs/Web/CSS/CSS_Box_Model/Згортання_відступів /uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/uk/docs/Web/CSS/attr /uk/docs/Web/CSS/attr() -/uk/docs/Web/CSS/linear-gradient /uk/docs/Web/CSS/linear-gradient() -/uk/docs/Web/CSS/Альтернативні_таблиці_стилів /uk/docs/Web/CSS/Alternative_style_sheets -/uk/docs/Web/CSS/Довідник /uk/docs/Web/CSS/Reference -/uk/docs/Web/CSS/Коробчаста_модель_CSS /uk/docs/Web/CSS/CSS_Box_Model -/uk/docs/Web/CSS/Модель_візуального_формування /uk/docs/Web/CSS/Visual_formatting_model -/uk/docs/Web/CSS/Розмітка_кулінарна-книга /uk/docs/Web/CSS/Layout_cookbook -/uk/docs/Web/CSS/Схема_компонування /uk/docs/Web/CSS/Layout_mode -/uk/docs/Web/Events/DOMContentLoaded /uk/docs/Web/API/Window/DOMContentLoaded_event -/uk/docs/Web/Events/abort /uk/docs/Web/API/HTMLMediaElement/abort_event -/uk/docs/Web/Guide/CSS /uk/docs/Learn/CSS -/uk/docs/Web/Guide/CSS/Getting_started /uk/docs/conflicting/Learn/CSS/First_steps -/uk/docs/Web/Guide/CSS/Getting_started/What_is_CSS /uk/docs/Learn/CSS/First_steps/How_CSS_works -/uk/docs/Web/Guide/HTML /uk/docs/Learn/HTML -/uk/docs/Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу /uk/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines -/uk/docs/Web/Guide/HTML/Вступ /uk/docs/Learn/HTML/Introduction_to_HTML -/uk/docs/Web/Guide/Графіка /uk/docs/Web/Guide/Graphics -/uk/docs/Web/HTML/Довідник /uk/docs/Web/HTML/Reference -/uk/docs/Web/HTML/Елемент /uk/docs/Web/HTML/Element -/uk/docs/Web/HTML/Елемент/html /uk/docs/Web/HTML/Element/html -/uk/docs/Web/HTML/Елемент/iframe /uk/docs/Web/HTML/Element/iframe -/uk/docs/Web/HTML/Елемент/link /uk/docs/Web/HTML/Element/link -/uk/docs/Web/HTML/Елемент/nav /uk/docs/Web/HTML/Element/nav -/uk/docs/Web/HTML/Елемент/script /uk/docs/Web/HTML/Element/script -/uk/docs/Web/HTML/Елемент/section /uk/docs/Web/HTML/Element/section -/uk/docs/Web/HTML/Елемент/style /uk/docs/Web/HTML/Element/style -/uk/docs/Web/HTML/Елемент/table /uk/docs/Web/HTML/Element/table -/uk/docs/Web/HTML/Елемент/video /uk/docs/Web/HTML/Element/video -/uk/docs/Web/HTML/Елемент/Заголовок /uk/docs/Web/HTML/Element/header -/uk/docs/Web/HTML/Загальні_атрибути /uk/docs/Web/HTML/Global_attributes -/uk/docs/Web/HTML/Загальні_атрибути/hidden /uk/docs/Web/HTML/Global_attributes/hidden -/uk/docs/Web/HTML/Загальні_атрибути/itemscope /uk/docs/Web/HTML/Global_attributes/itemscope -/uk/docs/Web/HTML/Загальні_атрибути/lang /uk/docs/Web/HTML/Global_attributes/lang -/uk/docs/Web/HTML/Загальні_атрибути/tabindex /uk/docs/Web/HTML/Global_attributes/tabindex -/uk/docs/Web/HTML/Режим_сумісності_й_стандартний_режим /uk/docs/Web/HTML/Quirks_Mode_and_Standards_Mode -/uk/docs/Web/HTTP/Заголовки /uk/docs/Web/HTTP/Headers -/uk/docs/Web/HTTP/Заголовки/Accept-Encoding /uk/docs/Web/HTTP/Headers/Accept-Encoding -/uk/docs/Web/HTTP/Заголовки/Accept-Language /uk/docs/Web/HTTP/Headers/Accept-Language -/uk/docs/Web/HTTP/Заголовки/Connection /uk/docs/Web/HTTP/Headers/Connection -/uk/docs/Web/HTTP/Заголовки/Content-Length /uk/docs/Web/HTTP/Headers/Content-Length -/uk/docs/Web/HTTP/Заголовки/Content-Type /uk/docs/Web/HTTP/Headers/Content-Type -/uk/docs/Web/HTTP/Заголовки/ETag /uk/docs/Web/HTTP/Headers/ETag -/uk/docs/Web/HTTP/Заголовки/If-Match /uk/docs/Web/HTTP/Headers/If-Match -/uk/docs/Web/HTTP/Заголовки/Location /uk/docs/Web/HTTP/Headers/Location -/uk/docs/Web/HTTP/Заголовки/Referer /uk/docs/Web/HTTP/Headers/Referer -/uk/docs/Web/HTTP/Заголовки/User-Agent /uk/docs/Web/HTTP/Headers/User-Agent -/uk/docs/Web/HTTP/Заголовки/X-Forwarded-Proto /uk/docs/Web/HTTP/Headers/X-Forwarded-Proto -/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model /uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model -/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори /uk/docs/Web/JavaScript/Guide/Expressions_and_Operators -/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції /uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions -/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів /uk/docs/Web/JavaScript/Reference/Functions/rest_parameters -/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /uk/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/uk/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype /uk/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -/uk/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /uk/docs/Web/JavaScript/Reference/Global_Objects/Date -/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error -/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/EvalError -/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function -/uk/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError -/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/заокругелння /uk/docs/Web/JavaScript/Reference/Global_Objects/Math/round -/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /uk/docs/Web/JavaScript/Reference/Global_Objects/Object -/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise -/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/відхилено /uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject -/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError -/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypeError -/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/URIError -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число /uk/docs/Web/JavaScript/Reference/Global_Objects/Number -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/EPSILON /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/MAX_SAFE_INTEGER /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/MAX_VALUE /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/MIN_SAFE_INTEGER /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/MIN_VALUE /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/NEGATIVE_INFINITY /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/NaN /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/Number /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/Number -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/POSITIVE_INFINITY /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/isFinite /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/isInteger /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/isNaN /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/isSafeInteger /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/parseFloat /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/parseInt /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/prototype /uk/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toExponential /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toFixed /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toLocaleString /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toPrecision /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toSource /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toSource -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/toString /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toString -/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/valueOf /uk/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf -/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /uk/docs/conflicting/Web/JavaScript/Reference/Operators -/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /uk/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators /uk/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca -/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів /uk/docs/Web/JavaScript/Reference/Operators/Object_initializer -/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація /uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment -/uk/docs/Web/JavaScript/Reference/Operators/Оператор_поширення /uk/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -/uk/docs/Web/JavaScript/Reference/Operators/Оператор_розпакування /uk/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння /uk/docs/conflicting/Web/JavaScript/Reference/Operators_a8aa9ce42ce1749862961c61113d120b -/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння /uk/docs/conflicting/Web/JavaScript/Reference/Operators_1cd48548c16282df3883f99267726c3e -/uk/docs/Web/JavaScript/Reference/Statements/default /uk/docs/conflicting/Web/JavaScript/Reference/Statements/switch -/uk/docs/Web/JavaScript/Reference/Протоколи_перебору /uk/docs/Web/JavaScript/Reference/Iteration_protocols -/uk/docs/Web/JavaScript/Reference/Список_методів /uk/docs/Web/JavaScript/Reference -/uk/docs/Web/JavaScript/oglyad_tehnologiy_JavaScript /uk/docs/Web/JavaScript/JavaScript_technologies_overview -/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість /uk/docs/Web/JavaScript/Equality_comparisons_and_sameness -/uk/docs/Web/Гудіні /uk/docs/Web/Houdini -/uk/docs/Web/Застосунки/Новітні /uk/docs/Web/Progressive_web_apps -/uk/docs/Web/Посібники /uk/docs/Web/Tutorials -/uk/docs/Інструменти /uk/docs/Tools -/uk/docs/Інструменти/Network_Monitor /uk/docs/Tools/Network_Monitor -/uk/docs/Інструменти/Network_Monitor/Performance_Analysis /uk/docs/Tools/Network_Monitor/Performance_Analysis -/uk/docs/Інструменти/Network_Monitor/Throttling /uk/docs/Tools/Network_Monitor/Throttling -/uk/docs/Інструменти/Network_Monitor/recording /uk/docs/Tools/Network_Monitor/recording -/uk/docs/Інструменти/Network_Monitor/request_details /uk/docs/Tools/Network_Monitor/request_details -/uk/docs/Інструменти/Network_Monitor/request_list /uk/docs/Tools/Network_Monitor/request_list -/uk/docs/Інструменти/Network_Monitor/toolbar /uk/docs/Tools/Network_Monitor/toolbar -/uk/docs/Інструменти/Web_Console /uk/docs/Tools/Web_Console -/uk/docs/Інструменти/Web_Console/Console_messages /uk/docs/Tools/Web_Console/Console_messages -/uk/docs/Інструменти/Web_Console/Opening_the_Web_Console /uk/docs/Tools/Web_Console/UI_Tour -/uk/docs/Інструменти/Web_Console/Split_console /uk/docs/Tools/Web_Console/Split_console -/uk/docs/Оператор_розпакування /uk/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax diff --git a/files/uk/_wikihistory.json b/files/uk/_wikihistory.json deleted file mode 100644 index ccca22f234..0000000000 --- a/files/uk/_wikihistory.json +++ /dev/null @@ -1,6298 +0,0 @@ -{ - "Glossary": { - "modified": "2020-10-07T11:14:53.420Z", - "contributors": [ - "peterbe", - "SphinxKnight", - "wbamberg", - "asmforce", - "yuraantonov", - "andygol" - ] - }, - "Glossary/404": { - "modified": "2019-03-23T22:34:56.546Z", - "contributors": [ - "andygol" - ] - }, - "Glossary/AJAX": { - "modified": "2019-05-04T18:30:01.652Z", - "contributors": [ - "ArtemLashmanov", - "Ahineya", - "Kamilius", - "topvova" - ] - }, - "Glossary/API": { - "modified": "2019-05-16T17:34:18.261Z", - "contributors": [ - "ArtemLashmanov", - "asmforce", - "Kamilius" - ] - }, - "Glossary/ASCII": { - "modified": "2019-11-21T10:02:53.164Z", - "contributors": [ - "DariaManko", - "Abalmazik" - ] - }, - "Glossary/Adobe_Flash": { - "modified": "2019-03-23T22:30:35.338Z", - "contributors": [ - "bogdanBrizh", - "Kamilius" - ] - }, - "Glossary/Alignment_Container": { - "modified": "2019-05-16T17:34:56.193Z", - "contributors": [ - "ArtemLashmanov", - "IllyaOhorodnyk" - ] - }, - "Glossary/Alignment_Subject": { - "modified": "2019-05-16T17:33:30.645Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/Apple_Safari": { - "modified": "2019-03-23T22:16:44.865Z", - "contributors": [ - "Ahineya" - ] - }, - "Glossary/Asynchronous": { - "modified": "2019-12-04T08:26:44.705Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Block": { - "modified": "2020-02-14T13:15:21.105Z", - "contributors": [ - "ivanprytula", - "Sheppy" - ] - }, - "Glossary/Block/CSS": { - "modified": "2020-02-17T05:03:42.939Z", - "contributors": [ - "ivanprytula" - ] - }, - "Glossary/Boolean": { - "modified": "2019-05-04T17:39:14.904Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/Browser": { - "modified": "2019-03-23T22:34:45.503Z", - "contributors": [ - "SKaznadei", - "asmforce", - "Kamilius", - "andygol" - ] - }, - "Glossary/CSS": { - "modified": "2019-03-23T22:16:47.141Z", - "contributors": [ - "Ahineya" - ] - }, - "Glossary/Cache": { - "modified": "2019-05-01T17:34:02.427Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/Callback_function": { - "modified": "2019-12-04T08:45:13.038Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Canvas": { - "modified": "2019-03-23T22:19:27.022Z", - "contributors": [ - "Yaroslav_Yachmenov" - ] - }, - "Glossary/Character": { - "modified": "2019-11-21T10:36:14.321Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Computer_Programming": { - "modified": "2019-11-20T11:10:50.052Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Conditional": { - "modified": "2019-11-06T13:19:10.090Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Constant": { - "modified": "2019-11-06T11:29:17.070Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Control_flow": { - "modified": "2020-05-27T10:14:20.999Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/DOM": { - "modified": "2019-10-25T05:58:21.854Z", - "contributors": [ - "DariaManko", - "ArtemLashmanov" - ] - }, - "Glossary/Data_structure": { - "modified": "2019-09-18T10:46:08.363Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Doctype": { - "modified": "2019-03-23T22:10:46.624Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/ECMAScript": { - "modified": "2019-07-18T07:42:46.577Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Element": { - "modified": "2019-05-04T18:24:30.901Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/Encryption": { - "modified": "2019-09-16T13:33:02.180Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Engine": { - "modified": "2019-03-23T22:01:07.842Z", - "contributors": [ - "AdriandeCita", - "v.h.f.u" - ] - }, - "Glossary/Falsy": { - "modified": "2020-07-02T06:47:45.513Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/GPU": { - "modified": "2019-05-16T17:29:46.577Z", - "contributors": [ - "ArtemLashmanov", - "AdriandeCita", - "v.h.f.u" - ] - }, - "Glossary/General_header": { - "modified": "2020-03-07T13:21:33.559Z", - "contributors": [ - "andrewtk", - "CODER591" - ] - }, - "Glossary/Global_object": { - "modified": "2019-03-18T21:38:16.358Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/HTML": { - "modified": "2019-03-23T22:16:40.518Z", - "contributors": [ - "asmforce", - "Ahineya" - ] - }, - "Glossary/HTML5": { - "modified": "2019-03-18T21:27:09.266Z", - "contributors": [ - "Pavlechko" - ] - }, - "Glossary/HTTP": { - "modified": "2019-05-30T04:52:12.452Z", - "contributors": [ - "DariaManko", - "SKaznadei", - "asmforce", - "Ahineya", - "andygol" - ] - }, - "Glossary/HTTP_2": { - "modified": "2019-09-11T01:13:04.211Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/HTTP_header": { - "modified": "2020-03-07T13:00:15.443Z", - "contributors": [ - "andrewtk" - ] - }, - "Glossary/Hoisting": { - "modified": "2019-12-10T09:36:19.930Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Hypertext": { - "modified": "2019-03-18T21:35:05.184Z", - "contributors": [ - "SKaznadei" - ] - }, - "Glossary/IDE": { - "modified": "2019-05-01T19:02:03.018Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/IIFE": { - "modified": "2019-11-19T06:28:36.778Z", - "contributors": [ - "DariaManko", - "asmforce", - "matrixb0ss" - ] - }, - "Glossary/JSON": { - "modified": "2019-03-23T22:16:23.137Z", - "contributors": [ - "asmforce", - "Ahineya" - ] - }, - "Glossary/Java": { - "modified": "2019-03-23T22:05:33.959Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/JavaScript": { - "modified": "2019-03-23T22:34:42.464Z", - "contributors": [ - "asmforce", - "Ahineya", - "andygol" - ] - }, - "Glossary/Ligature": { - "modified": "2020-04-02T04:36:48.731Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Mozilla_Firefox": { - "modified": "2019-03-18T21:14:54.414Z", - "contributors": [ - "Pavlechko" - ] - }, - "Glossary/NaN": { - "modified": "2019-03-23T22:09:19.287Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Node.js": { - "modified": "2019-03-23T22:34:53.261Z", - "contributors": [ - "asmforce", - "andygol" - ] - }, - "Glossary/Null": { - "modified": "2019-06-24T09:18:44.247Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Number": { - "modified": "2019-11-18T12:47:58.668Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Object": { - "modified": "2019-03-23T22:09:20.640Z", - "contributors": [ - "bdvorianov", - "asmforce" - ] - }, - "Glossary/Object_reference": { - "modified": "2019-03-23T22:04:21.513Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Polyfill": { - "modified": "2019-03-23T22:20:57.226Z", - "contributors": [ - "asmforce", - "volodymyrlut" - ] - }, - "Glossary/Primitive": { - "modified": "2019-03-23T22:08:18.870Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Protocol": { - "modified": "2019-03-18T21:15:48.444Z", - "contributors": [ - "asmforce", - "andygol" - ] - }, - "Glossary/Prototype-based_programming": { - "modified": "2019-03-23T22:05:22.196Z", - "contributors": [ - "ivaskonyan" - ] - }, - "Glossary/Proxy_server": { - "modified": "2020-08-04T14:44:39.195Z", - "contributors": [ - "HA3IK" - ] - }, - "Glossary/REST": { - "modified": "2019-05-30T06:11:30.348Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/RSS": { - "modified": "2019-03-23T22:10:09.352Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Regular_expression": { - "modified": "2019-03-23T22:34:55.297Z", - "contributors": [ - "asmforce", - "andygol" - ] - }, - "Glossary/SVG": { - "modified": "2019-03-23T22:16:21.554Z", - "contributors": [ - "Ahineya" - ] - }, - "Glossary/Scope": { - "modified": "2019-03-23T22:04:26.429Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Self-Executing_Anonymous_Function": { - "modified": "2019-11-18T13:35:32.463Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Server": { - "modified": "2019-03-23T22:33:38.300Z", - "contributors": [ - "andygol" - ] - }, - "Glossary/Shim": { - "modified": "2019-07-17T11:56:57.795Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Static_method": { - "modified": "2019-07-23T09:08:00.422Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/String": { - "modified": "2019-07-23T09:05:07.539Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Synchronous": { - "modified": "2019-12-04T06:46:23.272Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Truthy": { - "modified": "2020-07-02T06:50:51.421Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Type_Conversion": { - "modified": "2019-06-05T11:05:39.376Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/Type_coercion": { - "modified": "2019-11-18T09:56:50.946Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/URI": { - "modified": "2019-05-16T16:46:33.594Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/URL": { - "modified": "2019-03-23T22:16:32.060Z", - "contributors": [ - "asmforce", - "Ahineya" - ] - }, - "Glossary/URN": { - "modified": "2019-05-16T17:23:44.498Z", - "contributors": [ - "ArtemLashmanov" - ] - }, - "Glossary/UTF-8": { - "modified": "2019-11-21T10:03:19.479Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/W3C": { - "modified": "2019-03-23T22:04:52.228Z", - "contributors": [ - "websunsey" - ] - }, - "Glossary/WebGL": { - "modified": "2019-03-23T22:30:09.114Z", - "contributors": [ - "Seprum" - ] - }, - "Glossary/WebSockets": { - "modified": "2019-03-18T21:34:30.974Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Whitespace": { - "modified": "2020-05-28T11:54:54.898Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/XML": { - "modified": "2019-03-26T03:14:24.244Z", - "contributors": [ - "boxa6", - "asmforce", - "Ahineya" - ] - }, - "Glossary/array": { - "modified": "2019-07-01T08:49:00.284Z", - "contributors": [ - "DariaManko", - "Antyneskul", - "topvova" - ] - }, - "Glossary/character_encoding": { - "modified": "2019-11-21T08:23:50.859Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/hash": { - "modified": "2019-03-18T20:41:54.293Z", - "contributors": [ - "IllyaOhorodnyk" - ] - }, - "Glossary/loop": { - "modified": "2019-11-07T06:27:14.402Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/property": { - "modified": "2019-07-18T11:23:43.506Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/property/CSS": { - "modified": "2019-07-18T10:59:05.940Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/property/JavaScript": { - "modified": "2019-07-18T12:25:13.399Z", - "contributors": [ - "DariaManko" - ] - }, - "Glossary/undefined": { - "modified": "2019-03-23T22:04:17.494Z", - "contributors": [ - "asmforce" - ] - }, - "Learn": { - "modified": "2020-07-16T22:43:48.924Z", - "contributors": [ - "FidykDmytro", - "Juliya13uk", - "SphinxKnight", - "svarlamov", - "SKaznadei", - "asmforce", - "yuraantonov", - "andrewnovsky" - ] - }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:38.014Z", - "contributors": [ - "SergiyLuckys", - "josh-wong" - ] - }, - "Learn/CSS/Building_blocks": { - "modified": "2020-07-25T19:21:51.677Z", - "contributors": [ - "nepiravno", - "chrisdavidmills" - ] - }, - "Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2020-07-16T22:28:32.944Z", - "contributors": [ - "sonia-ko" - ] - }, - "Learn/CSS/First_steps": { - "modified": "2020-07-25T19:19:07.223Z", - "contributors": [ - "nepiravno", - "SergiyLuckys" - ] - }, - "Learn/CSS/Styling_text": { - "modified": "2020-07-25T19:23:28.097Z", - "contributors": [ - "nepiravno", - "wilton-cruz" - ] - }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:27.609Z", - "contributors": [ - "SKaznadei", - "chrisdavidmills" - ] - }, - "Learn/Common_questions/set_up_a_local_testing_server": { - "modified": "2020-07-16T22:35:53.739Z", - "contributors": [ - "fvl955", - "SKaznadei" - ] - }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-09-04T18:06:46.776Z", - "contributors": [ - "borysl", - "SergiyLuckys", - "ArtemLashmanov", - "SKaznadei", - "asmforce", - "Ahineya", - "yuraantonov" - ] - }, - "Learn/Getting_started_with_the_web/CSS_basics": { - "modified": "2020-07-16T22:35:04.570Z", - "contributors": [ - "igor.matzyshyn", - "websunsey", - "Ahineya" - ] - }, - "Learn/Getting_started_with_the_web/Dealing_with_files": { - "modified": "2020-07-16T22:34:38.829Z", - "contributors": [ - "mdymytrova", - "feel13good" - ] - }, - "Learn/Getting_started_with_the_web/HTML_basics": { - "modified": "2020-10-14T08:48:06.055Z", - "contributors": [ - "azvilys", - "serartmar", - "websunsey", - "mdymytrova", - "feel13good" - ] - }, - "Learn/Getting_started_with_the_web/How_the_Web_works": { - "modified": "2020-07-16T22:34:03.150Z", - "contributors": [ - "steinbergmann", - "SKaznadei", - "mdymytrova" - ] - }, - "Learn/Getting_started_with_the_web/Installing_basic_software": { - "modified": "2020-07-26T07:39:08.088Z", - "contributors": [ - "nepiravno", - "archVasyl", - "w3schoolsrus", - "gregory-js", - "SKaznadei", - "mdymytrova", - "feel13good" - ] - }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-07-16T22:35:17.273Z", - "contributors": [ - "OlexandrIlchenko", - "bdvorianov", - "AlexandraIM", - "ivovchak", - "mirkinoid" - ] - }, - "Learn/Getting_started_with_the_web/Publishing_your_website": { - "modified": "2020-07-16T22:34:29.145Z", - "contributors": [ - "OlexandrIlchenko", - "mdymytrova" - ] - }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-07-16T22:34:20.265Z", - "contributors": [ - "SKaznadei", - "mdymytrova" - ] - }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:24.960Z", - "contributors": [ - "rage2k2", - "feel13good", - "hadleyel" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:53.922Z", - "contributors": [ - "ArtemLashmanov", - "websunsey", - "mdymytrova", - "feel13good" - ] - }, - "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { - "modified": "2020-07-16T22:23:48.045Z", - "contributors": [ - "taras-d" - ] - }, - "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-07-16T22:24:16.560Z", - "contributors": [ - "websunsey" - ] - }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-07-16T22:23:08.794Z", - "contributors": [ - "Juliya13uk", - "OlehMrB", - "Orlann", - "websunsey", - "mdymytrova" - ] - }, - "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { - "modified": "2020-07-16T22:23:39.702Z", - "contributors": [ - "yasyk20", - "Sergiy_Luckys", - "websunsey" - ] - }, - "Learn/HTML/Multimedia_and_embedding": { - "modified": "2020-07-16T22:24:29.703Z", - "contributors": [ - "Onimi", - "IshIdzy2001", - "feel13good" - ] - }, - "Learn/HTML/Tables": { - "modified": "2020-07-25T20:30:18.903Z", - "contributors": [ - "nepiravno", - "Oleksandr09", - "AlexOcheretnyi", - "feel13good" - ] - }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:45.640Z", - "contributors": [ - "FidykDmytro", - "OlexandrIlchenko", - "asmforce", - "chrisdavidmills" - ] - }, - "Learn/JavaScript/Client-side_web_APIs": { - "modified": "2020-07-25T20:51:00.301Z", - "contributors": [ - "nepiravno", - "Oleksandr09" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-25T19:45:01.889Z", - "contributors": [ - "nepiravno", - "FidykDmytro", - "OlexandrIlchenko" - ] - }, - "Learn/JavaScript/First_steps/What_is_JavaScript": { - "modified": "2020-07-16T22:30:13.029Z", - "contributors": [ - "cypper" - ] - }, - "Learn/JavaScript/Objects": { - "modified": "2020-07-16T22:31:53.825Z", - "contributors": [ - "asmforce", - "HelgeUa" - ] - }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-07-16T22:32:02.509Z", - "contributors": [ - "HelgeUa" - ] - }, - "Learn/JavaScript/Objects/Object-oriented_JS": { - "modified": "2020-07-16T22:32:08.919Z", - "contributors": [ - "HelgeUa" - ] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:36:02.652Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django": { - "modified": "2020-07-16T22:36:36.018Z", - "contributors": [ - "ostafiychukv", - "rudarav" - ] - }, - "Learn/Server-side/Django/Introduction": { - "modified": "2020-07-16T22:36:42.110Z", - "contributors": [ - "ostafiychukv" - ] - }, - "Learn/Server-side/Express_Nodejs": { - "modified": "2020-07-16T22:37:55.702Z", - "contributors": [ - "lol-russo" - ] - }, - "Learn/Server-side/Express_Nodejs/routes": { - "modified": "2020-07-16T22:38:28.176Z", - "contributors": [ - "Zooman090" - ] - }, - "Learn/Tools_and_testing": { - "modified": "2020-07-25T20:16:04.168Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "MDN": { - "modified": "2020-02-19T18:40:00.793Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "asmforce", - "trofima", - "yuraantonov", - "imrock", - "Jeremie" - ] - }, - "MDN/Contribute": { - "modified": "2019-03-23T22:38:54.409Z", - "contributors": [ - "wbamberg", - "asmforce", - "websunsey", - "chrisdavidmills" - ] - }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:16:41.938Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce", - "hanna-bublyk", - "Fgeniy", - "websunsey", - "trofima" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2019-01-17T01:00:56.499Z", - "contributors": [ - "wbamberg", - "asmforce", - "jswisher" - ] - }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:32:09.261Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce", - "jswisher" - ] - }, - "MDN/Structures": { - "modified": "2020-09-30T12:57:34.758Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce", - "jswisher" - ] - }, - "MDN/Tools": { - "modified": "2020-09-30T16:54:47.325Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" - ] - }, - "MDN/Tools/KumaScript": { - "modified": "2020-09-30T16:54:47.735Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce", - "jwhitlock" - ] - }, - "Mozilla": { - "modified": "2019-03-23T22:16:17.031Z", - "contributors": [ - "asmforce", - "dkocho4" - ] - }, - "Mozilla/Add-ons": { - "modified": "2019-09-09T12:16:17.078Z", - "contributors": [ - "SphinxKnight", - "asmforce", - "hanstalker", - "KipiShKing" - ] - }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2019-05-29T06:22:58.610Z", - "contributors": [ - "s5t8e9r1n", - "asmforce", - "dvincent" - ] - }, - "Mozilla/Add-ons/WebExtensions/API": { - "modified": "2019-05-28T03:25:19.273Z" - }, - "Mozilla/Add-ons/WebExtensions/API/sessions": { - "modified": "2020-10-15T22:19:17.157Z" - }, - "Mozilla/Add-ons/WebExtensions/API/sessions/restore": { - "modified": "2020-10-15T22:19:11.730Z", - "contributors": [ - "asmforce", - "cloudgnome" - ] - }, - "Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard": { - "modified": "2019-05-25T08:49:03.914Z", - "contributors": [ - "cloudgnome" - ] - }, - "Mozilla/Firefox": { - "modified": "2019-09-10T14:53:23.406Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "yuraantonov", - "teoli" - ] - }, - "Mozilla/Firefox/Experimental_features": { - "modified": "2019-01-17T00:32:08.565Z", - "contributors": [ - "wbamberg", - "yuraantonov" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-01-17T00:28:32.216Z", - "contributors": [ - "wbamberg", - "yuraantonov", - "Sheppy" - ] - }, - "Mozilla/Firefox/Releases/53": { - "modified": "2019-03-23T22:20:20.209Z", - "contributors": [ - "wbamberg", - "arcade", - "yuraantonov" - ] - }, - "Mozilla/Firefox/Releases/54": { - "modified": "2019-03-23T22:19:31.210Z", - "contributors": [ - "wbamberg", - "AdriandeCita", - "yuraantonov" - ] - }, - "Mozilla/Firefox/Releases/56": { - "modified": "2019-03-23T22:07:50.027Z", - "contributors": [ - "wbamberg", - "AndriiZ" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:29.737Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Tools/Page_Inspector/How_to": { - "modified": "2020-07-16T22:34:32.207Z", - "contributors": [ - "sidgan" - ] - }, - "Web": { - "modified": "2020-01-20T18:42:58.122Z", - "contributors": [ - "curtdp", - "VitaliiBilan", - "ASeegull", - "yuraantonov", - "andrewnovsky", - "th65" - ] - }, - "Web/API": { - "modified": "2020-10-27T05:49:30.485Z", - "contributors": [ - "dmytro.davydenko", - "teoli", - "yuraantonov" - ] - }, - "Web/API/ANGLE_instanced_arrays": { - "modified": "2020-10-15T22:20:52.655Z", - "contributors": [ - "Sergiy_Luckys" - ] - }, - "Web/API/Ambient_Light_Events": { - "modified": "2020-10-27T06:20:23.810Z", - "contributors": [ - "dmytro.davydenko" - ] - }, - "Web/API/Blob": { - "modified": "2020-01-08T09:45:47.984Z", - "contributors": [ - "switchUA", - "angry-grandma", - "curdwithraisins" - ] - }, - "Web/API/Canvas_API": { - "modified": "2019-03-23T22:08:43.126Z", - "contributors": [ - "DmytroMyhal", - "pa7" - ] - }, - "Web/API/Canvas_API/Tutorial": { - "modified": "2019-03-23T22:08:45.561Z", - "contributors": [ - "dustinpaluch" - ] - }, - "Web/API/Canvas_API/Tutorial/Basic_usage": { - "modified": "2020-07-10T12:46:01.798Z", - "contributors": [ - "alexeeva.iryna" - ] - }, - "Web/API/Console": { - "modified": "2019-03-23T22:08:16.158Z", - "contributors": [ - "benjamingr" - ] - }, - "Web/API/Console/dir": { - "modified": "2020-01-20T18:31:16.722Z", - "contributors": [ - "curtdp", - "ASeegull" - ] - }, - "Web/API/Console/log": { - "modified": "2019-03-18T20:38:21.322Z", - "contributors": [ - "Quadracopter", - "YukihiroSM", - "muhus" - ] - }, - "Web/API/CustomEvent": { - "modified": "2020-10-15T21:58:35.424Z", - "contributors": [ - "fscholz", - "SilentStorm", - "mfluehr" - ] - }, - "Web/API/CustomEvent/initCustomEvent": { - "modified": "2019-03-23T22:03:44.967Z", - "contributors": [ - "FlyingLeave" - ] - }, - "Web/API/DOMString": { - "modified": "2020-12-03T12:45:52.192Z", - "contributors": [ - "Kyrylo-77" - ] - }, - "Web/API/Document": { - "modified": "2019-03-18T21:27:25.119Z", - "contributors": [ - "topvova" - ] - }, - "Web/API/Document/visibilitychange_event": { - "modified": "2020-10-15T22:29:35.772Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/API/Element": { - "modified": "2020-10-15T22:23:49.564Z", - "contributors": [ - "archVasyl", - "Whhymee" - ] - }, - "Web/API/Element/getClientRects": { - "modified": "2020-10-15T22:23:41.070Z", - "contributors": [ - "topvova" - ] - }, - "Web/API/GlobalEventHandlers": { - "modified": "2020-10-15T22:29:29.087Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/GlobalEventHandlers/onkeydown": { - "modified": "2020-10-15T22:29:21.321Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/API/GlobalEventHandlers/onkeyup": { - "modified": "2020-10-15T22:29:27.974Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/API/GlobalEventHandlers/onmouseover": { - "modified": "2020-10-15T22:29:40.177Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/API/HTMLCanvasElement": { - "modified": "2019-03-23T22:11:16.811Z", - "contributors": [ - "trusktr" - ] - }, - "Web/API/HTMLElement": { - "modified": "2019-03-23T22:02:17.514Z", - "contributors": [ - "jpmedley" - ] - }, - "Web/API/HTMLElement/offsetTop": { - "modified": "2020-10-15T21:59:06.214Z", - "contributors": [ - "SphinxKnight", - "braggae" - ] - }, - "Web/API/HTMLFormElement": { - "modified": "2020-10-15T22:27:30.315Z", - "contributors": [ - "alattalatta" - ] - }, - "Web/API/HTMLFormElement/reset": { - "modified": "2020-10-15T22:27:29.495Z", - "contributors": [ - "Halochkin" - ] - }, - "Web/API/HTMLImageElement": { - "modified": "2019-03-23T22:20:56.281Z", - "contributors": [ - "erikadoyle" - ] - }, - "Web/API/HTMLImageElement/Image": { - "modified": "2019-03-23T22:20:56.448Z", - "contributors": [ - "asmforce" - ] - }, - "Web/API/HTML_DOM_API": { - "modified": "2020-10-15T22:27:41.061Z", - "contributors": [ - "Zearin_Galaurum" - ] - }, - "Web/API/HTML_DOM_API/Microtask_guide": { - "modified": "2020-03-11T12:39:43.051Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/Headers": { - "modified": "2020-10-15T22:15:58.027Z", - "contributors": [ - "khomyakdi" - ] - }, - "Web/API/History_API": { - "modified": "2020-10-28T04:18:03.775Z", - "contributors": [ - "dmytro.davydenko" - ] - }, - "Web/API/Intersection_Observer_API": { - "modified": "2020-10-15T22:31:06.546Z", - "contributors": [ - "vtlk", - "VolodymyrZaplatynskii" - ] - }, - "Web/API/MediaQueryList": { - "modified": "2020-10-15T22:17:20.803Z" - }, - "Web/API/MediaQueryList/addListener": { - "modified": "2020-10-15T22:17:19.815Z", - "contributors": [ - "asmforce" - ] - }, - "Web/API/NetworkInformation": { - "modified": "2020-10-27T08:34:51.250Z", - "contributors": [ - "dmytro.davydenko" - ] - }, - "Web/API/Network_Information_API": { - "modified": "2020-10-27T08:08:31.980Z", - "contributors": [ - "dmytro.davydenko" - ] - }, - "Web/API/Node": { - "modified": "2019-03-23T22:18:31.556Z", - "contributors": [ - "abbycar" - ] - }, - "Web/API/Node/contains": { - "modified": "2019-03-23T22:18:27.726Z", - "contributors": [ - "piton13" - ] - }, - "Web/API/PromiseRejectionEvent": { - "modified": "2020-10-15T22:27:09.025Z", - "contributors": [ - "DariaManko", - "Sheppy" - ] - }, - "Web/API/PromiseRejectionEvent/PromiseRejectionEvent": { - "modified": "2020-10-15T22:27:08.856Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/PromiseRejectionEvent/promise": { - "modified": "2020-10-15T22:27:09.252Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/PromiseRejectionEvent/reason": { - "modified": "2020-10-15T22:27:10.645Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/SVGAnimatedString": { - "modified": "2020-10-15T22:11:42.638Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/SVGAnimatedString/animVal": { - "modified": "2020-10-15T22:11:41.186Z", - "contributors": [ - "Halochkin" - ] - }, - "Web/API/URLSearchParams": { - "modified": "2020-10-04T20:10:53.785Z", - "contributors": [ - "i.yalovecky", - "akmil" - ] - }, - "Web/API/WebGL_API": { - "modified": "2019-03-23T22:30:04.010Z", - "contributors": [ - "Seprum" - ] - }, - "Web/API/WebSocket": { - "modified": "2019-03-23T22:10:43.303Z", - "contributors": [ - "bsurai" - ] - }, - "Web/API/Web_Workers_API": { - "modified": "2019-03-23T22:24:27.381Z", - "contributors": [ - "Nazichok", - "curdwithraisins" - ] - }, - "Web/API/Window": { - "modified": "2019-03-23T22:14:11.634Z", - "contributors": [ - "jpmedley" - ] - }, - "Web/API/Window/confirm": { - "modified": "2019-03-18T21:44:10.491Z", - "contributors": [ - "AndriiZ" - ] - }, - "Web/API/Window/console": { - "modified": "2019-03-18T21:43:46.635Z", - "contributors": [ - "AndriiZ" - ] - }, - "Web/API/Window/history": { - "modified": "2020-10-15T22:15:01.374Z", - "contributors": [ - "FolknR" - ] - }, - "Web/API/Window/localStorage": { - "modified": "2020-10-15T21:53:14.235Z", - "contributors": [ - "asmforce", - "igor-budzin", - "a1b0r", - "AndriiZ", - "yuraantonov" - ] - }, - "Web/API/Window/rejectionhandled_event": { - "modified": "2020-10-15T22:27:09.512Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/Window/self": { - "modified": "2020-10-15T22:17:13.466Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/Window/unhandledrejection_event": { - "modified": "2020-10-15T22:27:10.665Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/WindowEventHandlers": { - "modified": "2020-10-15T22:27:07.947Z", - "contributors": [ - "Wind1808" - ] - }, - "Web/API/WindowEventHandlers/onrejectionhandled": { - "modified": "2020-10-15T22:27:07.716Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/WindowEventHandlers/onunhandledrejection": { - "modified": "2020-10-15T22:27:10.711Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/API/WindowOrWorkerGlobalScope": { - "modified": "2019-03-23T22:11:46.691Z", - "contributors": [ - "Bzbarsky" - ] - }, - "Web/API/XMLHttpRequest": { - "modified": "2020-10-15T21:59:05.751Z", - "contributors": [ - "shkiper.d1000", - "fscholz", - "rshul", - "Jedipedia" - ] - }, - "Web/Accessibility": { - "modified": "2019-09-11T08:24:19.079Z", - "contributors": [ - "SphinxKnight", - "Decoy9697" - ] - }, - "Web/Accessibility/Understanding_WCAG": { - "modified": "2020-04-15T12:30:30.236Z" - }, - "Web/Accessibility/Understanding_WCAG/Keyboard": { - "modified": "2020-04-26T19:26:49.638Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/CSS": { - "modified": "2019-11-24T18:07:10.819Z", - "contributors": [ - "SphinxKnight", - "websunsey", - "piton13", - "yuraantonov", - "andygol", - "nazariy_mokriy", - "Tigt" - ] - }, - "Web/CSS/-moz-orient": { - "modified": "2019-03-23T22:19:30.916Z", - "contributors": [ - "teoli", - "Yaroslav_Yachmenov" - ] - }, - "Web/CSS/::before": { - "modified": "2020-10-15T22:16:01.601Z", - "contributors": [ - "khomyakdi" - ] - }, - "Web/CSS/::slotted": { - "modified": "2020-10-15T22:15:26.658Z", - "contributors": [ - "Halochkin" - ] - }, - "Web/CSS/:active": { - "modified": "2020-10-15T22:06:39.492Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/CSS/:root": { - "modified": "2019-03-23T22:26:36.649Z", - "contributors": [ - "Kamilius" - ] - }, - "Web/CSS/@font-face": { - "modified": "2020-10-15T22:15:28.137Z", - "contributors": [ - "khomyakdi" - ] - }, - "Web/CSS/@font-face/font-display": { - "modified": "2020-10-15T22:18:51.245Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/CSS/@page": { - "modified": "2020-10-15T22:33:30.409Z", - "contributors": [ - "wbamberg" - ] - }, - "Web/CSS/@page/bleed": { - "modified": "2020-10-15T22:33:30.588Z", - "contributors": [ - "pavlcc242" - ] - }, - "Web/CSS/CSS_Animations": { - "modified": "2019-03-23T22:07:59.311Z", - "contributors": [ - "AdriandeCita", - "GiorgioLviv" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout": { - "modified": "2019-03-23T22:35:53.862Z", - "contributors": [ - "jenja-pa", - "chrisdavidmills" - ] - }, - "Web/CSS/CSS_Grid_Layout": { - "modified": "2020-11-15T20:09:00.015Z", - "contributors": [ - "IgorDmytrenko", - "siroha", - "mfluehr" - ] - }, - "Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout": { - "modified": "2019-07-02T15:55:03.869Z", - "contributors": [ - "Physicist13", - "PanOrange", - "SphinxKnight", - "siroha", - "TeeZ0NE", - "AndriiLevchenko", - "Tenebries", - "ivaskonyan" - ] - }, - "Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout": { - "modified": "2019-03-18T21:22:54.589Z", - "contributors": [ - "siroha" - ] - }, - "Web/CSS/CSS_Selectors": { - "modified": "2020-08-09T11:04:08.558Z", - "contributors": [ - "i.yalovecky", - "str1k6rJP", - "pupenasan" - ] - }, - "Web/CSS/Mozilla_Extensions": { - "modified": "2020-04-22T11:02:03.644Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/CSS/animation-name": { - "modified": "2019-03-23T22:07:18.729Z", - "contributors": [ - "bsurai" - ] - }, - "Web/CSS/attr()": { - "modified": "2020-11-04T08:52:05.341Z", - "contributors": [ - "chrisdavidmills", - "deltverden", - "PretorDH" - ] - }, - "Web/CSS/backdrop-filter": { - "modified": "2020-10-15T22:07:03.435Z", - "contributors": [ - "rodzyk" - ] - }, - "Web/CSS/filter": { - "modified": "2019-03-23T22:33:18.716Z", - "contributors": [ - "Sebastianz", - "AlinaKuzmenko" - ] - }, - "Web/CSS/flex": { - "modified": "2019-03-23T22:29:11.887Z", - "contributors": [ - "piton13", - "Kamilius" - ] - }, - "Web/CSS/flex-grow": { - "modified": "2019-03-23T22:16:02.487Z", - "contributors": [ - "Ingvarr" - ] - }, - "Web/CSS/font-smooth": { - "modified": "2020-10-15T22:28:25.797Z", - "contributors": [ - "halfdead30" - ] - }, - "Web/CSS/font-weight": { - "modified": "2020-10-15T22:00:40.932Z", - "contributors": [ - "krasnovskyy", - "yuraantonov" - ] - }, - "Web/CSS/grid-template-areas": { - "modified": "2020-10-15T22:14:16.934Z", - "contributors": [ - "yulyasystem" - ] - }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:58:02.369Z", - "contributors": [ - "chrisdavidmills", - "halfdead30" - ] - }, - "Web/CSS/order": { - "modified": "2019-03-23T22:18:44.470Z", - "contributors": [ - "piton13" - ] - }, - "Web/CSS/position": { - "modified": "2019-03-23T22:08:24.528Z", - "contributors": [ - "asmforce" - ] - }, - "Web/CSS/resize": { - "modified": "2019-03-23T22:21:56.329Z", - "contributors": [ - "yuraantonov" - ] - }, - "Web/CSS/z-index": { - "modified": "2020-10-15T22:18:44.612Z", - "contributors": [ - "mr-vikster" - ] - }, - "Web/Events": { - "modified": "2019-04-30T14:15:07.936Z", - "contributors": [ - "wbamberg", - "teoli" - ] - }, - "Web/Guide": { - "modified": "2019-03-23T22:38:59.502Z", - "contributors": [ - "andrewnovsky", - "yakubiv", - "ASeegull", - "jsx" - ] - }, - "Web/Guide/HTML/Content_categories": { - "modified": "2019-03-23T22:33:28.403Z", - "contributors": [ - "ivaskonyan", - "asmforce", - "Kamilius" - ] - }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-09-12T13:23:57.191Z", - "contributors": [ - "stilio", - "oleksdiam", - "andrewnovsky", - "yakubiv", - "assanovstan" - ] - }, - "Web/HTML": { - "modified": "2020-11-03T15:06:00.529Z", - "contributors": [ - "Misha7776", - "borysl", - "SphinxKnight", - "ArturWer", - "websunsey", - "asmforce", - "mdymytrova", - "Syarol", - "yuraantonov", - "v.h.f.u" - ] - }, - "Web/HTML/Attributes": { - "modified": "2019-03-23T22:13:12.700Z", - "contributors": [ - "ASeegull" - ] - }, - "Web/HTML/Block-level_elements": { - "modified": "2019-03-23T22:08:39.521Z", - "contributors": [ - "TSpell90", - "svasyanovych", - "mdymytrova" - ] - }, - "Web/HTML/Element/input": { - "modified": "2020-10-15T22:07:49.908Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/HTML/Element/input/date": { - "modified": "2020-10-15T22:20:22.392Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/HTML/Element/input/datetime-local": { - "modified": "2020-10-15T22:07:47.957Z", - "contributors": [ - "serge3ling" - ] - }, - "Web/HTML/Inline_elements": { - "modified": "2020-06-17T07:00:18.779Z", - "contributors": [ - "skravche", - "mdymytrova" - ] - }, - "Web/HTTP": { - "modified": "2019-10-07T17:34:30.130Z", - "contributors": [ - "vitaliyviznyuk", - "chrisdavidmills" - ] - }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2019-03-18T21:18:28.142Z", - "contributors": [ - "ExE-Boss" - ] - }, - "Web/HTTP/Basics_of_HTTP/MIME_types": { - "modified": "2019-03-18T21:18:31.030Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/CORS": { - "modified": "2020-11-18T11:19:20.368Z", - "contributors": [ - "Standman", - "aleks-maz2", - "tpostolyuk", - "asmforce", - "ihor", - "NightLancerX", - "cloudgnome" - ] - }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T21:56:25.415Z", - "contributors": [ - "pupenasan", - "tbunyk", - "vmudrij", - "fscholz" - ] - }, - "Web/HTTP/Methods/GET": { - "modified": "2020-10-15T22:13:22.650Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Methods/POST": { - "modified": "2020-10-15T22:13:34.113Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Methods/PUT": { - "modified": "2020-10-15T21:56:25.081Z", - "contributors": [ - "maxpolski" - ] - }, - "Web/HTTP/Session": { - "modified": "2020-02-23T16:48:23.584Z", - "contributors": [ - "Soleksandr", - "CODER591" - ] - }, - "Web/HTTP/Status": { - "modified": "2019-03-23T22:02:50.749Z", - "contributors": [ - "mgold" - ] - }, - "Web/HTTP/Status/100": { - "modified": "2020-10-15T21:58:47.443Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/101": { - "modified": "2019-03-23T22:02:50.381Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T21:59:01.236Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/201": { - "modified": "2020-10-15T21:59:00.706Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/203": { - "modified": "2020-08-04T15:18:22.666Z", - "contributors": [ - "HA3IK" - ] - }, - "Web/HTTP/Status/204": { - "modified": "2020-10-15T21:59:02.176Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/206": { - "modified": "2020-10-15T21:58:53.096Z", - "contributors": [ - "bogdanBrizh" - ] - }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:05:27.847Z", - "contributors": [ - "if-alice", - "dzamlo", - "AdriandeCita" - ] - }, - "Web/HTTP/Status/422": { - "modified": "2019-03-18T21:31:19.628Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/HTTP/Заголовки/Accept": { - "modified": "2019-03-18T21:11:57.961Z", - "contributors": [ - "liwc0329" - ] - }, - "Web/JavaScript": { - "modified": "2020-06-03T04:55:28.354Z", - "contributors": [ - "ort", - "SphinxKnight", - "Yarko", - "ViktorGopanchuk", - "AdriandeCita", - "juliyvchirkov", - "asmforce", - "kdex", - "ivovchak", - "PavloEleva", - "yuraantonov", - "Sviat", - "braggae", - "Moweinik", - "Chadwick", - "bagrinovsky", - "illia-v", - "CosmicBoris" - ] - }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-11-11T16:05:50.263Z", - "contributors": [ - "mariia.soloviova", - "maksym.danylchak", - "ukhan", - "rapackivi", - "Andriy477", - "DariaManko", - "igordu4enko", - "yuraantonov" - ] - }, - "Web/JavaScript/About_JavaScript": { - "modified": "2020-04-29T16:50:28.524Z", - "contributors": [ - "smartitgang" - ] - }, - "Web/JavaScript/Closures": { - "modified": "2020-09-02T15:55:18.130Z", - "contributors": [ - "warsambin", - "AndriiLevchenko", - "HelgeUa", - "AlexKutkanych", - "jen9", - "litashg", - "koshandor", - "piton13" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-03-12T19:46:40.226Z", - "contributors": [ - "NewRoman", - "asmforce", - "ASeegull" - ] - }, - "Web/JavaScript/Enumerability_and_ownership_of_properties": { - "modified": "2020-06-25T13:14:10.679Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/EventLoop": { - "modified": "2020-04-16T07:06:13.099Z", - "contributors": [ - "yarsky-tgz", - "DariaManko", - "StepanNaryshkov", - "Kelebor", - "YevheniiGurinets", - "piton13" - ] - }, - "Web/JavaScript/Guide": { - "modified": "2020-04-15T09:42:21.965Z", - "contributors": [ - "pupenasan", - "AdriandeCita", - "PavloEleva", - "OlexandrIlchenko", - "asmforce", - "p-boiko", - "imrock", - "x2357" - ] - }, - "Web/JavaScript/Guide/Control_flow_and_error_handling": { - "modified": "2020-09-07T22:14:00.956Z", - "contributors": [ - "pryshlyak", - "AdriandeCita", - "pupenasan", - "calisto", - "DariaManko" - ] - }, - "Web/JavaScript/Guide/Functions": { - "modified": "2020-03-12T19:47:17.480Z", - "contributors": [ - "DariaManko", - "vofkalviv", - "asmforce", - "AlexViki" - ] - }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-09-05T21:14:16.620Z", - "contributors": [ - "pryshlyak", - "DariaManko", - "vera-design", - "yarsky-tgz", - "pupenasan", - "PavloEleva", - "olegsava", - "s5t8e9r1n", - "oleksii-lyzun", - "OlexandrIlchenko", - "ivaskonyan", - "OlkaA", - "yuraantonov", - "Andriy-K" - ] - }, - "Web/JavaScript/Guide/Indexed_collections": { - "modified": "2020-04-14T07:35:35.424Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/JavaScript/Guide/Introduction": { - "modified": "2020-03-12T19:43:11.836Z", - "contributors": [ - "PavloEleva", - "asmforce", - "OlexandrIlchenko", - "OlkaA", - "yuraantonov" - ] - }, - "Web/JavaScript/Guide/Iterators_and_Generators": { - "modified": "2020-03-12T19:49:49.889Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Guide/Loops_and_iteration": { - "modified": "2020-11-07T08:30:16.850Z", - "contributors": [ - "AlexShcherbak", - "pryshlyak", - "HA3IK", - "khomyakdi" - ] - }, - "Web/JavaScript/Guide/Numbers_and_dates": { - "modified": "2020-10-02T11:06:25.527Z", - "contributors": [ - "DariaManko", - "sergey-donchenko" - ] - }, - "Web/JavaScript/Guide/Regular_Expressions": { - "modified": "2020-09-02T03:49:53.019Z", - "contributors": [ - "kyselberg", - "cloudgnome", - "OlkaA", - "oldhermit", - "matrixb0ss", - "andygol" - ] - }, - "Web/JavaScript/Guide/Using_promises": { - "modified": "2020-06-26T11:23:29.489Z", - "contributors": [ - "DariaManko", - "AVorona" - ] - }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2020-06-23T13:21:35.238Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-03-12T19:46:05.953Z", - "contributors": [ - "baronkoko", - "ihor91", - "IgorRusso", - "gumanista", - "Syarol", - "AndriySand", - "vlisivka" - ] - }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:49:23.133Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:43:18.294Z", - "contributors": [ - "Zim", - "PavloEleva", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-10-15T21:46:20.161Z", - "contributors": [ - "DariaManko", - "codermeister", - "semivori", - "Drastic", - "onestep_ua", - "cloudgnome", - "Artem2011", - "vorooll", - "tjs", - "bsurai", - "georgelviv", - "rv170" - ] - }, - "Web/JavaScript/Reference/Classes/constructor": { - "modified": "2020-10-15T21:48:44.453Z", - "contributors": [ - "asmforce", - "xduocore" - ] - }, - "Web/JavaScript/Reference/Classes/extends": { - "modified": "2020-10-15T22:23:38.731Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T22:06:38.111Z", - "contributors": [ - "DariaManko", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-12T19:49:45.108Z", - "contributors": [ - "sanjula40" - ] - }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { - "modified": "2020-03-12T19:49:51.031Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:46:41.956Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Errors/Cant_delete": { - "modified": "2020-03-12T19:49:33.402Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": { - "modified": "2020-09-17T11:40:19.684Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { - "modified": "2020-06-05T10:46:57.459Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Errors/JSON_bad_parse": { - "modified": "2020-03-12T19:46:40.002Z", - "contributors": [ - "asmforce" - ] - }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:46:49.569Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/JavaScript/Reference/Errors/Negative_repetition_count": { - "modified": "2020-04-07T06:26:25.252Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_constructor": { - "modified": "2020-03-12T19:46:49.449Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_function": { - "modified": "2020-03-12T19:46:47.015Z", - "contributors": [ - "DariaManko", - "ivaskonyan" - ] - }, - "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { - "modified": "2020-04-07T06:32:35.169Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-03-12T19:43:16.654Z", - "contributors": [ - "heyiamvika", - "piton13", - "yuraantonov" - ] - }, - "Web/JavaScript/Reference/Functions/Method_definitions": { - "modified": "2020-10-15T22:22:59.471Z", - "contributors": [ - "bohdan009", - "cypper" - ] - }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-03-12T19:45:21.408Z", - "contributors": [ - "asmforce", - "piton13" - ] - }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T22:22:13.058Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T22:21:42.153Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T22:30:50.335Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-10-15T21:55:44.676Z", - "contributors": [ - "DariaManko", - "codermeister", - "trofima" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:43:13.900Z", - "contributors": [ - "DariaManko", - "asmforce", - "piton13", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:44:07.663Z", - "contributors": [ - "DariaManko", - "cloudgnome", - "SergTanchenko", - "oleksii-lyzun", - "vitaliy-patsay", - "justlp", - "Mycolaos", - "VFedyk", - "sassha96", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T22:21:28.799Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-11-06T12:10:55.577Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-11-06T13:24:33.198Z", - "contributors": [ - "DariaManko", - "valentinotm" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/Array": { - "modified": "2020-10-15T22:24:25.182Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T22:11:52.266Z", - "contributors": [ - "kyselberg", - "dzyubin", - "roman-lemko", - "mdresvyankin" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-15T22:21:06.293Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:49:32.206Z", - "contributors": [ - "DariaManko", - "OlexandrIlchenko", - "piton13", - "Sviat" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T22:20:41.269Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T22:20:45.075Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:55:26.738Z", - "contributors": [ - "DariaManko", - "asmforce", - "znata" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T22:20:43.957Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T21:51:40.421Z", - "contributors": [ - "DariaManko", - "asmforce", - "osevastianovych", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:51:43.532Z", - "contributors": [ - "Alikont", - "DariaManko", - "asmforce", - "Careless_angel", - "RuslanaGRA", - "braggae" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T22:20:44.686Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-10-15T22:07:16.823Z", - "contributors": [ - "DariaManko", - "vitaliy-patsay" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-10-15T22:20:49.502Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:57:15.409Z", - "contributors": [ - "Booreviy", - "DariaManko", - "asmforce", - "f0rza", - "topvova" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T22:18:04.600Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:47:41.782Z", - "contributors": [ - "DariaManko", - "asmforce", - "Kamilius" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T22:00:18.552Z", - "contributors": [ - "DariaManko", - "Halochkin", - "AlexKutkanych" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:51:45.816Z", - "contributors": [ - "DariaManko", - "asmforce", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T22:04:40.402Z", - "contributors": [ - "DariaManko", - "Ketler13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:59:29.757Z", - "contributors": [ - "DariaManko", - "asmforce", - "lpovhan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T22:21:04.677Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:48:44.451Z", - "contributors": [ - "DariaManko", - "vitaliy-patsay", - "piton13", - "VFedyk" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:44:04.937Z", - "contributors": [ - "DariaManko", - "jenja-pa", - "no-riders", - "artemyavorskyi", - "AlinaDigtyar", - "piton13", - "probil", - "trofima", - "Kiwka" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T22:18:07.148Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:46:49.395Z", - "contributors": [ - "DariaManko", - "vitaliy-patsay", - "nesteant", - "makk" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T22:20:55.331Z", - "contributors": [ - "Dariaki" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:59:56.203Z", - "contributors": [ - "DariaManko", - "asmforce", - "AlexKutkanych" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2019-07-19T09:10:36.597Z", - "contributors": [ - "CODER591", - "corecode1", - "NataliiaBidak", - "jwhitlock" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T22:21:10.798Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T22:21:02.917Z", - "contributors": [ - "Makrosss", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T22:20:53.972Z", - "contributors": [ - "zarichniuk", - "AndriySikora", - "Dariaki" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:46:48.950Z", - "contributors": [ - "DariaManko", - "MegOBonus", - "vtytar" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T22:21:26.674Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/toSource": { - "modified": "2020-10-15T21:52:38.278Z", - "contributors": [ - "DariaManko", - "teoli", - "ilya_zinkevych" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T22:21:27.437Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:46:28.308Z", - "contributors": [ - "DariaManko", - "Kamilius", - "ValkoVolodya" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T22:21:28.809Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T22:26:04.988Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt": { - "modified": "2020-10-15T22:32:52.326Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { - "modified": "2020-10-15T22:32:56.837Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/asIntN": { - "modified": "2020-10-15T22:32:50.861Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/asUintN": { - "modified": "2020-10-15T22:32:48.866Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString": { - "modified": "2020-10-15T22:32:53.412Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/toString": { - "modified": "2020-10-15T22:33:00.537Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/BigInt/valueOf": { - "modified": "2020-10-15T22:33:00.448Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:00:35.597Z", - "contributors": [ - "DariaManko", - "AdriandeCita", - "voleger" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { - "modified": "2020-10-15T22:31:11.369Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { - "modified": "2020-10-15T22:06:15.795Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T22:06:14.339Z", - "contributors": [ - "asmforce", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T22:06:15.623Z", - "contributors": [ - "asmforce", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:54:17.005Z", - "contributors": [ - "DariaManko", - "asmforce", - "bsurai" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { - "modified": "2020-10-15T22:34:16.846Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/Date": { - "modified": "2020-10-15T22:33:09.659Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:55:32.389Z", - "contributors": [ - "vtlk", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getDate": { - "modified": "2020-10-15T22:33:32.244Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T22:33:30.885Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T22:33:32.970Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T22:33:33.939Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T22:33:34.391Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T22:33:30.118Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T22:33:32.493Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T22:33:32.834Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2020-10-15T22:33:06.066Z", - "contributors": [ - "DariaManko", - "wmir1" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2020-10-15T22:33:36.543Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2020-10-15T22:33:36.430Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2020-10-15T22:33:46.597Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2020-10-15T22:33:46.740Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2020-10-15T22:33:46.458Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2020-10-15T21:58:14.206Z", - "contributors": [ - "DariaManko", - "asmforce", - "vlisivka" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2020-10-15T22:33:46.632Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2020-10-15T22:33:51.002Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2020-10-15T21:58:15.459Z", - "contributors": [ - "DariaManko", - "asmforce", - "vlisivka" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getYear": { - "modified": "2020-10-15T22:33:51.203Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-10-15T21:59:10.202Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2020-10-15T22:33:26.613Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2020-10-15T22:33:51.277Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2020-10-15T22:33:52.358Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2020-10-15T22:33:55.337Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2020-10-15T22:33:55.964Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2020-10-15T22:33:53.485Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2020-10-15T22:33:55.824Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2020-10-15T22:33:54.159Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2020-10-15T22:02:19.023Z", - "contributors": [ - "DariaManko", - "venoel" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2020-10-15T22:33:57.022Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2020-10-15T22:33:54.452Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2020-10-15T22:33:55.683Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2020-10-15T22:33:54.746Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2020-10-15T22:34:08.861Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2020-10-15T22:34:08.751Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2020-10-15T22:34:08.803Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setYear": { - "modified": "2020-10-15T22:34:08.715Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T22:34:09.938Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { - "modified": "2020-10-15T22:34:11.176Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T22:34:12.473Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T21:59:03.905Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { - "modified": "2020-10-15T22:34:16.411Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { - "modified": "2020-10-15T22:34:15.625Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { - "modified": "2020-10-15T22:34:18.542Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toSource": { - "modified": "2020-10-15T22:34:17.093Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T22:34:16.430Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { - "modified": "2020-10-15T22:34:17.339Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { - "modified": "2020-10-15T22:34:18.309Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T22:34:17.554Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T22:18:17.492Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/Error": { - "modified": "2020-10-15T22:26:54.007Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/Stack": { - "modified": "2020-10-15T22:18:38.036Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { - "modified": "2020-10-15T22:18:26.665Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/fileName": { - "modified": "2020-10-15T22:18:27.302Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { - "modified": "2020-10-15T22:18:34.627Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/message": { - "modified": "2020-10-15T22:18:28.003Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2020-10-15T22:18:30.331Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/toSource": { - "modified": "2020-10-15T22:18:40.791Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/toString": { - "modified": "2020-10-15T22:18:40.852Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T22:18:17.805Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:45:49.819Z", - "contributors": [ - "DariaManko", - "yulyasystem", - "IgorRusso", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:51:58.384Z", - "contributors": [ - "DariaManko", - "Wsewlad", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:21:36.643Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:51:58.237Z", - "contributors": [ - "DariaManko", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:51:57.522Z", - "contributors": [ - "Halochkin", - "asmforce", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/caller": { - "modified": "2020-10-15T22:21:36.014Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/displayName": { - "modified": "2020-10-15T22:21:37.728Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T22:21:35.840Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2020-10-15T21:45:43.885Z", - "contributors": [ - "DariaManko", - "MyrosiaPabyrivska", - "Kelebor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/toSource": { - "modified": "2020-10-15T22:21:38.211Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/toString": { - "modified": "2020-10-15T22:21:40.341Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2020-10-15T22:25:29.601Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2020-10-15T22:25:35.087Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2020-10-15T22:25:34.711Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2020-10-15T22:25:32.571Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T22:25:29.479Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T22:21:06.954Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2020-10-15T22:18:24.342Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:49:10.555Z", - "contributors": [ - "AdriandeCita", - "Ende93" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:58:38.006Z", - "contributors": [ - "asmforce", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-15T21:49:11.837Z", - "contributors": [ - "AdriandeCita", - "asmforce", - "olehsrh", - "linevich", - "tbunyk" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:00:35.312Z", - "contributors": [ - "DariaManko", - "AlinaKuzmenko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:47:19.666Z", - "contributors": [ - "AdriandeCita", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2020-10-15T22:04:53.161Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2020-10-15T22:04:52.017Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2020-10-15T22:04:59.522Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2020-10-15T22:05:01.502Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2020-10-15T22:05:03.872Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2020-10-15T22:05:01.546Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2020-10-15T22:05:03.531Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2020-10-15T22:05:03.380Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/abs": { - "modified": "2020-10-15T21:57:51.340Z", - "contributors": [ - "AdriandeCita", - "artemyavorskyi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2020-10-15T21:47:15.506Z", - "contributors": [ - "AdriandeCita", - "artemyavorskyi", - "6pm" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/acosh": { - "modified": "2020-10-15T22:05:05.445Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/asin": { - "modified": "2020-10-15T22:05:17.868Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/asinh": { - "modified": "2020-10-15T22:05:17.657Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/atan": { - "modified": "2020-10-15T22:05:20.800Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/atan2": { - "modified": "2020-10-15T22:05:23.030Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/atanh": { - "modified": "2020-10-15T22:05:23.444Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2020-10-15T22:05:21.844Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2020-10-15T21:57:51.171Z", - "contributors": [ - "AdriandeCita", - "Marx64", - "artemyavorskyi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/clz32": { - "modified": "2020-10-15T22:05:23.478Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cos": { - "modified": "2020-10-15T22:05:36.192Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cosh": { - "modified": "2020-10-15T22:05:25.493Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2020-10-15T22:05:26.831Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/expm1": { - "modified": "2020-10-15T22:05:26.324Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-10-15T21:57:51.357Z", - "contributors": [ - "AdriandeCita", - "Ingvarr", - "artemyavorskyi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2020-10-15T22:05:36.249Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/hypot": { - "modified": "2020-10-15T22:05:57.378Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2020-10-15T22:05:57.398Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2020-10-15T22:05:57.298Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log10": { - "modified": "2020-10-15T22:05:57.187Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log1p": { - "modified": "2020-10-15T22:05:58.645Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2020-10-15T22:05:58.319Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T22:06:01.536Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2020-10-15T22:06:03.284Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/pow": { - "modified": "2020-10-15T21:51:33.173Z", - "contributors": [ - "AdriandeCita", - "mirkinoid" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/random": { - "modified": "2020-10-15T22:06:02.891Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T22:06:04.785Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-10-15T22:06:04.350Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-10-15T22:06:08.969Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T22:06:06.700Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2020-10-15T22:06:08.496Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T22:06:11.441Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T22:06:13.191Z", - "contributors": [ - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T22:06:16.467Z", - "contributors": [ - "DariaManko", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:49:58.857Z", - "contributors": [ - "DariaManko", - "Sestri4kina", - "Natalya_Surikova" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/Object": { - "modified": "2020-10-15T22:31:07.059Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { - "modified": "2020-10-15T22:23:37.198Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__": { - "modified": "2020-10-15T22:23:51.595Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__": { - "modified": "2020-10-15T22:23:53.366Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__": { - "modified": "2020-10-15T22:23:52.620Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-11-06T12:08:17.626Z", - "contributors": [ - "DariaManko", - "D4ST1N", - "asmforce", - "GeekEdem", - "romkor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2020-10-15T21:50:15.789Z", - "contributors": [ - "DariaManko", - "pushnov-i" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2020-10-15T22:21:52.499Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { - "modified": "2020-10-15T22:22:04.382Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2020-10-15T21:51:10.162Z", - "contributors": [ - "DariaManko", - "hrds", - "MontyFelix", - "bodya17", - "romkor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:23:06.638Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T22:23:14.398Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { - "modified": "2020-10-15T22:23:15.128Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { - "modified": "2020-10-15T22:23:28.909Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors": { - "modified": "2020-10-15T22:23:28.921Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { - "modified": "2020-10-15T22:23:41.081Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols": { - "modified": "2020-12-14T07:36:53.380Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2020-10-15T22:23:37.098Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2020-10-15T22:22:51.411Z", - "contributors": [ - "DariaManko", - "raikune" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:49:57.117Z", - "contributors": [ - "DariaManko", - "asmforce", - "Sestri4kina" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2020-10-15T22:11:37.219Z", - "contributors": [ - "DariaManko", - "OksanaH" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T22:23:09.097Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { - "modified": "2020-10-15T22:23:54.536Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { - "modified": "2020-10-15T22:23:38.776Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/keys": { - "modified": "2020-10-15T21:54:19.509Z", - "contributors": [ - "DariaManko", - "asmforce", - "sblano4ka", - "bsurai" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { - "modified": "2020-10-15T22:11:39.127Z", - "contributors": [ - "DariaManko", - "OksanaH" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { - "modified": "2020-10-15T22:24:06.184Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/proto": { - "modified": "2020-11-06T10:35:54.418Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/seal": { - "modified": "2020-10-15T22:23:07.912Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { - "modified": "2020-10-15T22:24:05.481Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { - "modified": "2020-10-15T22:23:54.914Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toSource": { - "modified": "2020-10-15T22:23:07.718Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2020-10-15T22:23:06.682Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T22:22:51.902Z", - "contributors": [ - "DariaManko", - "cypper" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T21:57:15.215Z", - "contributors": [ - "DariaManko", - "webgrandmo", - "vityas-off", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:51:58.522Z", - "contributors": [ - "DariaManko", - "ihor", - "matrixb0ss", - "nemishkor", - "riwnodennyk", - "tickoner", - "oldhermit", - "AlinaKuzmenko", - "bsurai", - "kdex" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { - "modified": "2020-10-15T22:26:57.715Z", - "contributors": [ - "michael_v92", - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T22:26:21.523Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { - "modified": "2020-10-15T22:26:24.738Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/any": { - "modified": "2020-10-15T22:26:27.043Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/catch": { - "modified": "2020-10-15T22:26:27.465Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:26:32.438Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T22:03:35.608Z", - "contributors": [ - "DariaManko", - "77bo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { - "modified": "2020-10-15T21:52:00.237Z", - "contributors": [ - "DariaManko", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2020-10-15T22:26:45.798Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy": { - "modified": "2020-10-15T21:59:11.773Z", - "contributors": [ - "outOFFspace", - "yuraantonov" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2020-10-15T22:18:00.589Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ReferenceError": { - "modified": "2020-10-15T22:18:21.096Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T22:24:05.788Z", - "contributors": [ - "sergey-donchenko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-11-28T10:34:14.430Z", - "contributors": [ - "Сaсtus", - "dzyubin", - "dude78GH", - "GeekEdem", - "arai" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { - "modified": "2019-03-23T22:33:14.953Z", - "contributors": [ - "muhus", - "bodya17" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/source": { - "modified": "2019-03-23T22:12:09.132Z", - "contributors": [ - "asmforce", - "Stand1k" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2019-03-23T22:19:27.486Z", - "contributors": [ - "VKorotynskyy", - "Asfades" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-10-15T22:00:32.970Z", - "contributors": [ - "AlinaKuzmenko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:56:07.475Z", - "contributors": [ - "DariaManko", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/@@iterator": { - "modified": "2020-10-15T22:25:28.702Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/String": { - "modified": "2020-10-15T22:29:44.605Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T22:29:38.186Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/anchor": { - "modified": "2020-10-15T22:04:54.630Z", - "contributors": [ - "DariaManko", - "RomanGorbatko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/big": { - "modified": "2020-10-15T22:28:11.786Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/blink": { - "modified": "2020-10-15T22:28:13.942Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/bold": { - "modified": "2020-10-15T22:28:12.393Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2020-10-15T22:01:04.977Z", - "contributors": [ - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { - "modified": "2020-10-15T22:28:16.125Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/codePointAt": { - "modified": "2020-10-15T22:28:18.063Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2020-12-10T06:08:16.543Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2020-10-15T22:28:23.429Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fixed": { - "modified": "2020-10-15T22:28:22.062Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fontcolor": { - "modified": "2020-10-15T22:28:22.218Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fontsize": { - "modified": "2020-10-15T22:28:23.001Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2020-10-15T21:56:05.220Z", - "contributors": [ - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { - "modified": "2020-10-15T21:56:12.223Z", - "contributors": [ - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T22:01:56.179Z", - "contributors": [ - "DariaManko", - "ihor", - "ValeriiBoiko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2020-10-15T21:56:02.222Z", - "contributors": [ - "DariaManko", - "Halochkin", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/italics": { - "modified": "2020-10-15T22:28:26.713Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2020-10-15T21:56:07.102Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2020-10-15T21:56:01.809Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/link": { - "modified": "2020-10-15T22:28:29.381Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { - "modified": "2020-10-15T21:56:20.503Z", - "contributors": [ - "DariaManko", - "wolfter12", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-10-15T22:00:25.876Z", - "contributors": [ - "DariaManko", - "asmforce", - "AlexViki" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/matchAll": { - "modified": "2020-11-05T08:04:26.515Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/normalize": { - "modified": "2020-10-15T22:28:40.761Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/padEnd": { - "modified": "2020-10-15T22:28:57.018Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/padStart": { - "modified": "2020-10-15T22:28:57.062Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/raw": { - "modified": "2020-10-15T22:29:43.457Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T22:28:59.311Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2020-10-15T22:28:58.669Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/replaceAll": { - "modified": "2020-10-15T22:30:27.525Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/search": { - "modified": "2020-10-15T21:56:06.199Z", - "contributors": [ - "asmforce", - "GeekEdem" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2020-10-15T22:29:04.397Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/small": { - "modified": "2020-10-15T22:29:06.041Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T22:29:12.669Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2020-10-15T22:29:16.419Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/strike": { - "modified": "2020-10-15T22:29:16.714Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/sub": { - "modified": "2020-10-15T22:29:18.653Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2020-10-15T22:29:17.310Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-10-15T22:29:17.717Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/sup": { - "modified": "2020-10-15T22:29:18.346Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase": { - "modified": "2020-10-15T21:56:18.245Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase": { - "modified": "2020-10-15T21:56:17.147Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-10-15T21:56:07.213Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toSource": { - "modified": "2020-10-15T22:29:39.458Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toString": { - "modified": "2020-10-15T21:56:12.218Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2020-10-15T21:56:06.893Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/trimEnd": { - "modified": "2020-10-15T22:29:38.073Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/trimStart": { - "modified": "2020-10-15T22:29:39.593Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/valueOf": { - "modified": "2020-10-15T21:56:02.146Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2019-12-10T11:06:17.296Z", - "contributors": [ - "DariaManko", - "SphinxKnight" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive": { - "modified": "2020-12-10T06:25:13.907Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/Symbol": { - "modified": "2020-10-15T22:34:58.607Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator": { - "modified": "2020-11-04T12:49:38.598Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/description": { - "modified": "2020-11-05T08:18:28.051Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/for": { - "modified": "2020-12-10T05:07:08.237Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { - "modified": "2020-11-05T05:31:05.308Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable": { - "modified": "2020-11-05T06:43:29.775Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { - "modified": "2020-11-05T06:45:25.397Z", - "contributors": [ - "DariaManko", - "trofima" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/keyFor": { - "modified": "2020-12-10T05:15:20.527Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/match": { - "modified": "2020-11-05T07:44:56.491Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/matchAll": { - "modified": "2020-11-05T08:02:26.392Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/replace": { - "modified": "2020-11-05T08:27:00.186Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/search": { - "modified": "2020-11-05T08:31:56.138Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/species": { - "modified": "2020-11-05T12:22:32.364Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/split": { - "modified": "2020-11-05T13:49:56.234Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive": { - "modified": "2020-11-06T06:06:07.669Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toSource": { - "modified": "2020-12-10T05:20:28.551Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toString": { - "modified": "2020-12-10T06:14:46.283Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag": { - "modified": "2020-11-06T10:48:12.862Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/unscopables": { - "modified": "2020-11-06T13:19:22.773Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol/valueOf": { - "modified": "2020-12-10T06:20:38.213Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:58:40.674Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T22:18:20.714Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/URIError": { - "modified": "2020-10-15T22:18:21.321Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-10-15T22:23:55.707Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:25:43.168Z", - "contributors": [ - "sergey-donchenko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T22:32:19.379Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T22:01:27.765Z", - "contributors": [ - "MykolaCompany", - "mrbloom" - ] - }, - "Web/JavaScript/Reference/Global_Objects/null": { - "modified": "2020-10-15T21:57:19.315Z", - "contributors": [ - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T22:32:23.918Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-10-15T22:25:16.463Z", - "contributors": [ - "DariaManko", - "bandvov" - ] - }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:58:17.542Z", - "contributors": [ - "cybalex", - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Global_Objects/uneval": { - "modified": "2020-10-15T22:23:55.765Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T22:30:14.109Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-06-12T11:53:00.624Z", - "contributors": [ - "DariaManko", - "Arous" - ] - }, - "Web/JavaScript/Reference/Operators/Addition": { - "modified": "2020-10-15T22:30:35.486Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Addition_assignment": { - "modified": "2020-10-15T22:31:12.087Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Assignment": { - "modified": "2020-10-15T22:31:11.201Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_AND": { - "modified": "2020-10-15T22:31:11.617Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_AND_assignment": { - "modified": "2020-10-15T22:31:12.449Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_NOT": { - "modified": "2020-10-15T22:31:11.334Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_OR": { - "modified": "2020-10-15T22:31:16.176Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_OR_assignment": { - "modified": "2020-10-15T22:31:18.458Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_XOR": { - "modified": "2020-10-15T22:31:14.931Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment": { - "modified": "2020-10-15T22:31:16.446Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T22:25:09.905Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T22:21:39.670Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Decrement": { - "modified": "2020-10-15T22:30:53.701Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Division": { - "modified": "2020-10-15T22:30:45.220Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Division_assignment": { - "modified": "2020-10-15T22:31:15.460Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Equality": { - "modified": "2020-10-15T22:30:56.047Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Exponentiation": { - "modified": "2020-10-15T22:30:44.774Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Exponentiation_assignment": { - "modified": "2020-10-15T22:31:17.221Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Greater_than": { - "modified": "2020-10-15T22:31:08.469Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Greater_than_or_equal": { - "modified": "2020-10-15T22:31:08.843Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T22:24:50.764Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Increment": { - "modified": "2020-10-15T22:30:43.753Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Inequality": { - "modified": "2020-10-15T22:31:01.817Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Left_shift": { - "modified": "2020-10-15T22:31:53.975Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Left_shift_assignment": { - "modified": "2020-10-15T22:31:18.033Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Less_than": { - "modified": "2020-10-15T22:31:08.640Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Less_than_or_equal": { - "modified": "2020-10-15T22:31:09.975Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Logical_AND": { - "modified": "2020-10-15T22:31:17.185Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Logical_NOT": { - "modified": "2020-10-15T22:31:22.627Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Logical_OR": { - "modified": "2020-10-15T22:31:23.119Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Multiplication": { - "modified": "2020-10-15T22:30:49.518Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Multiplication_assignment": { - "modified": "2020-10-15T22:31:19.932Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { - "modified": "2020-10-15T22:25:09.777Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Operator_Precedence": { - "modified": "2020-03-12T19:49:40.789Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Optional_chaining": { - "modified": "2020-10-15T22:23:41.986Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Pipeline_operator": { - "modified": "2020-10-15T22:25:08.992Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T22:24:55.859Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Remainder": { - "modified": "2020-10-15T22:30:44.446Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Remainder_assignment": { - "modified": "2020-10-15T22:31:21.443Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Right_shift": { - "modified": "2020-10-15T22:31:53.028Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Right_shift_assignment": { - "modified": "2020-10-15T22:31:52.891Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-10-15T22:25:14.735Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Strict_equality": { - "modified": "2020-10-15T22:31:00.404Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Strict_inequality": { - "modified": "2020-10-15T22:30:56.621Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Subtraction": { - "modified": "2020-10-15T22:30:44.115Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Subtraction_assignment": { - "modified": "2020-10-15T22:31:19.037Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Unary_negation": { - "modified": "2020-10-15T22:30:46.482Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Unary_plus": { - "modified": "2020-10-15T22:30:52.268Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Unsigned_right_shift": { - "modified": "2020-10-15T22:31:54.556Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment": { - "modified": "2020-10-15T22:32:00.422Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/async_function": { - "modified": "2020-10-15T22:26:04.754Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-10-15T22:05:00.462Z", - "contributors": [ - "DariaManko", - "baronkoko" - ] - }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-10-15T22:23:32.805Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T22:24:36.785Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-10-15T22:25:14.130Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T22:25:34.849Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-10-15T21:54:02.648Z", - "contributors": [ - "DariaManko", - "RuslanaGRA" - ] - }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T22:25:04.957Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T22:23:19.737Z", - "contributors": [ - "DariaManko", - "heyiamvika" - ] - }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T22:25:44.226Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T22:25:37.949Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T22:24:51.132Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-10-15T22:21:46.964Z", - "contributors": [ - "DariaManko", - "MargaritaKotsik" - ] - }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T22:24:58.425Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-10-15T22:25:34.911Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T22:25:33.565Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-10-15T21:49:08.697Z", - "contributors": [ - "DariaManko", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-10-15T22:22:15.796Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-10-15T22:26:08.242Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-10-15T22:22:16.357Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-10-15T22:22:15.768Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-10-15T22:22:33.648Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-03-12T19:44:32.913Z", - "contributors": [ - "vmdrot" - ] - }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T22:22:16.363Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T22:22:36.514Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-10-15T22:22:14.530Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-15T22:23:12.547Z", - "contributors": [ - "raikune" - ] - }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-10-15T22:21:39.294Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/for-await...of": { - "modified": "2020-10-15T22:30:28.358Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-10-15T22:22:07.167Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-10-15T22:22:16.358Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/function": { - "modified": "2020-10-15T22:24:06.831Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T22:25:35.364Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T22:20:34.938Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-10-15T22:22:14.825Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-10-15T22:22:16.396Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-10-15T22:22:31.214Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T22:30:28.292Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-10-15T22:18:55.607Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-10-15T22:18:59.211Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-10-15T22:03:49.456Z", - "contributors": [ - "DariaManko", - "asmforce", - "OlexandrIlchenko" - ] - }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-10-15T22:22:13.961Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Statements/with": { - "modified": "2020-11-06T12:49:39.750Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-03-12T19:45:32.269Z", - "contributors": [ - "DariaManko", - "Drastic", - "asmforce" - ] - }, - "Web/JavaScript/Reference/Template_literals": { - "modified": "2020-10-15T22:30:04.000Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Trailing_commas": { - "modified": "2020-10-15T22:30:59.419Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/Progressive_web_apps": { - "modified": "2019-03-23T22:00:18.455Z", - "contributors": [ - "chrisdavidmills", - "asmforce" - ] - }, - "Web/Reference": { - "modified": "2019-03-23T22:25:53.790Z", - "contributors": [ - "andrealeone" - ] - }, - "Web/XML": { - "modified": "2019-03-25T03:50:12.335Z" - }, - "Web/XML/XML_introduction": { - "modified": "2020-05-14T13:15:54.898Z", - "contributors": [ - "CODER591", - "boxa6" - ] - }, - "Web/XSLT": { - "modified": "2019-03-23T22:01:40.519Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Glossary/Block/Scripting": { - "modified": "2019-10-07T11:02:21.315Z", - "contributors": [ - "Pavlechko" - ] - }, - "Glossary/Abstraction": { - "modified": "2019-03-23T22:30:29.962Z", - "contributors": [ - "asmforce", - "Kamilius" - ] - }, - "Glossary/Algorithm": { - "modified": "2019-03-23T22:30:35.419Z", - "contributors": [ - "asmforce", - "Kamilius" - ] - }, - "Glossary/Argument": { - "modified": "2019-03-23T22:04:22.695Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/buffer": { - "modified": "2019-03-23T22:07:54.933Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Accessibility": { - "modified": "2019-05-04T18:59:21.286Z", - "contributors": [ - "ArtemLashmanov", - "Kamilius" - ] - }, - "Glossary/Viewport": { - "modified": "2019-03-23T22:08:34.368Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Decryption": { - "modified": "2019-09-16T13:32:33.238Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Dynamic_programming_language": { - "modified": "2019-03-18T21:43:52.488Z", - "contributors": [ - "bdvorianov" - ] - }, - "Glossary/UX": { - "modified": "2019-03-18T21:34:51.796Z", - "contributors": [ - "SKaznadei" - ] - }, - "Glossary/Closure": { - "modified": "2019-03-23T22:04:17.938Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Variable": { - "modified": "2019-03-23T22:09:07.757Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Value": { - "modified": "2019-03-23T22:09:28.718Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Identifier": { - "modified": "2019-03-23T22:11:07.008Z", - "contributors": [ - "asmforce", - "yuraantonov" - ] - }, - "Glossary/Statement": { - "modified": "2019-10-08T03:15:04.893Z", - "contributors": [ - "Pavlechko" - ] - }, - "Glossary/Internet": { - "modified": "2019-03-23T22:08:20.008Z", - "contributors": [ - "SKaznadei", - "asmforce" - ] - }, - "Glossary/Compile": { - "modified": "2019-03-18T21:35:41.310Z", - "contributors": [ - "Abalmazik" - ] - }, - "Glossary/Cryptanalysis": { - "modified": "2019-09-10T14:27:53.120Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Cryptographic_hash_function": { - "modified": "2019-09-18T10:42:51.504Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Cryptography": { - "modified": "2019-09-10T13:13:46.945Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Method": { - "modified": "2019-07-18T12:27:02.669Z", - "contributors": [ - "DariaManko", - "asmforce", - "Kamilius" - ] - }, - "Glossary/Wrapper": { - "modified": "2019-03-23T22:08:15.564Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/OOP": { - "modified": "2019-05-16T18:01:52.440Z", - "contributors": [ - "ArtemLashmanov", - "asmforce" - ] - }, - "Glossary/Operator": { - "modified": "2019-03-18T21:44:09.880Z", - "contributors": [ - "bdvorianov" - ] - }, - "Glossary/Hyperlink": { - "modified": "2019-03-18T21:34:47.720Z", - "contributors": [ - "SKaznadei" - ] - }, - "Glossary/Recursion": { - "modified": "2019-03-18T21:44:04.217Z", - "contributors": [ - "asmforce", - "bdvorianov" - ] - }, - "Glossary/Symbol": { - "modified": "2020-12-14T08:56:37.459Z", - "contributors": [ - "DariaManko", - "raikune" - ] - }, - "Glossary/World_Wide_Web": { - "modified": "2019-03-18T20:37:36.381Z", - "contributors": [ - "romanstor", - "SKaznadei", - "asmforce" - ] - }, - "Glossary/Type": { - "modified": "2019-03-23T22:09:27.817Z", - "contributors": [ - "asmforce" - ] - }, - "Glossary/Function": { - "modified": "2019-07-01T07:43:55.787Z", - "contributors": [ - "DariaManko", - "bdvorianov" - ] - }, - "Glossary/Cipher": { - "modified": "2019-09-10T14:28:27.783Z", - "contributors": [ - "DollarPo8" - ] - }, - "Glossary/Ciphertext": { - "modified": "2019-09-12T14:19:30.255Z", - "contributors": [ - "DollarPo8" - ] - }, - "Learn/CSS/CSS_layout": { - "modified": "2020-07-25T19:25:57.955Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/CSS/First_steps/What_is_CSS": { - "modified": "2020-10-15T22:22:31.879Z", - "contributors": [ - "SergiyLuckys" - ] - }, - "Learn/CSS/Styling_text/Styling_lists": { - "modified": "2020-07-16T22:26:15.367Z", - "contributors": [ - "MykolaCompany" - ] - }, - "Learn/Getting_started_with_the_web/The_web_and_web_standards": { - "modified": "2020-07-25T20:32:44.440Z", - "contributors": [ - "nepiravno" - ] - }, - "orphaned/Learn/How_to_contribute": { - "modified": "2020-07-16T22:33:46.744Z", - "contributors": [ - "bohdan009" - ] - }, - "Learn/Forms": { - "modified": "2020-07-25T20:03:44.978Z", - "contributors": [ - "nepiravno", - "Yurii_Horbach", - "feel13good" - ] - }, - "Learn/Forms/Your_first_form": { - "modified": "2020-07-16T22:21:07.366Z", - "contributors": [ - "pelyp47" - ] - }, - "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { - "modified": "2020-07-16T22:23:25.057Z", - "contributors": [ - "ArtemLashmanov", - "websunsey" - ] - }, - "Learn/JavaScript/Asynchronous": { - "modified": "2020-07-25T19:53:57.083Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/JavaScript/Building_blocks": { - "modified": "2020-07-25T19:43:30.011Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Tools_and_testing/GitHub": { - "modified": "2020-07-25T20:26:40.197Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Tools_and_testing/Client-side_JavaScript_frameworks": { - "modified": "2020-07-25T20:53:33.045Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started": { - "modified": "2020-08-22T19:18:21.080Z", - "contributors": [ - "thedenoff" - ] - }, - "Learn/Tools_and_testing/Understanding_client-side_tools": { - "modified": "2020-07-25T20:47:10.306Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Tools_and_testing/Cross_browser_testing": { - "modified": "2020-07-25T20:16:06.008Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Accessibility": { - "modified": "2020-07-25T20:18:04.756Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Learning_and_getting_help": { - "modified": "2020-07-25T20:34:14.558Z", - "contributors": [ - "nepiravno" - ] - }, - "Learn/Front-end_web_developer": { - "modified": "2020-07-26T07:04:16.114Z", - "contributors": [ - "nepiravno" - ] - }, - "orphaned/MDN/Community": { - "modified": "2019-09-11T08:00:43.055Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "asmforce", - "yuraantonov" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-01-17T02:06:23.808Z", - "contributors": [ - "wbamberg", - "yuraantonov" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2020-09-04T18:11:30.511Z", - "contributors": [ - "borysl", - "wbamberg", - "asmforce", - "kuki" - ] - }, - "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-03-23T22:05:10.058Z", - "contributors": [ - "wbamberg", - "ivaskonyan" - ] - }, - "orphaned/MDN/Contribute/Howto/Be_a_beta_tester": { - "modified": "2019-03-18T21:45:25.216Z", - "contributors": [ - "wbamberg", - "asmforce" - ] - }, - "MDN/Contribute/Howto/Create_and_edit_pages": { - "modified": "2019-08-06T16:49:19.554Z", - "contributors": [ - "html5beginner", - "wbamberg", - "asmforce" - ] - }, - "MDN/Guidelines/Writing_style_guide": { - "modified": "2020-09-30T15:32:10.012Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "Pavlechko", - "wbamberg", - "BezZaboT", - "asmforce" - ] - }, - "MDN/Yari": { - "modified": "2019-09-09T15:54:27.754Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "asmforce" - ] - }, - "MDN/Structures/Macros": { - "modified": "2020-09-30T12:57:34.918Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce" - ] - }, - "MDN/Structures/Macros/Commonly-used_macros": { - "modified": "2020-09-30T12:57:35.379Z", - "contributors": [ - "chrisdavidmills", - "memodim.di", - "wbamberg", - "teoli", - "fscholz", - "asmforce" - ] - }, - "MDN/Tools/KumaScript/Troubleshooting": { - "modified": "2020-09-30T16:54:47.555Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "asmforce" - ] - }, - "MDN/About": { - "modified": "2019-09-09T15:23:18.385Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "asmforce", - "OlexandrIlchenko" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { - "modified": "2019-03-18T21:05:11.899Z", - "contributors": [ - "leofun01" - ] - }, - "Web/API/Page_Visibility_API": { - "modified": "2020-10-15T22:29:33.453Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": { - "modified": "2019-03-23T22:08:43.488Z", - "contributors": [ - "asmforce" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/setTimeout": { - "modified": "2019-03-23T22:25:41.478Z", - "contributors": [ - "jurkobanzaj", - "Rozelin", - "Kamilius" - ] - }, - "Web/API/Event": { - "modified": "2020-04-15T04:26:09.031Z", - "contributors": [ - "vera-design", - "yuraantonov" - ] - }, - "Web/API/Event/target": { - "modified": "2020-08-08T10:32:59.036Z", - "contributors": [ - "Vandeko1", - "curtdp", - "yuraantonov" - ] - }, - "Web/CSS/CSS_Animations/Using_CSS_animations": { - "modified": "2019-03-23T22:07:52.924Z", - "contributors": [ - "GiorgioLviv" - ] - }, - "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": { - "modified": "2019-03-23T22:08:26.711Z", - "contributors": [ - "asmforce" - ] - }, - "Web/CSS/Alternative_style_sheets": { - "modified": "2019-03-23T22:20:16.657Z", - "contributors": [ - "asmforce" - ] - }, - "Web/CSS/Reference": { - "modified": "2019-11-24T18:02:08.214Z", - "contributors": [ - "yuraantonov" - ] - }, - "Web/CSS/CSS_Box_Model": { - "modified": "2019-03-23T22:08:28.621Z", - "contributors": [ - "asmforce", - "mfluehr" - ] - }, - "Web/CSS/Visual_formatting_model": { - "modified": "2020-04-17T11:33:03.035Z", - "contributors": [ - "ablackrain", - "olegsava", - "asmforce" - ] - }, - "Web/CSS/Layout_cookbook": { - "modified": "2020-07-25T19:29:27.695Z", - "contributors": [ - "nepiravno" - ] - }, - "Web/CSS/Layout_mode": { - "modified": "2019-03-23T22:08:35.177Z", - "contributors": [ - "asmforce" - ] - }, - "Web/API/Window/DOMContentLoaded_event": { - "modified": "2019-04-30T14:16:03.506Z", - "contributors": [ - "wbamberg", - "AndriiZ", - "fscholz", - "alekseichuk", - "AlinaKuzmenko" - ] - }, - "Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2019-03-18T20:54:41.113Z", - "contributors": [ - "litashg", - "Efimenko", - "yakubiv" - ] - }, - "Web/Guide/Graphics": { - "modified": "2019-03-23T22:38:59.184Z", - "contributors": [ - "v.h.f.u" - ] - }, - "Web/HTML/Reference": { - "modified": "2019-09-09T07:23:26.420Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "asmforce", - "v.h.f.u" - ] - }, - "Web/HTML/Element/html": { - "modified": "2019-03-23T22:36:12.142Z", - "contributors": [ - "asmforce", - "yuraantonov" - ] - }, - "Web/HTML/Element/iframe": { - "modified": "2020-11-06T03:47:28.747Z", - "contributors": [ - "SphinxKnight", - "melnykvlados" - ] - }, - "Web/HTML/Element": { - "modified": "2020-04-04T20:48:11.630Z", - "contributors": [ - "Neonas", - "yuraantonov" - ] - }, - "Web/HTML/Element/link": { - "modified": "2020-10-15T22:15:13.454Z", - "contributors": [ - "AndriyDarmits" - ] - }, - "Web/HTML/Element/nav": { - "modified": "2020-10-15T21:46:13.795Z", - "contributors": [ - "bulvvkoxide", - "asmforce", - "Kamilius" - ] - }, - "Web/HTML/Element/script": { - "modified": "2020-10-15T22:25:25.196Z", - "contributors": [ - "DANICHMOMO" - ] - }, - "Web/HTML/Element/section": { - "modified": "2019-03-23T22:21:37.735Z", - "contributors": [ - "bulvvkoxide", - "yuraantonov" - ] - }, - "Web/HTML/Element/style": { - "modified": "2019-03-23T22:20:18.231Z", - "contributors": [ - "asmforce" - ] - }, - "Web/HTML/Element/table": { - "modified": "2020-10-15T22:34:06.777Z", - "contributors": [ - "borysl" - ] - }, - "Web/HTML/Element/video": { - "modified": "2020-10-15T22:22:00.012Z", - "contributors": [ - "AndriiZ" - ] - }, - "Web/HTML/Element/header": { - "modified": "2019-03-23T22:10:15.473Z", - "contributors": [ - "yuraantonov" - ] - }, - "Web/HTML/Global_attributes/hidden": { - "modified": "2020-10-15T22:16:02.593Z", - "contributors": [ - "khomyakdi" - ] - }, - "Web/HTML/Global_attributes": { - "modified": "2019-05-03T05:34:55.602Z", - "contributors": [ - "asmforce" - ] - }, - "Web/HTML/Global_attributes/itemscope": { - "modified": "2020-02-27T17:18:48.824Z", - "contributors": [ - "pelyp47", - "AlinaKuzmenko", - "nemishkor" - ] - }, - "Web/HTML/Global_attributes/lang": { - "modified": "2020-10-15T22:17:22.681Z", - "contributors": [ - "asmforce", - "HA3IK" - ] - }, - "Web/HTML/Global_attributes/tabindex": { - "modified": "2020-10-15T22:29:23.358Z", - "contributors": [ - "memodim.di" - ] - }, - "Web/HTML/Quirks_Mode_and_Standards_Mode": { - "modified": "2019-03-18T21:46:42.475Z", - "contributors": [ - "asmforce" - ] - }, - "Web/HTTP/Headers/Accept-Encoding": { - "modified": "2020-10-15T22:13:34.607Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/Accept-Language": { - "modified": "2020-10-15T22:13:27.393Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/Connection": { - "modified": "2020-10-15T22:13:31.957Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/Content-Length": { - "modified": "2020-10-15T22:13:38.034Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/Content-Type": { - "modified": "2020-10-15T22:13:30.716Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/ETag": { - "modified": "2020-10-15T22:03:56.430Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/HTTP/Headers/If-Match": { - "modified": "2020-10-15T22:04:01.753Z", - "contributors": [ - "cloudgnome" - ] - }, - "Web/HTTP/Headers": { - "modified": "2019-07-09T04:41:30.590Z", - "contributors": [ - "WildeMax", - "savbace", - "pupenasan", - "curdwithraisins" - ] - }, - "Web/HTTP/Headers/Location": { - "modified": "2020-10-15T22:13:34.509Z", - "contributors": [ - "pupenasan" - ] - }, - "Web/HTTP/Headers/Referer": { - "modified": "2020-10-15T21:57:21.223Z", - "contributors": [ - "websunsey" - ] - }, - "Web/HTTP/Headers/User-Agent": { - "modified": "2020-10-15T22:04:15.494Z", - "contributors": [ - "Sestowner" - ] - }, - "Web/HTTP/Headers/X-Forwarded-Proto": { - "modified": "2020-10-15T22:22:50.826Z", - "contributors": [ - "nakhodkiin" - ] - }, - "Web/JavaScript/Guide/Details_of_the_Object_Model": { - "modified": "2020-03-12T19:45:23.579Z", - "contributors": [ - "AdriandeCita", - "wbamberg", - "PavloEleva" - ] - }, - "Web/JavaScript/Guide/Expressions_and_Operators": { - "modified": "2020-03-12T19:46:18.944Z", - "contributors": [ - "DariaManko", - "kwitochka", - "Onimi", - "OleksandrPelepey" - ] - }, - "Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:45:24.334Z", - "contributors": [ - "PavloEleva" - ] - }, - "Web/JavaScript/Reference/Functions/rest_parameters": { - "modified": "2020-10-15T21:55:37.826Z", - "contributors": [ - "DariaManko", - "fscholz", - "trofima" - ] - }, - "Web/JavaScript/Reference/Functions/Arrow_functions": { - "modified": "2020-10-15T21:59:14.617Z", - "contributors": [ - "maisteRR", - "asmforce", - "vberestovskyi", - "krizik", - "ahavianiri" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2020-10-15T21:46:48.879Z", - "contributors": [ - "DariaManko", - "piton13", - "nesteant" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { - "modified": "2020-10-15T22:26:05.753Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2020-10-15T21:54:59.380Z", - "contributors": [ - "AdriandeCita", - "yurii-kozak", - "yuraantonov" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:53:08.281Z", - "contributors": [ - "DariaManko", - "piton13" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2020-10-15T22:06:24.197Z", - "contributors": [ - "DariaManko", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:55:15.973Z", - "contributors": [ - "DariaManko", - "asmforce", - "justlp", - "yuri_spivak" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T22:32:15.212Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T22:19:10.892Z", - "contributors": [ - "DariaManko", - "abmd" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T22:32:17.922Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T22:32:15.124Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T22:06:24.055Z", - "contributors": [ - "DariaManko", - "AdriandeCita" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2020-10-15T22:31:47.123Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T22:31:49.130Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2020-10-15T22:32:00.610Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2020-10-15T22:31:57.609Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T22:31:57.386Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/Number": { - "modified": "2020-10-15T22:31:48.346Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2020-10-15T22:32:15.375Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T22:32:20.201Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2020-10-15T22:32:15.213Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2020-10-15T22:29:41.228Z", - "contributors": [ - "DariaManko", - "taraskundyk" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T22:32:23.109Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { - "modified": "2020-10-15T22:32:24.740Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2020-10-15T22:32:25.165Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toSource": { - "modified": "2020-10-15T22:32:25.603Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T22:32:26.957Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2020-10-15T22:32:27.402Z", - "contributors": [ - "DariaManko" - ] - }, - "Web/JavaScript/Reference/Operators/Destructuring_assignment": { - "modified": "2020-03-12T19:45:50.341Z", - "contributors": [ - "savbace", - "trofima" - ] - }, - "Web/JavaScript/Reference/Operators/Object_initializer": { - "modified": "2020-10-15T21:53:09.316Z", - "contributors": [ - "DariaManko", - "trofima" - ] - }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-03-12T19:47:16.437Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "Web/JavaScript/Equality_comparisons_and_sameness": { - "modified": "2020-03-12T19:47:10.878Z", - "contributors": [ - "DariaManko", - "gshadura", - "asmforce" - ] - }, - "Web/Houdini": { - "modified": "2020-01-12T13:13:12.436Z", - "contributors": [ - "AndriyTykhan" - ] - }, - "Web/Tutorials": { - "modified": "2020-03-16T20:18:27.566Z", - "contributors": [ - "w3schoolsrus", - "html5beginner", - "MilaYoga", - "assanovstan" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:19.040Z", - "contributors": [ - "w3schoolsrus", - "SphinxKnight", - "Sergiy_Luckys", - "pupenasan", - "yuraantonov" - ] - }, - "Tools/Network_Monitor": { - "modified": "2020-07-16T22:35:32.001Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/Performance_Analysis": { - "modified": "2020-07-16T22:35:35.883Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/recording": { - "modified": "2020-07-16T22:35:35.497Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/request_details": { - "modified": "2020-07-16T22:35:34.973Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/request_list": { - "modified": "2020-07-16T22:35:34.227Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/Throttling": { - "modified": "2020-07-16T22:35:36.549Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Network_Monitor/toolbar": { - "modified": "2020-07-16T22:35:32.971Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Web_Console/Console_messages": { - "modified": "2020-07-16T22:34:16.455Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:10.166Z", - "contributors": [ - "pupenasan", - "PavloEleva" - ] - }, - "Tools/Web_Console/UI_Tour": { - "modified": "2020-07-16T22:34:17.758Z", - "contributors": [ - "pupenasan" - ] - }, - "Tools/Web_Console/Split_console": { - "modified": "2020-07-16T22:34:21.548Z", - "contributors": [ - "pupenasan" - ] - }, - "conflicting/Glossary/Doctype": { - "modified": "2019-01-17T01:19:22.959Z", - "contributors": [ - "asmforce" - ] - }, - "conflicting/Web/API/WindowOrWorkerGlobalScope": { - "modified": "2019-03-23T22:25:44.821Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { - "modified": "2019-03-23T22:35:58.219Z", - "contributors": [ - "animatio" - ] - }, - "Web/API/HTMLMediaElement/abort_event": { - "modified": "2019-04-30T14:23:14.164Z", - "contributors": [ - "wbamberg", - "fscholz", - "CosmicBoris" - ] - }, - "conflicting/Learn/CSS/First_steps": { - "modified": "2019-03-23T22:37:37.659Z", - "contributors": [ - "ASeegull", - "yuraantonov" - ] - }, - "Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T22:21:20.519Z", - "contributors": [ - "ASeegull" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:06:14.618Z", - "contributors": [ - "DariaManko", - "AdriandeCita" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T22:18:21.094Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T22:18:43.111Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T22:21:50.690Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T22:25:30.929Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2020-10-15T22:18:47.273Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:51:58.196Z", - "contributors": [ - "piton13" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2020-10-15T22:18:03.049Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError": { - "modified": "2020-10-15T22:18:46.456Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:58:51.957Z", - "contributors": [ - "DariaManko", - "asmforce" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T22:18:47.800Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/URIError": { - "modified": "2020-10-15T22:18:47.179Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:56:21.125Z", - "contributors": [ - "asmforce" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T22:24:28.585Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560": { - "modified": "2020-10-15T22:24:24.851Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca": { - "modified": "2020-10-15T22:24:49.649Z", - "contributors": [ - "DariaManko" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-03-12T19:45:50.602Z", - "contributors": [ - "Lancer92", - "Artem2011", - "devalf", - "trofima", - "KadirTopal" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_a8aa9ce42ce1749862961c61113d120b": { - "modified": "2020-10-15T21:57:25.055Z", - "contributors": [ - "DariaManko", - "Onimi", - "Anonymous", - "GrytsiukSerhiy", - "asmforce" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_1cd48548c16282df3883f99267726c3e": { - "modified": "2020-10-15T21:53:06.640Z", - "contributors": [ - "DariaManko", - "wbamberg", - "Onimi", - "trofima" - ] - }, - "conflicting/Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T22:22:48.978Z", - "contributors": [ - "DariaManko" - ] - } -}
\ No newline at end of file diff --git a/files/uk/conflicting/glossary/doctype/index.html b/files/uk/conflicting/glossary/doctype/index.html deleted file mode 100644 index 156cfe51d7..0000000000 --- a/files/uk/conflicting/glossary/doctype/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: DTD -slug: conflicting/Glossary/Doctype -tags: - - CodingScripting - - Глосарій -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD -original_slug: Glossary/DTD ---- -<p>{{page("/uk/docs/Glossary/Doctype")}}</p> diff --git a/files/uk/conflicting/learn/css/first_steps/index.html b/files/uk/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index 8658350018..0000000000 --- a/files/uk/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Getting started with CSS -slug: conflicting/Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/Guide/CSS/Getting_started ---- -<p><span class="seoSummary">Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (<a href="/uk/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.</span></p> - -<p>Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">списки</a> більш просуненого рівня.</p> - -<nav class="fancyTOC"><a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">що таке CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Навіщо використовувати CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'Як працює CSS' of the CSS tutorial">Як працює CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">каскадування та успадковування</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Селектори</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Читабельний CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Текстові стилі</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Колір</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Контент</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Списки</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Таблиці</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Медіа</a></nav> - -<h2 id="Що_потрібно_для_початку_роботи">Що потрібно для початку роботи</h2> - -<ul> - <li>Текстовий редактор</li> - <li>Сучасний браузер</li> - <li>Певний досвід роботи з текстовим редактором і браузером</li> -</ul> - -<p>Не зважаючи на те, що вправи можуть допомогти тобі в навчанні, ти не зобов’язаний хз виконувати. Ти можеш просто читати керівництво та розглядати зображення.</p> - -<p><strong>На замітку:</strong> Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором. </p> - -<h2 id="Як_використовувати_це_керівництво">Як використовувати це керівництво</h2> - -<p>В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. </p> - -<h3 id="Частина_І_основи_CSS">Частина І: основи CSS</h3> - -<p>На кожній сторінці переглянь відділ <em>Інформація,</em> щоб зрозуміти як працює CSS. Спробуй секцію <em>Дія,</em> щоб випробувати CSS на власному комп’ютері.</p> - -<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> - -<p>Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком <em>Детальніше</em>. Використай лінки у них, щоб знайти довідникову інформацію про CSS.</p> - -<h3 id="Частина_II_Сфера_CSS">Частина II: Сфера CSS</h3> - -<p>Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.</p> - -<ol> - <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG-графіка</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML дані</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL сполучення</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Користувацбкі інтерфейси ХUL</a></li> -</ol> diff --git a/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html b/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index bc8dcb5f8a..0000000000 --- a/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML DOM - - Interface - - Intervals - - Mixin - - NeedsTranslation - - Reference - - Timers - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface neither inherits nor provides any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface does not inherit any methods. It offers the following methods.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index 4cbc7d8fb6..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -tags: - - Boolean - - JavaScript - - Властивість - - Поле - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p>Поле <strong><code>Boolean.prototype</code></strong> представляє прототип конструктора {{jsxref("Boolean")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> - -<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> - -<h2 id="Опис">Опис</h2> - -<p>Екземпляри {{jsxref("Boolean")}} наслідуються від <code>Boolean.prototype</code>. Ви можете використовувати об'єкт прототипа конструктора, щоб додавати свої поля та методи до всіх екземплярів {{jsxref("Boolean")}}.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Повертає функцію, що створила прототип екземпляра. За замовчування це функція {{jsxref("Boolean")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Повертає строку, що містить сирець об'єкту {{jsxref("Boolean")}}; використавши її ви можете створити еквівалентний об'єкт. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Повертає строку <code>"true"</code> чи <code>"false"</code> залежно від значення об'єкту. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>Повертає примітив значення об'єкту {{jsxref("Boolean")}}. Перевизначає метод {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Примітка</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> - -<div> -<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> -</div> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html deleted file mode 100644 index d7c6bbabf9..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Error.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error -tags: - - Error - - JavaScript - - Властивість - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>Error.prototype</strong></code> є прототипом для конструктора {{jsxref("Error")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("Error")}} та екземпляри {{jsxref("Global_Objects/Error", "базових конструкторів помилок", "#Типи_помилок", 1)}} успадковуються від <code>Error.prototype</code>. Як в усіх функціях-конструкторах, ви можете використовувати прототип конструктора, щоб додавати властивості чи методи до усіх екземплярів, створених цим конструктором. </p> - -<h2 id="Властивості">Властивості</h2> - -<h3 id="Стандартні_властивості">Стандартні властивості</h3> - -<dl> - <dt><code>Error.prototype.constructor</code></dt> - <dd>Функція, яка створила прототип екземпляра.</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>Повідомлення помилки.</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>Ім'я помилки.</dd> -</dl> - -<h3 id="Спеціальні_розширення">Спеціальні розширення</h3> - -<p>{{non-standard_header}}</p> - -<h4 id="Microsoft">Microsoft</h4> - -<dl> - <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.description">Error.description</a></code></dt> - <dd>Опис помилки. Властивість схожа на {{jsxref("Error.prototype.message", "message")}}.</dd> - <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.number">Error.number</a></code></dt> - <dd>Номер помилки.</dd> -</dl> - -<h4 id="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку.</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>Номер рядка у файлі, що спричинив помилку.</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у файлі, де виникла помилка.</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>Трасування стеку.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Повертає рядок з кодом, що спричинить створення заданого об'єкта {{jsxref("Error")}}; ви можете використати це значення, щоб створити новий об'єкт. Заміщує метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>Повертає рядок, що представляє заданий об'єкт. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення Реалізовано у JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Error.prototype")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html deleted file mode 100644 index 2e030759d1..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: EvalError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError -tags: - - Error - - EvalError - - JavaScript - - помилка -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>EvalError.prototype</strong></code> є прототипом для конструктора {{jsxref("EvalError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("EvalError")}} успадковуються від <code>EvalError.prototype</code>. Ви можете використати прототип, щоб додати властивості та методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>EvalError.prototype.constructor</code></dt> - <dd>Функція, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("EvalError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успадковано від {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("EvalError")}} не містить власних методів, екземпляри {{jsxref("EvalError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.EvalError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index e77a1ed5ef..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Function.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function -tags: - - Function - - JavaScript - - Властивість - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>Function.prototype</strong></code> є об'єктом прототипу {{jsxref("Function")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Об'єкти {{jsxref("Function")}} успадковуються від <code>Function.prototype</code>. <code>Function.prototype</code> не можна змінити.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt>{{jsxref("Function.prototype.arguments")}} {{deprecated_inline}}</dt> - <dd>Масив, що відповідає аргументам, переданим у функцію. Це застаріла властивість {{jsxref("Function")}}. Використовуйте натомість об'єкт {{jsxref("Functions/arguments", "arguments")}}, доступний всередині функції.</dd> - <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Вказувала кількість аргументів, очікуваних функцією, але була видалена. Використовуйте натомість властивість {{jsxref("Function.length", "length")}}.</s></dd> - <dt>{{jsxref("Function.prototype.caller")}} {{non-standard_inline}}</dt> - <dd>Вказує функцію, що викликала функцію, яка виконується.</dd> - <dt>{{jsxref("Function.prototype.length")}}</dt> - <dd>Вказує кількість аргументів, очікуваних функцією.</dd> - <dt>{{jsxref("Function.prototype.name")}}</dt> - <dd>Ім'я функції.</dd> - <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> - <dd>Ім'я, що відображається для функції.</dd> - <dt><code>Function.prototype.constructor</code></dt> - <dd>Вказує функцію, яка створює прототип об'єкта. Більше інформації дивіться на сторінці {{jsxref("Object.prototype.constructor")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Викликає функцію та встановлює її <em>this</em> надане значення, аргументи можуть передаватися об'єктом {{jsxref("Array")}}.</dd> - <dt>{{jsxref("Function.prototype.bind()")}}</dt> - <dd>Створює нову функцію, в якої під час виклику <em>this</em> присвоєне надане значення, з заданою послідовністю аргументів, що передують будь-якім іншим наданим аргументам під час виклику нової функції.</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Викликає (виконує) функцію та присвоює її <em>this</em> надане значення, аргументи можуть передаватися як є.</dd> - <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>Повертає <code>true</code>, якщо функція є <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генератором</a>; інакше повертає <code>false</code>.</dd> - <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toString")}}.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення. Реалізоване у JavaScript 1.1</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Function.prototype")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html deleted file mode 100644 index e499707efa..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -tags: - - ECMAScript 2015 - - GeneratorFunction - - JavaScript - - Ітератор - - Властивість - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>GeneratorFunction.prototype</strong></code> відображає прототип {{jsxref("GeneratorFunction")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Об'єкти {{jsxref("GeneratorFunction")}} успадковуються від <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> не можна змінювати.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> - <dd>Початковим значенням є {{jsxref("GeneratorFunction")}}.</dd> - <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> - <dd>Значення дорівнює <code>%GeneratorPrototype%</code>.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html deleted file mode 100644 index 615851285c..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: InternalError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError -tags: - - Error - - InternalError - - JavaScript - - Властивість - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -<div>{{JSRef}} {{non-standard_header}}</div> - -<p>Властивість <code><strong>InternalError.prototype</strong></code> є прототипом конструктора {{jsxref("InternalError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("InternalError")}} успадковуються від <code>InternalError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>InternalError.prototype.constructor</code></dt> - <dd>Визначає функцію, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("InternalError")}} не має власних методів, екземпляри {{jsxref("InternalError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<p>Не є частиною жодних специфікацій.</p> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.InternalError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index a7589f1422..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - Number - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Число/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <strong><code>Number.prototype</code></strong> являє собою прототип для конструктора класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Кожен примірник класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code> успадковує властивості й методи з <code>Number.prototype</code>. Зміни, внесені до прототипа, позначаться на всіх об'єктах, що є примірниками класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>Number.prototype.constructor</code></dt> - <dd>Повертає функцію, що створила цей примірник об'єкта. Типово це об'єкт <code>{{jsxref("Global_Objects/Number", "Number")}}</code>, який водночас є і функцією.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> - <dd>Повертає рядок, що містить експоненціальний запис числа.</dd> - <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> - <dd>Повертає рядок, що містить запис числа у форматі з нерухомою комою.</dd> - <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd>Повертає рядок, що містить узалежнений від мови запис числа. Перекриває метод <code>{{jsxref("Object.prototype.toLocaleString()")}}</code>.</dd> - <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою комою чи експоненціальний.</dd> - <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Повертає рядок, що містить код мовою JavaScript, який створює об'єкт класу {{jsxref("Global_Objects/Number", "Number")}} з відповідним значенням. Цей код можна використати для створення нового об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.toSource()")}}</code>.</dd> - <dt>{{jsxref("Number.prototype.toString()")}}</dt> - <dd>Повертає рядок, що містить числовий запис значення об'єкта в зазначеній системі числення. Перекриває метод <code>{{jsxref("Object.prototype.toString()")}}</code>.</dd> - <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> - <dd>Повертає {{Glossary("Primitive", "просте числове значення")}} об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.valueOf()")}}</code>.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Первинне визначення. Реалізовано у JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Number.prototype")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Global_Objects/Number", "Number")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index b5affe46e1..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -tags: - - JavaScript - - Promise - - ДжаваСкріпт - - Проміс -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p>Параметр <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> відображає прототип для конструктора {{jsxref("Promise")}} constructor.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Екземпляри {{jsxref("Promise")}} успадковуються від {{jsxref("Promise.prototype")}}. Ви можете використовувати прототип конструктора, щоб добавляти параметри або методи до всіх екземплярів <code>Promise</code>.</p> - -<h2 id="Параметри">Параметри</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Повертає функцію, яка створила прототип екземпляра. Це є функція {{jsxref("Promise")}} по замовчуванню.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> - <dd>Добавляє колбек обробник відхилення проміса, і повертає новий проміс, який вирішується значенням, яке повертається з функції колбеку, якщо вона була викликана, або його початковий результат виконання, якщо даний проміс був виконаний.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> - <dd>Добавляє до проміса функції колбеки для випадків, коли проміс був виконаний (onFulfilled) і відхилений (onRejected) і повертає новий проміс, який вирішується значенням, яке було повернуто з onFulfilled функції колбеку, або з початковим значенням, яке було вирішено, коли даний проміс не був оброблений (тобто коли обробники <code>onFulfilled</code> або <code>onRejected</code> не є функцією).</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> - -<p>{{Compat("javascript/promise","Promise.prototype")}}</p> - -<h2 id="Дивитися_також">Дивитися також</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html deleted file mode 100644 index a1688fe918..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: RangeError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -tags: - - Error - - JavaScript - - RangeError - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>RangeError.prototype</strong></code> є прототипом для конструктора {{jsxref("RangeError")}}</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("RangeError")}} успадковуються від <code>RangeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Визначає функцію, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("RangeError")}} має надавати власну властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успаковано від {{jsxref("Error", "Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("RangeError")}} не містить власних методів, екземпляри {{jsxref("RangeError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.RangeError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html deleted file mode 100644 index 3d1102cf05..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ReferenceError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError -tags: - - Error - - JavaScript - - ReferenceError - - помилка - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError -translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>ReferenceError.prototype</strong></code> є прототипом для конструктора {{jsxref("ReferenceError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("ReferenceError")}} успадковуються від <code>ReferenceError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>ReferenceError.prototype.constructor</code></dt> - <dd>Визначає функцію, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("ReferenceError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("ReferenceError")}} не містить власних методів, екземпляри {{jsxref("ReferenceError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.ReferenceError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html deleted file mode 100644 index f872f5d40c..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: SyntaxError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -tags: - - Error - - JavaScript - - Prototype - - SyntaxError - - помилка -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>SyntaxError.prototype</strong></code> є прототипом для конструктора {{jsxref("SyntaxError")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Всі примірники {{jsxref("SyntaxError")}} успадковуються від <code>SyntaxError.prototype</code>, тож ви можете скористатися прототипом задля додавання властивостей чи методів до всіх примірників.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>Функція, що створює прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Попри те, що в ECMA-262 зазначено, що {{jsxref("SyntaxError")}} мусить мати свою властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він насправді успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>Шлях до файла, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>Номер рядка у файлі, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>Номер символа у рядку, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>Стек викликів. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("SyntaxError")}} не містить власних методів, примірники {{jsxref("SyntaxError")}} успадковують деякі методи від ланцюжка прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Первинне визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div> -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.builtins.SyntaxError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html deleted file mode 100644 index 0caac5e6fa..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: TypeError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError -tags: - - Error - - JavaScript - - TypeError - - помилка -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>TypeError.prototype</strong></code> є прототипом для конструктора {{jsxref("TypeError")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("TypeError")}} успадковуються від <code>TypeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>TypeError.prototype.constructor</code></dt> - <dd>Визначає функцію, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("TypeError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("TypeError")}} не містить власних методів, екземпляри {{jsxref("TypeError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.TypeError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html deleted file mode 100644 index edc28b2064..0000000000 --- a/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: URIError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/URIError -tags: - - Error - - JavaScript - - URIError - - помилка - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/URIError -translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>URIError.prototype</strong></code> є прототипом для конструктора {{jsxref("URIError")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Всі екземпляри {{jsxref("URIError")}} успадковуються від <code>URIError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>URIError.prototype.constructor</code></dt> - <dd>Визначає функцію, яка створила прототип об'єкта.</dd> - <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> - <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("URIError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> - <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> - <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> - <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> - <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> - <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p>Хоча прототип {{jsxref("URIError")}} не містить власних методів, екземпляри {{jsxref("URIError")}} успадковують деякі методи через ланцюжок прототипів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.URIError")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators/index.html b/files/uk/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index 5afab5c852..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Арифметичні оператори -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Оператор -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Арифметичні оператори</strong> приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - - - -<h2 id="Addition" name="Addition">Додавання (+)</h2> - -<p>Оператор додавання повертає суму числових операндів або об'єднання рядків.</p> - -<h3 id="Синтаксис">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x + y -</pre> - -<h3 id="Приклади">Приклади</h3> - -<pre class="brush: js">// Number + Number -> сума -1 + 2 // 3 - -// Boolean + Number -> сума -true + 1 // 2 - -// Boolean + Boolean -> сума -false + false // 0 - -// Number + String -> об'єднання -5 + 'foo' // "5foo" - -// String + Boolean -> об'єднання -'foo' + false // "foofalse" - -// String + String -> об'єднання -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Subtraction" name="Subtraction">Віднімання (-)</h2> - -<p>Оператор віднімання проводить операцію віднімання між двома операндами, повертаючи різницю між ними.</p> - -<h3 id="Синтаксис_2">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x - y -</pre> - -<h3 id="Приклади_2">Приклади</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN</pre> - -<h2 id="Division" name="Division">Ділення (/)</h2> - -<p>Оператор ділення повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.</p> - -<h3 id="Синтаксис_3">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x / y -</pre> - -<h3 id="Приклади_3">Приклади</h3> - -<pre class="brush: js">1 / 2 // повертає 0.5 у JavaScript -1 / 2 // повертає 0 у Java -// (жодне з чисел не є явно числом з рухомою комою) - -1.0 / 2.0 // повертає 0.5 у JavaScript та Java - -2.0 / 0 // повертає Infinity у JavaScript -2.0 / 0.0 // також повертає Infinity -2.0 / -0.0 // повертає -Infinity у JavaScript</pre> - -<h2 id="Multiplication" name="Multiplication">Множення (*)</h2> - -<p>Оператор множення повертає добуток операндів.</p> - -<h3 id="Синтаксис_4">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x * y -</pre> - -<h3 id="Приклади_4">Приклади</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -'foo' * 2 // NaN -</pre> - -<h2 id="Remainder" name="Remainder">Остача (%)</h2> - -<p>Оператор остачі повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.</p> - -<h3 id="Синтаксис_5">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2 -</pre> - -<h3 id="Приклади_5">Приклади</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5 -</pre> - -<h2 id="Exponentiation" name="Exponentiation">Піднесення до степеня (**)</h2> - -<p>Оператор піднесення до степеня повертає результат піднесення першого операнду до показника степеня другого операнду. Тобто, <code>var1</code><sup><code>var2</code></sup> у наведеній інструкції, де <code>var1</code> та <code>var2</code> є змінними. Оператор піднесення до степеня правоасоціативний. <code>a ** b ** c</code> дорівнює <code>a ** (b ** c)</code>.</p> - -<h3 id="Синтаксис_6">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2 -</pre> - -<h3 id="Примітки">Примітки</h3> - -<p>У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори. У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (<code>+/-/~/!/delete/void/typeof</code>) одразу перед числом основи степеня.</p> - -<pre class="brush: js">-2 ** 2; -// 4 у Bash, -4 у інших мовах. -// Це помилка у JavaScript, оскільки операція неоднозначна. - - --(2 ** 2); -// -4 у JavaScript, а наміри автора однозначні. -</pre> - -<h3 id="Приклади_6">Приклади</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 -</pre> - -<p>Щоб поміняти знак результату виразу піднесення до степеня:</p> - -<pre class="brush: js">-(2 ** 2) // -4 -</pre> - -<p>Щоб зробити основу степеня у виразі від'ємним числом:</p> - -<pre class="brush: js">(-2) ** 2 // 4 -</pre> - -<div class="note"> -<p><strong>Заувага:</strong> JavaScript також має <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">бітовий оператор ^ (логічний XOR)</a>. <code>**</code> та <code>^</code> відрізняються (наприклад: <code>2 ** 3 === 8</code>, тоді як <code>2 ^ 3 === 1</code>.)</p> -</div> - -<h2 id="Increment" name="Increment">Інкремент (++)</h2> - -<p>Оператор інкременту збільшує свій операнд (додає одиницю) та повертає його значення.</p> - -<ul> - <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x++), тоді він збільшує значення та повертає його до збільшення.</li> - <li>Якщо оператор використовується префіксно, перед операндом (наприклад, ++x), тоді він збільшує значення та повертає його після збільшення.</li> -</ul> - -<h3 id="Синтаксис_7">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x++ або ++x -</pre> - -<h3 id="Приклади_7">Приклади</h3> - -<pre class="brush: js">// Постфіксний -var x = 3; -y = x++; // y = 3, x = 4 - -// Префіксний -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Decrement" name="Decrement">Декремент (--)</h2> - -<p>Оператор декременту зменшує свій операнд (віднімає одиницю) та повертає його значення.</p> - -<ul> - <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x--), тоді він зменшує значення та повертає його до зменшення.</li> - <li>Якщо оператор використовується префіксно, перед операндом (наприклад, --x), тоді він зменшує значення та повертає його після зменшення.</li> -</ul> - -<h3 id="Синтаксис_8">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x-- або --x -</pre> - -<h3 id="Приклади_8">Приклади</h3> - -<pre class="brush: js">// Постфіксний -var x = 3; -y = x--; // y = 3, x = 2 - -// Префіксний -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Unary_negation" name="Unary_negation">Унарний мінус (-)</h2> - -<p>Унарний мінус ставиться перед своїм операндом та міняє його знак на протилежний.</p> - -<h3 id="Синтаксис_9">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> -x -</pre> - -<h3 id="Приклади_9">Приклади</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// Унарний мінус може перетворити нечислове значення на число -var x = "4"; -y = -x; // y = -4 -</pre> - -<h2 id="Унарний_плюс"><a id="Unary_plus" name="Unary_plus">Унарний плюс (+)</a></h2> - -<p>Унарний плюс ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом. Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення <code>true</code>, <code>false</code> та <code>null</code>. Підтримуються цілі числа у десятковому та шістнадцятковому форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.</p> - -<h3 id="Синтаксис_10">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> +x -</pre> - -<h3 id="Приклади_10">Приклади</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td>Доданий <a href="https://github.com/rwaldron/exponentiation-operator">Оператор піднесення до степеня</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">унарні оператори</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">унарні оператори</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператори присвоєння</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index fdf9637511..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: Оператор розпакування -slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - Iterator - - JavaScript - - Operator - - Ітератор - - Оператор -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator -original_slug: Web/JavaScript/Reference/Operators/Оператор_розпакування ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Оператор розпакування</strong> дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>Для виклику функцій:</p> - -<pre class="brush: js">myFunction(...iterableObj); -</pre> - -<p>Для масивів:</p> - -<pre class="brush: js">[...iterableObj, 4, 5, 6];</pre> - -<p>Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):</p> - -<pre class="brush: js">let objClone = { ...obj };</pre> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Розпакування_у_викликах_функції">Розпакування у викликах функції</h3> - -<h4 id="Заміна_apply">Заміна apply</h4> - -<p><strong>Приклад:</strong> {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.</p> - -<pre class="brush: js">function myFunction(x, y, z) { } -var args = [0, 1, 2]; -myFunction.apply(null, args);</pre> - -<p>З розпакуванням тепер отак:</p> - -<pre class="brush: js">function myFunction(x, y, z) { } -var args = [0, 1, 2]; -myFunction(...args);</pre> - -<p>Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.</p> - -<pre class="brush: js">function myFunction(v, w, x, y, z) { } -var args = [0, 1]; -myFunction(-1, ...args, 2, ...[3]);</pre> - -<h4 id="Apply_для_new">Apply для new</h4> - -<p>Викликаючи конструктор з <code>new, </code>неможливо напряму використовувати на ньому <code>apply</code> (<code>apply</code> робить <code>[[Call]],</code> а не <code>[[Construct]]</code>). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:</p> - -<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Січ 1970 -// var d = new Date.apply(dateFields) не спрацює. Викине TypeError -var d = new Date(...dateFields); // вуаля</pre> - -<h3 id="Розпакування_в_масивах">Розпакування в масивах</h3> - -<h4 id="Ліпше_оголошення_масивів">Ліпше оголошення масивів</h4> - -<p>Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів <code>push</code>, <code>splice</code>, <code>concat</code>, тощо. З оператором розпакування це стає значно лаконічніше:</p> - -<pre class="brush: js">var parts = ['shoulders', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes']; -// ["head", "shoulders", "knees", "and", "toes"]</pre> - -<p>Як і з розпакуванням списку аргументів, <code>...</code> можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.</p> - -<h4 id="Копіювання_масиву">Копіювання масиву</h4> - -<pre class="brush: js">var arr = [1, 2, 3]; -var arr2 = [...arr]; // так само як arr.slice() -arr2.push(4); - -// arr2 стає [1, 2, 3, 4] -// arr залишається незміненим</pre> - -<p><strong>Зауваження:</strong> оператор розпакування при копіюванні масиву йде лише на <strong>один</strong> рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).</p> - -<pre class="brush: js">var a = [[1], [2], [3]]; -var b = [...a]; -b.shift().shift(); // 1 -// Тепер масив a також змінено: [[], [2], [3]]</pre> - -<h4 id="Ліпше_злиття_масивів">Ліпше злиття масивів</h4> - -<p>{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Доддати всі елементи з arr2 в arr1 -arr1 = arr1.concat(arr2);</pre> - -<p>З розпакуванням це стає:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1 = [...arr1, ...arr2];</pre> - -<p>{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Вставити всі елементи з arr2 в початок arr1 -Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]</pre> - -<p>З розпакуванням це стає:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]</pre> - -<h4 id="Розпакування_об’єктів">Розпакування об’єктів</h4> - -<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 3) додає розпакування до <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">об’єктів</a>. It copies own enumerable properties from a provided object onto a new object.</p> - -<p>Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.</p> - -<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; -var obj2 = { foo: 'baz', y: 13 }; - -var clonedObj = { ...obj1 }; -// Object { foo: "bar", x: 42 } - -var mergedObj = { ...obj1, ...obj2 }; -// Object { foo: "baz", x: 42, y: 13 }</pre> - -<p>Зауваж, що {{jsxref("Object.assign()")}} викликає <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розпакування - ні.</p> - -<h4 id="Лише_для_ітерованих">Лише для ітерованих</h4> - -<p>Розпакування може бути застосоване лише для <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерованик</a> об’єктів:</p> - -<pre class="brush: js">var obj = {'key1': 'value1'}; -var array = [...obj]; // TypeError: obj is not iterable</pre> - -<p><strong>Зауваження:</strong> наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор <a href="https://babeljs.io/">babel</a> вертає наступні результати:</p> - -<pre class="brush: js">var obj = {'key1': 'value1'}; -var array = [...obj]; // запише в array пустий масив [] - -var arr = [1,1,1]; -var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}</pre> - -<h4 id="Розпакування_великих_колекцій">Розпакування великих колекцій</h4> - -<p>Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує <strong>всі</strong> елементи колекції в стек, скільки б їх не було. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> щоб дізнатись більше.</p> - -<h2 id="Оператор_решти">Оператор решти</h2> - -<p>Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">решта параметрів</a>.</p> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Стан</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Визначено в деяких секціях специфікацій: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Без змін.</td> - </tr> - <tr> - <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td> - <td>Чернетка</td> - <td>Чернетка в 3 стадії</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Spread operation in array literals</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoDesktop("16") }}</td> - <td>{{CompatIE("Edge/10240")}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Spread operation in function calls</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoDesktop("27") }}</td> - <td>{{CompatIE("Edge/10240")}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Spread operation in destructuring</td> - <td>{{CompatChrome("49")}}</td> - <td>{{ CompatGeckoDesktop("34") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Spread operation in array literals</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoMobile("16") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - <td>{{CompatChrome("46")}}</td> - </tr> - <tr> - <td>Spread operation in function calls</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoMobile("27") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - <td>{{CompatChrome("46")}}</td> - </tr> - <tr> - <td>Spread operation in destructuring</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("34") }}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">Решта параметрів</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html b/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html deleted file mode 100644 index 0eb03eb5a1..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: Оператори присвоєння -slug: >- - conflicting/Web/JavaScript/Reference/Operators_1cd48548c16282df3883f99267726c3e -tags: - - JavaScript - - Оператор -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators -original_slug: Web/JavaScript/Reference/Operators/Оператори_присвоєння ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Оператор присвоєння</strong> присвоює своєму лівому операнду значення, на підставі значення правого операнду.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</p> - -<div class="hidden"> -<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> -</div> - -<h2 id="Огляд">Огляд</h2> - -<p>Базовим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює змінній <code>x</code> значення змінної <code>y</code>. Інші оператори присвоєння у своїй більшості є скороченнями для стандарних операцій, як це вказано у наступній таблиці з визначеннями та прикладами.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Назва</th> - <th>Оператор скороченого запису</th> - <th>Значення</th> - </tr> - <tr> - <td><a href="#Присвоєння">Присвоєння</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_додаванням">Присвоєння з додаванням</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_відніманням">Присвоєння з відніманням</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_множенням">Присвоєння з множенням</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_діленням">Присвоєння з діленням</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_остачі">Присвоєння остачі</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_піднесенням_до_степеня">Присвоєння з піднесенням до степеня</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_лівим_зсувом">Присвоєння з лівим зсувом</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_правим_зсувом">Присвоєння з правим зсувом</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_беззнаковим_правим_зсувом">Присвоєння з беззнаковим правим зсувом</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_побітовим_І">Присвоєння з побітовим І</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_виключним_побітовим_АБО">Присвоєння з виключним побітовим АБО</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Присвоєння_з_побітовим_АБО">Присвоєння з побітовим АБО</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Присвоєння"><a name="Assignment">Присвоєння</a></h2> - -<p>Простий оператор присвоєння використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоюваннь, щоб присвоїти одне значення декільком змінним. Дивіться приклад нижче.</p> - -<h4 id="Синтаксис">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x = y -</pre> - -<h4 id="Приклади">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// x = 5 -// y = 10 -// z = 25 - -x = y // x дорівнює 10 -x = y = z // x, y та z усі дорівнюють 25 -</pre> - -<h3 id="Присвоєння_з_додаванням"><a name="Addition_assignment">Присвоєння з додаванням</a></h3> - -<p>Оператор присвоєння з додаванням <strong>додає</strong> значення правого операнду до змінної (лівого перанду) та записує у неї отриманий результат. Типи двох операндів визначають поведінку оператора. Таким чином, його результатом може стати або додавання або конкатенація. Для більш детального огляду дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор додавання", "#Addition", 1)}}.</p> - -<h4 id="Синтаксис_2">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x += y -<strong>Значення:</strong> x = x + y -</pre> - -<h4 id="Приклади_2">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// foo = 'foo' -// bar = 5 -// baz = true - - -// число + число -> додавання -bar += 2 // 7 - -// булеве значення + число -> додавання -baz += 1 // 2 - -// булеве значення + булеве значення -> додавання -baz += false // 1 - -// число + рядок -> конкатенація -bar += 'foo' // "5foo" - -// рядок + булеве значення -> конкатенація -foo += false // "foofalse" - -// рядок + рядок -> конкатенація -foo += 'bar' // "foobar" -</pre> - -<h3 id="Присвоєння_з_відніманням"><a name="Subtraction_assignment">Присвоєння з відніманням</a></h3> - -<p>Оператор присвоєння з відніманням <strong>віднімає</strong> значення правого операнду від змінної (лівого перанду) та записує у неї отриманий результат. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор віднімання", "#Subtraction", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_3">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x -= y -<strong>Значення:</strong> x = x - y -</pre> - -<h4 id="Приклади_3">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// bar = 5 - -bar -= 2 // 3 -bar -= 'foo' // NaN -</pre> - -<h3 id="Присвоєння_з_множенням"><a name="Multiplication_assignment">Присвоєння з множенням</a></h3> - -<p>Оператор присвоєння з множенням <strong>помножує</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор множення", "#Multiplication", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_4">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x *= y -<strong>Значення:</strong> x = x * y -</pre> - -<h4 id="Приклади_4">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// bar = 5 - -bar *= 2 // 10 -bar *= 'foo' // NaN -</pre> - -<h3 id="Присвоєння_з_діленням"><a name="Division_assignment">Присвоєння з діленням</a></h3> - -<p>Оператор присвоєння з діленням <strong>ділить</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор ділення", "#Division", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_5">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x /= y -<strong>Значення:</strong> x = x / y -</pre> - -<h4 id="Приклади_5">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// bar = 5 - -bar /= 2 // 2.5 -bar /= 'foo' // NaN -bar /= 0 // Infinity -</pre> - -<h3 id="Присвоєння_остачі"><a name="Remainder_assignment">Присвоєння остачі</a></h3> - -<p>Оператор присвоєння остачі <strong>ділить</strong> змінну на значення правого операнду та присвоює <strong>остачу</strong> змінній. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор остачі", "#Remainder", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_6">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x %= y -<strong>Значення:</strong> x = x % y -</pre> - -<h4 id="Приклади_6">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// bar = 5 - -bar %= 2 // 1 -bar %= 'foo' // NaN -bar %= 0 // NaN -</pre> - -<h3 id="Присвоєння_з_піднесенням_до_степеня"><a id="Exponentiation_assignment" name="Exponentiation_assignment">Присвоєння з піднесенням до степеня</a></h3> - -<p>Оператор присвоєння з піднесенням до степеня обчислює результат піднесення першого операнду до <strong>показника степеня</strong> другого операнду. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор піднесення до степеня", "#Exponentiation", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_7">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x **= y -<strong>Значення:</strong> x = x ** y -</pre> - -<h4 id="Приклади_7">Приклади</h4> - -<pre class="brush: js">// Розглянемо такі змінні: -// bar = 5 - -bar **= 2 // 25 -bar **= 'foo' // NaN</pre> - -<h3 id="Присвоєння_з_лівим_зсувом"><a name="Left_shift_assignment">Присвоєння з лівим зсувом</a></h3> - -<p>Оператор присвоєння з лівим зсувом виконує зсув першого операнду на вказану кількість бітів ліворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор лівого зсуву", "#Left_shift", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_8">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x <<= y -<strong>Значення:</strong> x = x << y -</pre> - -<h4 id="Приклади_8">Приклади</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h3 id="Присвоєння_з_правим_зсувом"><a name="Right_shift_assignment">Присвоєння з правим зсувом</a></h3> - -<p>Оператор присвоєння з правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор правого зсуву", "#Right_shift", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_9">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x >>= y -<strong>Значення:</strong> x = x >> y -</pre> - -<h4 id="Приклади_9">Приклади</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h3 id="Присвоєння_з_беззнаковим_правим_зсувом"><a name="Unsigned_right_shift_assignment">Присвоєння з беззнаковим правим зсувом</a></h3> - -<p>Оператор присвоєння з беззнаковим правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", " оператор беззнакового правого зсуву", "#Unsigned_right_shift", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_10">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x >>>= y -<strong>Значення:</strong> x = x >>> y -</pre> - -<h4 id="Приклади_10">Приклади</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h3 id="Присвоєння_з_побітовим_І"><a name="Bitwise_AND_assignment">Присвоєння з побітовим І</a></h3> - -<p>Оператор присвоєння з побітовим І використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового І", "#Bitwise_AND", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_11">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x &= y -<strong>Значення:</strong> x = x & y -</pre> - -<h4 id="Приклади_11">Приклади</h4> - -<pre class="brush: js">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h3 id="Присвоєння_з_виключним_побітовим_АБО"><a name="Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></h3> - -<p>Оператор присвоєння з виключним побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО (XOR) та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор виключного побітового АБО", "#Bitwise_XOR", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_12">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x ^= y -<strong>Значення:</strong> x = x ^ y -</pre> - -<h4 id="Приклади_12">Приклади</h4> - -<pre class="brush: js">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h3 id="Присвоєння_з_побітовим_АБО"><a name="Bitwise_OR_assignment">Присвоєння з побітовим АБО</a></h3> - -<p>Оператор присвоєння з побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового АБО", "#Bitwise_OR", 1)}} для більш детального огляду.</p> - -<h4 id="Синтаксис_13">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор: </strong> x |= y -<strong>Значення:</strong> x = x | y -</pre> - -<h4 id="Приклади_13">Приклади</h4> - -<pre class="brush: js">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Приклади_14">Приклади</h2> - -<h3 id="Лівий_операнд_з_іншим_оператором_присвоєння">Лівий операнд з іншим оператором присвоєння</h3> - -<p>У незвичних ситуаціях оператор присвоєння (наприклад, <code> x += y</code>) не є ідентичним виразу, який він означає (в даному випадку <code>x = x + y</code>). Коли лівий операнд оператора присвоєння сам містить оператор присвоєння, лівий операнд обчислюється лише один раз. Наприклад:</p> - -<pre class="brush: js">a[i++] += 5 // i обчислюється лише один раз -a[i++] = a[i++] + 5 // i обчислюється двічі -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div class="hidden"> -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<div id="compat-mobile"></div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичні оператори</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html deleted file mode 100644 index a41371e7c0..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ /dev/null @@ -1,562 +0,0 @@ ---- -title: Бітові оператори -slug: >- - conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -tags: - - JavaScript - - Довідка - - Оператор -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Бітові оператори</strong> опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові чи вісімкові <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> - - - -<p>Наступна таблиця наводить перелік бітових операторів JavaScript:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Оператор</th> - <th>Застосування</th> - <th>Опис</th> - </tr> - <tr> - <td><a href="#Побітове_І">Побітове І (AND)</a></td> - <td><code>a & b</code></td> - <td>Повертає <code>1</code> на кожній позиції, де відповідні біти обох операндів дорівнюють <code>1</code>.</td> - </tr> - <tr> - <td><a href="#Побітове_АБО">Побітове АБО (OR)</a></td> - <td><code>a | b</code></td> - <td>Повертає <code>1</code> на кожній позиції, де відповідні біти одного чи обох операндів дорівнюють <code>1</code>.</td> - </tr> - <tr> - <td><a href="#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td> - <td><code>a ^ b</code></td> - <td>Повертає <code>1</code> на кожній позиції, де відповідний біт одного з двох, але не обох, операндів дорівнює <code>1</code>.</td> - </tr> - <tr> - <td><a href="#Побітове_НЕ">Побітове НЕ (NOT)</a></td> - <td><code>~ a</code></td> - <td>Виконує інверсію бітів операнду.</td> - </tr> - <tr> - <td><a href="#<<_Лівий_зсув">Лівий зсув</a></td> - <td><code>a << b</code></td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів ліворуч, заповнюючи позиції справа нулями.</td> - </tr> - <tr> - <td><a href="#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td> - <td><code>a >> b</code></td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів праворуч, відкидаючи зсунуті біти.</td> - </tr> - <tr> - <td><a href="#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td> - <td><code>a >>> b</code> </td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td> - </tr> - </tbody> -</table> - -<h2 id="32-бітні_цілі_числа_зі_знаком">32-бітні цілі числа зі знаком</h2> - -<p>Операнди усіх бітових операторів перетворюються на 32-бітні цілі числа зі знаком у <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%B2%D0%BD%D1%8F%D0%BB%D1%8C%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%B4">форматі доповняльного коду</a>, окрім оператора правого зсуву із заповненням нулями, який повертає беззнакове ціле 32-бітне число. Формат доповняльного коду означає, що від'ємний еквівалент числа (наприклад, 5 та -5) - це інвертовані біти числа (побітове НЕ, або обернений код числа) плюс один. Для прикладу, наступний код представляє ціле число 314:</p> - -<pre class="brush: js">00000000000000000000000100111010 -</pre> - -<p>Наступний код представляє <code>~314</code>, тобто, обернений код числа <code>314</code>:</p> - -<pre class="brush: js">11111111111111111111111011000101 -</pre> - -<p>Нарешті, наступний код представляє доповняльний код числа <code>-314</code>:</p> - -<pre class="brush: js">11111111111111111111111011000110 -</pre> - -<p>Доповняльний код гарантує, що лівий біт дорівнює 0, коли число є додатним, і 1, коли число є від'ємним. Тому він відомий як <em>знаковий біт</em>.</p> - -<p>Число <code>0</code> є цілим числом, усі біти якого дорівнюють 0.</p> - -<pre class="brush: js">0 (основа 10) = 00000000000000000000000000000000 (основа 2) -</pre> - -<p>Число <code>-1</code> є цілим числом, усі біти якого дорівнюють 1.</p> - -<pre class="brush: js">-1 (основа 10) = 11111111111111111111111111111111 (основа 2) -</pre> - -<p>Число <code>-2147483648</code> (шістнадцяткове представлення: <code>-0x80000000</code>) є цілим числом, усі біти якого дорівнюють 0, окрім першого (старшого) біта.</p> - -<pre class="brush: js">-2147483648 (основа 10) = 10000000000000000000000000000000 (основа 2) -</pre> - -<p>Число <code>2147483647</code> (шістнадцяткове представлення: <code>0x7fffffff</code>) є цілим числом, усі біти якого дорівнюють 1, окрім першого (старшого) біта.</p> - -<pre class="brush: js">2147483647 (основа 10) = 01111111111111111111111111111111 (основа 2) -</pre> - -<p>Числа <code>-2147483648</code> та <code>2147483647</code> є мінімальним та максимальним цілими числами, які можуть бути представлені 32-бітним знаковим числом.</p> - -<h2 id="Побітові_логічні_оператори">Побітові логічні оператори</h2> - -<p>Концептуально побітові логічні оператори працюють наступним чином:</p> - -<ul> - <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число: - <pre class="brush: js">До: 11100110111110100000000000000110000000000001 -Після: 10100000000000000110000000000001</pre> - </li> - <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li> - <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li> -</ul> - -<h3 id="Побітове_І"><a id="Bitwise_AND" name="Bitwise_AND">& (Побітове І)</a></h3> - -<p>Виконує операцію І (AND) над кожною парою бітів. <code>a</code> І <code>b</code> дає 1 тільки якщо обидва, <code>a</code> та <code>b</code>, дорівнюють <code>1</code>. Таблиця істинності для операції <code>І</code> наступна:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) - 14 (основа 10) = 00000000000000000000000000001110 (основа 2) - -------------------------------- -14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10) -</pre> - -<p>Побітове І над будь-яким числом <code>x</code> та <code>0</code> дає <code>0</code>.</p> - -<h3 id="Побітове_АБО"><a id="Bitwise_OR" name="Bitwise_OR">| (Побітове АБО)</a></h3> - -<p>Виконує операцію АБО (OR) над кожною парою бітів. <code>a</code> АБО <code>b</code> дає 1, якщо або <code>a</code>, або <code>b</code> дорівнює <code>1</code>. Таблиця істинності для операції <code>АБО</code> наступна:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) - 14 (основа 10) = 00000000000000000000000000001110 (основа 2) - -------------------------------- -14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10) -</pre> - -<p>Побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає <code>x</code>.</p> - -<h3 id="Виключне_побітове_АБО"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (Виключне побітове АБО)</a></h3> - -<p>Виконує операцію виключного АБО (XOR) над кожною парою бітів. <code>a</code> викл. АБО <code>b</code> дає 1, якщо <code>a</code> та <code>b</code> є різними. Таблиця істинності для операції <code>XOR</code> наступна:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) - 14 (основа 10) = 00000000000000000000000000001110 (основа 2) - -------------------------------- -14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10) -</pre> - -<p>Виключне побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає x.</p> - -<h3 id="Побітове_НЕ"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (Побітове НЕ)</a></h3> - -<p>Виконує операцію НЕ над кожним бітом. НЕ <code>a</code> повертає інвертоване значення (або обернений код) операнду <code>a</code>. Таблиця істинності для операції <code>НЕ</code> наступна:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> 9 (основа 10) = 00000000000000000000000000001001 (основа 2) - -------------------------------- -~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10) -</pre> - -<p>Побітове НЕ над будь-яким числом <code>x</code> дає <code>-(x + 1)</code>. Наприклад, <code>~-5</code> дорівнює <code>4</code>.</p> - -<p>Зауважте, що через використання 32-бітного представлення чисел і <code>~-1</code>, і <code>~4294967295</code> (2<sup>32</sup>-1) повернуть <code>0</code>.</p> - -<h2 id="Оператори_бітового_зсуву">Оператори бітового зсуву</h2> - -<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p> - -<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа у порядку від старшого до молодшого байту та повертають результат того самого типу, до якого належить лівий операнд. Лише молодші п'ять бітів правого операнду будуть використані.</p> - -<h3 id="<<_Лівий_зсув"><a id="Left_shift" name="Left_shift"><< (Лівий зсув)</a></h3> - -<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p> - -<p>Наприклад, <code>9 << 2</code> дорівнює 36:</p> - -<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) - -------------------------------- -9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10) -</pre> - -<p>Бітовий зсув будь-якого числа <code>x</code> ліворуч на <code>y</code> бітів дорівнює <code>x * 2 ** y</code>.<br> - Отже, для прикладу: <code>9 << 3</code> можна перекласти як: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p> - -<h3 id=">>_Правий_зсув_з_розширенням_знаку"><a id="Right_shift" name="Right_shift">>> (Правий зсув з розширенням знаку)</a></h3> - -<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".</p> - -<p>Наприклад, <code>9 >> 2</code> дорівнює 2:</p> - -<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) - -------------------------------- -9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10) -</pre> - -<p>Аналогічно, <code>-9 >> 2</code> дорівнює <code>-3</code>, оскільки знак зберігається:</p> - -<pre class="brush: js">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) - -------------------------------- --9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (основа 10) -</pre> - -<h3 id=">>>_Правий_зсув_із_заповненням_нулями"><a id="Unsigned_right_shift" name="Unsigned_right_shift">>>> (Правий зсув із заповненням нулями)</a></h3> - -<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p> - -<p>Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, <code>9 >>> 2</code> дорівнює 2, так само, як <code>9 >> 2</code>:</p> - -<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) - -------------------------------- -9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10) -</pre> - -<p>Однак, це не одне й те саме для від'ємних чисел. Наприклад, <code>-9 >>> 2</code> поверне 1073741821, що відрізняється від <code>-9 >> 2</code> (що дорівнює <code>-3</code>):</p> - -<pre class="brush: js">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) - -------------------------------- --9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10) -</pre> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Прапори_та_бітові_маски">Прапори та бітові маски</h3> - -<p>Побітові логічні оператори часто використовуються для створення, маніпулювання та читання послідовностей <em>прапорів</em>, які грають роль двійкових змінних. Замість цих послідовностей можуть використовуватись зміні, але двійкові прапори займають набагато менше пам'яті (у 32 рази).</p> - -<p>Припустимо, є 4 прапори:</p> - -<ul> - <li>прапор A: ми маємо проблему з мурахами</li> - <li>прапор B: ми маємо кажана</li> - <li>прапор C: ми маємо кота</li> - <li>прапор D: ми маємо качку</li> -</ul> - -<p>Ці прапори представлені послідовністю бітів: DCBA. Коли прапор <em>встановлений</em>, він має значення 1. Коли прапор <em>очищений</em>, він має значення 0. Припустимо, змінна <code>flags</code> має двійкове значення 0101:</p> - -<pre class="brush: js">var flags = 5; // двійкове значення 0101 -</pre> - -<p>Це значення вказує:</p> - -<ul> - <li>прапор A дорівнює true (ми маємо проблему з мурахами);</li> - <li>прапор B дорівнює false (ми не маємо кажана);</li> - <li>прапор C дорівнює true (ми маємо кота);</li> - <li>прапор D дорівнює false (ми не маємо качки);</li> -</ul> - -<p>Оскільки бітові операнди 32-бітні, 0101 насправді дорівнює 00000000000000000000000000000101, але нулями попереду можна знехтувати, оскільки вони не містять корисної інформації.</p> - -<p><em>Бітова маска</em> - це послідовність бітів, які можуть маніпулювати прапорами та/або читати їх. Зазвичай, визначається "примітивна" бітова маска для кожного прапора:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>Нові бітові маски можуть створюватись застовуванням побітових логічних операторів до цих примітивних бітових масок. Наприклад, бітова маска 1011 може бути створена операцією АБО з прапорів FLAG_A, FLAG_B та FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Індивідуальні значення прапорів можна витягнути застосуванням операції І до них та бітової маски, де кожний біт, що має значення один, "витягне" відповідний прапор. Бітова маска <em>маскує</em> невідповідні прапори, об'єднуючи їх операцією І з нулями (звідси термін "бітова маска"). Наприклад, бітову маску 0100 можна використати, щоб побачити, чи встановлений прапор C:</p> - -<pre class="brush: js">// якщо ми маємо кота -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // зробити щось -} -</pre> - -<p>Бітова маска з кількома встановленими прапорами діє як "або/або". Для прикладу, наступні два фрагменти еквівалентні:</p> - -<pre class="brush: js">// якщо ми маємо кажана або ми маємо кота -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // зробити щось -} -</pre> - -<pre class="brush: js">// якщо ми маємо кажана або кота -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // зробити щось -} -</pre> - -<p>Прапори можна встановити, об'єднавши їх операцією АБО з бітовою маскою, де кожний біт, що має значення один, встановить відповідний прапор, якщо прапор ще не встановлений. Наприклад, бітову маску 1100 можна використати, щоб встановити прапори C та D:</p> - -<pre class="brush: js">// так, ми маємо кота та качку -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Прапори можна очистити, об'єднавши їх операцією І з бітовою маскою, де кожний біт, що має значення нуль, очистить відповідний прапор, якщо він ще не очищений. Ця бітова маска може бути створена застосуванням операції НЕ до примітивних бітових масок. Наприклад, бітову маску 1010 можна використати, щоб очистити прапори A та C:</p> - -<pre class="brush: js">// ні, ми не маємо проблеми з мурахами або кота -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Маску також можна створити за допомогою <code>~FLAG_A & ~FLAG_C</code> (правило де Моргана):</p> - -<pre class="brush: js">// ні, ми не маємо проблеми з мурахами і ми не маємо кота -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Прапори можна перемикати, об'єднуючи їх операцією виключне АБО з бітовою маскою, де кожний біт, що має значення один, переключить відповідний прапор. Наприклад, бітову маску 0110 можна використати, щоб переключити прапори B та C:</p> - -<pre class="brush: js">// якщо ми не мали кажана, тепер ми його маємо, -// а якщо він в нас був, бувай, кажанчику -// те саме для котів -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Нарешті, усі прапори можна перевернути оператором НЕ:</p> - -<pre class="brush: js">// входимо у паралельний всесвіт... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Перетворення_типів">Перетворення типів</h3> - -<p>Перетворити двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code> на десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code>:</p> - -<pre class="brush: js">var sBinString = '1011'; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // виводить 11, тобто 1011 -</pre> - -<p>Перетворити десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code> на двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // виводить 1011, тобто 11 -</pre> - -<h3 id="Автоматизація_створення_маски">Автоматизація створення маски</h3> - -<p>Ви можете створювати маски з набору <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих</a></code> значень наступним чином:</p> - -<pre class="brush: js">function createMask() { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, тобто: 1011 -var mask2 = createMask(false, false, true); // 4, тобто: 0100 -var mask3 = createMask(true); // 1, тобто: 0001 -// і т.д. - -alert(mask1); // виводить 11, тобто: 1011 -</pre> - -<h3 id="Зворотний_алгоритм_отримання_масиву_булевих_значень_з_маски">Зворотний алгоритм: отримання масиву булевих значень з маски</h3> - -<p>Якщо ви бажаєте створити <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масив</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code> з маски, можете скористатись цим кодом:</p> - -<pre class="brush: js">function arrayFromMask(nMask) { - // Значенння nMask має бути між -2147483648 та 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError('arrayFromMask - out of range'); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert('[' + array1.join(', ') + ']'); -// виводить "[true, true, false, true]", тобто: 11, тобто: 1011 -</pre> - -<p>Ви можете перевірити обидва алгоритми одночасно…</p> - -<pre class="brush: js">var nTest = 19; // наша користувацька маска -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>Суто з навчальною метою (оскільки існує метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code>) ми показуємо, як можна модифікувати алгоритм <code>arrayFromMask</code> для створення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядка</a></code>, що містить двійкове представлення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>, а не <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масиву</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code>:</p> - -<pre class="brush: js">function createBinaryString(nMask) { - // Значення nMask має бути між -2147483648 та 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// виводить 00000000000000000000000000001011, тобто 11 -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Двійкові побітові оператори</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div class="hidden"> -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html b/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html deleted file mode 100644 index 1313c5b9c6..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Оператори порівняння -slug: >- - conflicting/Web/JavaScript/Reference/Operators_a8aa9ce42ce1749862961c61113d120b -tags: - - JavaScript - - Довідка - - Оператор -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Оператори_порівняння ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript має як строге порівняння, так і порівняння з перетворенням типів. Строге порівняння (<code>===</code>) є істинним лише в тому випадку, якщо операнди мають однаковий тип, а їхній зміст співпадає. Найчастіше вживане абстрактне порівняння (<code>==</code>) приводить операнди до спільного типу перед виконанням порівняння. Для абстрактних порівнянь (наприклад, <code><=</code>) операнди спочатку приводяться до простих типів, потім приводяться до спільного типу, а вже тоді порівнюються.</p> - -<p>Рядки порівнюються на основі стандартного лексикографічного упорядкування, використовуючи значення Unicode.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</p> - -<div class="hidden"> -<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> -</div> - -<p>Особливості порівнянь:</p> - -<ul> - <li>Два рядки строго рівні, якщо мають однакову послідовність символів, однакову довжину та однакові символи на відповідних позиціях.</li> - <li>Два числа строго рівні, якщо вони чисельно рівні (мають однакове числове значення). <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не дорівнює нічому, в тому числі NaN. Додатні та від'ємні нулі дорівнюють один одному.</li> - <li>Два булеві операнди строго рівні, якщо обидва є <code>true</code>, або обидва є <code>false</code>.</li> - <li>Два окремі об'єкти ніколи не є рівними ні при строгому, ні при абстрактному порівнянні.</li> - <li>Вираз, що порівнює об'єкти, істинний лише тоді, коли операнди посилаються на один і той самий об'єкт.</li> - <li>Типи Null та Undefined строго рівні собі та абстрактно рівні один одному.</li> -</ul> - -<h2 id="Оператори_рівності">Оператори рівності</h2> - -<h3 id="Рівність"><a name="Equality">Рівність (==)</a></h3> - -<p>Оператор рівності перетворює операнди, якщо вони <strong>не однакового типу</strong>, і після цього застосовує строге порівняння. Якщо <strong>обидва операнди є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є рівними, якщо операнди посилаються на один і той самий об'єкт у пам'яті.</p> - -<h4 id="Синтаксис">Синтаксис</h4> - -<pre class="syntaxbox">x == y -</pre> - -<h4 id="Приклади">Приклади</h4> - -<pre class="brush: js">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1.key == object2.key // true -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Нерівність_!"><a name="Inequality">Нерівність (!=)</a></h3> - -<p>Оператор нерівності повертає <em>true</em>, якщо операнди не є рівними. Якщо два операнда <strong>не належать до одного типу</strong>, JavaScript намагається привести операнди до відповідного типу для порівняння. Якщо <strong>обидва операнда є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є нерівними, якщо операнди посилаються на різні об'єкти у пам'яті.</p> - -<h4 id="Синтаксис_2">Синтаксис</h4> - -<pre class="syntaxbox">x != y</pre> - -<h4 id="Приклади_2">Приклади</h4> - -<pre class="brush: js">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Ідентичність_строга_рівність"><a name="Identity">Ідентичність / строга рівність (===)</a></h3> - -<p>Оператор ідентичності повертає true, якщо операнди строго рівні (див. вище) <strong>без приведення типів</strong>. </p> - -<h4 id="Синтаксис_3">Синтаксис</h4> - -<pre class="syntaxbox">x === y</pre> - -<h4 id="Приклади_3">Приклади</h4> - -<pre class="brush: js ">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 //false</pre> - -<h3 id="Неідентичність_строга_нерівність_!"><a name="Nonidentity">Неідентичність / строга нерівність (!==)</a></h3> - -<p>Оператор неідентичності повертає true, якщо операнди <strong>не є рівними та/або не однакового типу</strong>.</p> - -<h4 id="Синтаксис_4">Синтаксис</h4> - -<pre class="syntaxbox">x !== y</pre> - -<h4 id="Приклади_4">Приклади</h4> - -<pre class="brush: js">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Оператори_відношення">Оператори відношення</h2> - -<p>Кожен з цих операторів буде <a href="/uk/docs/Glossary/Type_coercion">примусово приведений</a> до простої величини перед порівнянням. Якщо обидва перетворюються на рядки, вони порівнюються з використанням лексикографічного порядку, інакше вони будуть перетворені на числа для порівняння. Порівняння із <code>NaN</code> завжди поверне <code>false</code>.</p> - -<h3 id="Більше_ніж_>"><a name="Greater_than_operator">Більше ніж (>)</a></h3> - -<p>Оператор <em>більше ніж </em>повертає true, якщо значення лівого операнда більше за значення правого операнда.</p> - -<h4 id="Синтаксис_5">Синтаксис</h4> - -<pre class="syntaxbox">x > y</pre> - -<h4 id="Приклади_5">Приклади</h4> - -<pre class="brush: js">4 > 3 // true -</pre> - -<h3 id="Більше_чи_дорівнює_>"><a name="Greater_than_or_equal_operator">Більше чи дорівнює (>=)</a></h3> - -<p>Оператор <em>більше чи дорівнює</em> повертає true, якщо значення лівого операнда більше, або дорівнює значенню правого операнда.</p> - -<h4 id="Синтаксис_6">Синтаксис</h4> - -<pre class="syntaxbox"> x >= y</pre> - -<h4 id="Приклади_6">Приклади</h4> - -<pre class="brush: js">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Менше_ніж_<"><a name="Less_than_operator">Менше ніж (<)</a></h3> - -<p>Оператор <em>менше ніж</em> повертає true, якщо значення лівого операнда менше значення правого операнда.</p> - -<h4 id="Синтаксис_7">Синтаксис</h4> - -<pre class="syntaxbox"> x < y</pre> - -<h4 id="Приклади_7">Приклади</h4> - -<pre class="brush: js">3 < 4 // true -</pre> - -<h3 id="Менше_чи_дорівнює_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Менше чи дорівнює (<=)</a></h3> - -<p>Оператор <em>менше чи дорівнює</em> повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</p> - -<h4 id="Синтаксис_8">Синтаксис</h4> - -<pre class="syntaxbox"> x <= y</pre> - -<h4 id="Приклади_8">Приклади</h4> - -<pre class="brush: js">3 <= 4 // true -</pre> - -<h2 id="Застосування_операторів_порівняння">Застосування операторів порівняння</h2> - -<p>Стандартні оператори рівності (<code>==</code> та <code>!=</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">алгоритм абстрактної рівності</a> для порівняння двох операндів. Якщо операнди належать до різних типів, алгоритм спробує привести їх до спільного типу перед порівнянням; наприклад, у виразі <code>5 == '5'</code>, рядок праворуч буде приведений до {{jsxref("Число","числа")}} перед здійсненням порівняння.</p> - -<p>Оператори строгої рівності (<code>===</code> та <code>!==</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">алгоритм строгої рівності</a> та призначені для виконання перевірки рівності операндів одного типу. Якщо операнди належать до різних типів, результат завжди буде <code>false</code>, тому <code>5 !== '5'</code>.</p> - -<p>Використовуйте оператори строгого порівняння, якщо операнди мають належати до вказаного типу, як і їх значення, або, якщо конкретний тип операндів має значення. Інакше, використовуйте стандартні оператори рівності, які дозволяють перевіряти ідентичність двох операндів, навіть якщо вони не належать до одного типу.</p> - -<p>Коли в порівнянні застосовується перетворення типів (тобто, це не строге порівняння), JavaScript перетворює типи операндів {{jsxref ("String")}}, {{jsxref ("Число","Number")}}, {{jsxref ("Boolean" )}} або {{jsxref ("Object")}} наступним чином:</p> - -<ul> - <li>При порівнянні числа й рядка, рядок конвертується в числове значення. JavaScript намагається конвертувати число у рядковому літералі в значення типу <code>Number</code>. Спочатку математичне значення виводиться з рядкового літерала. Далі ця величина округлюється до найближчого значення типу <code>Number</code>.</li> - <li>Якщо один з операндів належить до типу <code>Boolean</code>, цей операнд конвертується у 1, якщо він дорівнює <code>true</code>, і у +0, якщо він дорівнює <code>false</code>.</li> - <li>Якщо об'єкт порівнюється з рядком або числом, JavaScript намагається повернути значення об'єкта за замовчуванням. Оператори намагаються перетворити об'єкти на просте значення, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">рядок</span></font> або <code>число</code>, використовуючи методи об'єктів <code>valueOf</code> та <code>toString</code>. Якщо спроба перетворення була невдалою, генерується помилка виконання.</li> - <li>Зауважте, що об'єкт перетворюється на просту величину тоді, й тільки тоді, коли порівнюється з простою величиною. Якщо обидва операнди є об'єктами, вони порівнюються як об'єкти, а тест на рівність істинний, тільки якщо вони обидва посилаються на один і той самий об'єкт.</li> -</ul> - -<div class="note"><strong>Заувага:</strong> Рядкові об'єкти є об'єктами типу Object, а не String! Об'єкти типу String використовуються рідко, а отже, наведені нижче результати можуть бути несподіваними:</div> - -<pre class="brush:js">// true, оскільки обидва операнди мають тип String (є рядковими примітивами): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false, оскільки a та b мають тип Object і посилаються на різні об'єкти -a == b - -// false, оскільки a та b мають тип Object і посилаються на різні об'єкти -a === b - -// true, оскільки a та 'foo' мають різні типи, але об'єкт (а) -// перетворюється на рядок 'foo' перед порівнянням -a == 'foo'</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення. Реалізовано у JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Додані оператори <code>===</code> та <code>!==</code> . Реалізовано у JavaScript 1.3</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Оператори рівності</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Оператори рівності</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Дано визначення у декільках секціях специфікації: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Оператори відношення</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Оператори рівності</a></td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - - - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">Перевірка на рівність та однаковість</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html deleted file mode 100644 index c2ae524fa3..0000000000 --- a/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: Логічні оператори -slug: >- - conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca -tags: - - JavaScript - - Оператор - - логічний -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&&</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> - - - -<h2 id="Опис">Опис</h2> - -<p>Логічні оператори описані у наведеній нижче таблиці (вирази <code><em>expr</em></code> можуть належати до будь-якого <a href="/uk/docs/Glossary/Data_structure">типу</a>, не лише булевого):</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Оператор</th> - <th>Синтаксис</th> - <th>Опис</th> - </tr> - <tr> - <td>Логічне І (<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>2</strong></code>; інакше, вертає <code>expr<strong>1</strong></code>.</td> - </tr> - <tr> - <td>Логічне АБО (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>1</strong></code>; інакше, вертає <code>expr<strong>2</strong></code>.</td> - </tr> - <tr> - <td>Логічне НЕ (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>Вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</td> - </tr> - </tbody> -</table> - -<p>Якщо значення може бути приведене до <code>true</code>, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p> - -<p>Приклади виразів, які можуть бути приведені до false:</p> - -<ul> - <li><code>null</code>;</li> - <li><code>NaN</code>;</li> - <li><code>0</code>;</li> - <li>порожній рядок (<code>""</code>, або <code>''</code>, або <code>``</code>);</li> - <li><code>undefined</code>.</li> -</ul> - -<p>Хоча оператори <code>&&</code> та <code>||</code> можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>.</p> - -<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3> - -<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p> - -<ul> - <li><code>(якийсь хибний вираз) && <em>expr</em></code> обчислюється як хибний вираз;</li> - <li><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</li> -</ul> - -<p>Коротке замикання означає, що наведені вирази <em>expr</em> <strong>не обчислюються</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <em>expr</em> є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p> - -<pre class="brush: js">function A(){ console.log('викликано A'); return false; } -function B(){ console.log('викликано B'); return true; } - -console.log( A() && B() ); -// виводить "викликано A" в результаті виклику функції, -// потім виводить false (що є результатом виклику оператора) - -console.log( B() || A() ); -// виводить "викликано B" в результаті виклику функції, -// потім виводить true (що є результатом виклику оператора) -</pre> - -<h3 id="Пріоритет_операторів">Пріоритет операторів</h3> - -<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&&</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p> - -<pre class="brush: js">true || false && false // вертає true, оскільки && виконується першим -(true || false) && false // вертає false, оскільки не можна застосувати пріоритет операторів</pre> - -<h3 id="Логічне_І"><a id="Logical_AND" name="Logical_AND">Логічне І (<code>&&</code>)</a></h3> - -<p>Наступний код наводить приклади оператора <code>&&</code> (логічне І).</p> - -<pre class="brush: js">a1 = true && true // t && t вертає true -a2 = true && false // t && f вертає false -a3 = false && true // f && t вертає false -a4 = false && (3 == 4) // f && f вертає false -a5 = 'Кіт' && 'Пес' // t && t вертає "Пес" -a6 = false && 'Кіт' // f && t вертає false -a7 = 'Кіт' && false // t && f вертає false -a8 = '' && false // f && f вертає "" -a9 = false && '' // f && f вертає false -</pre> - -<h3 id="Логічне_АБО"><a id="Logical_OR" name="Logical_OR">Логічне АБО (<code>||</code>)</a></h3> - -<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</p> - -<pre class="brush: js">o1 = true || true // t || t вертає true -o2 = false || true // f || t вертає true -o3 = true || false // t || f вертає true -o4 = false || (3 == 4) // f || f вертає false -o5 = 'Кіт' || 'Пес' // t || t вертає "Кіт" -o6 = false || 'Кіт' // f || t вертає "Кіт" -o7 = 'Кіт' || false // t || f вертає "Кіт" -o8 = '' || false // f || f вертає false -o9 = false || '' // f || f вертає "" -o10 = false || varObject // f || object вертає varObject -</pre> - -<div class="blockIndicator note"> -<p><strong>Заувага:</strong> Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке <em>хибне</em> значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">оператор null-об'єднання</a> (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).</p> -</div> - -<h3 id="Логічне_НЕ_!"><a id="Logical_NOT" name="Logical_NOT">Логічне НЕ (<code>!</code>)</a></h3> - -<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p> - -<pre class="brush: js">n1 = !true // !t вертає false -n2 = !false // !f вертає true -n3 = !'' // !f вертає true -n4 = !'Cat' // !t вертає false -</pre> - -<h4 id="Подвійне_НЕ_!!">Подвійне НЕ (<code>!!</code>)</h4> - -<p>Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p> - -<p>Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.</p> - -<pre class="brush: js">n1 = !!true // !!truthy вертає true -n2 = !!{} // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим... -n3 = !!(new Boolean(false)) // ...навіть об'єкти Boolean з false <em>.valueOf()</em>! -n4 = !!false // !!falsy вертає false -n5 = !!"" // !!falsy вертає false -n6 = !!Boolean(false) // !!falsy вертає false -</pre> - -<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3> - -<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4> - -<p>Наступна операція з <strong>булевими значеннями</strong>:</p> - -<pre class="brush: js">умова1 && умова2</pre> - -<p>завжди дорівнює:</p> - -<pre class="brush: js">!(!умова1 || !умова2)</pre> - -<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4> - -<p>Наступна операція з <strong>булевими значеннями</strong>:</p> - -<pre class="brush: js">умова1 || умова2</pre> - -<p>завжди дорівнює:</p> - -<pre class="brush: js">!(!умова1 && !умова2)</pre> - -<h4 id="Перетворення_НЕ">Перетворення НЕ</h4> - -<p>Наступна операція з <strong>булевими значеннями</strong>:</p> - -<pre class="brush: js">!!умова</pre> - -<p>завжди дорівнює:</p> - -<pre class="brush: js">умова</pre> - -<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3> - -<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись деяких правил.</p> - -<h4 id="Прибирання_вкладеного_І">Прибирання вкладеного І</h4> - -<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> - -<pre class="brush: js">умова1 || (умова2 && умова3)</pre> - -<p>завжди дорівнює:</p> - -<pre class="brush: js">умова1 || умова2 && умова3</pre> - -<h4 id="Прибирання_вкладеного_АБО">Прибирання вкладеного АБО</h4> - -<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> - -<pre class="brush: js">умова1 && (умова2 || умова3)</pre> - -<p>завжди дорівнює:</p> - -<pre class="brush: js">!(!умова1 || !умова2 && !умова3)</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бінарні логічні оператори</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Бінарні логічні оператори</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бінарні логічні оператори</a></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("javascript.operators.logical")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a></li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li> - <li>{{jsxref("Boolean")}}</li> - <li><a href="/uk/docs/Glossary/Truthy">Truthy</a></li> - <li><a href="/uk/docs/Glossary/Falsy">Falsy</a></li> -</ul> diff --git a/files/uk/conflicting/web/javascript/reference/statements/switch/index.html b/files/uk/conflicting/web/javascript/reference/statements/switch/index.html deleted file mode 100644 index d85d7dedc7..0000000000 --- a/files/uk/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Ключове слово <strong>default</strong> може використовуватись у двох ситуаціях у<strong> </strong>JavaScript: у конструкції {{jsxref("Statements/switch", "switch")}} або з оператором {{jsxref("Statements/export", "export")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - - - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>У конструкції {{jsxref("Statements/switch", "switch")}}:</p> - -<pre class="syntaxbox">switch (expression) { - case value1: - //Інструкції, що виконуються, коли значення expression дорівнює value1 - [break;] - default: - //Інструкції, що виконуються, коли жодне значення не дорівнює значенню expression - [break;] -}</pre> - -<p>З оператором {{jsxref("Statements/export", "export")}}:</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="Опис">Опис</h2> - -<p>Більш детально дивіться на сторінках</p> - -<ul> - <li>конструкції {{jsxref("Statements/switch", "switch")}} та</li> - <li>оператора {{jsxref("Statements/export", "export")}}.</li> -</ul> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Використання_default_у_конструкціях_switch">Використання <code>default</code> у конструкціях <code>switch</code></h3> - -<p>У наступному прикладі, якщо <code>expr</code> оцінюється як "Апельсини" або "Яблука", програма зайде або у блок case "Апельсини", або у "Яблука" та виконає відповідну інструкцію. Ключове слово <code>default</code> допоможе у будь-якому іншому випадку та виконає пов'язану інструкцію.</p> - -<pre class="brush: js">switch (expr) { - case 'Апельсини': - console.log('Апельсини коштують $0.59 за кілограм.'); - break; - case 'Яблука': - console.log('Яблука коштують $0.32 за кілограм.'); - break; - default: - console.log('На жаль, в нас закінчились ' + expr + '.'); -}</pre> - -<h3 id="Використання_default_з_export">Використання <code>default</code> з <code>export</code></h3> - -<p>Якщо ви хочете експортувати єдине значення, або вам потрібне запасне значення модуля, можна використати default у export:</p> - -<pre class="brush: js">// module "my-module.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>Тоді у іншому скрипті буде прямий імпорт експорту за замовчуванням:</p> - -<pre class="brush: js">// module "another-module.js" -import cube from 'my-module'; //default export gave us the liberty to say import cube, instead of import cube from 'my-module' -console.log(cube(3)); // 27 -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Statements/export", "export")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/uk/glossary/404/index.html b/files/uk/glossary/404/index.html deleted file mode 100644 index cc3a56d14b..0000000000 --- a/files/uk/glossary/404/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: '404' -slug: Glossary/404 -tags: - - Інфраструктура - - Глосарій - - Навігація - - Помилки HTTP -translation_of: Glossary/404 ---- -<p>404 – Стандартний Код Відповіді, що означає що {{Glossary("Server", "сервер")}} не в змозі знайти запитуваний ресурс.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">перелік кодів відповідей HTTP</a></li> - <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">поради новачкам щодо уникання помилки 404</a></li> -</ul> diff --git a/files/uk/glossary/abstraction/index.html b/files/uk/glossary/abstraction/index.html deleted file mode 100644 index 22f96d1eb5..0000000000 --- a/files/uk/glossary/abstraction/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Абстракція -slug: Glossary/Abstraction -tags: - - Абстракція - - Мова Програмування - - Словник -translation_of: Glossary/Abstraction -original_slug: Glossary/Абстракція ---- -<p><strong>Абстрація</strong> у галузі {{Glossary("computer programming", "комп'ютерного програмування")}} є способом зменшення складності, що вможливлює підвищення ефективності розробки та втілення складних систем програмного забезпечення. Вона ховає технічну складність системи за простішими {{Glossary("API", "програмними інтерфейсами")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості"><strong>Загальні відомості</strong></h3> - -<ul> - <li>{{interwiki("wikipedia", "Abstraction (computer science)", "Абстракція")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/accessibility/index.html b/files/uk/glossary/accessibility/index.html deleted file mode 100644 index e48d539657..0000000000 --- a/files/uk/glossary/accessibility/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Веб-доступність (Web Accessibility) -slug: Glossary/Accessibility -tags: - - Доступність - - Словник -translation_of: Glossary/Accessibility -original_slug: Glossary/Веб_Доступність ---- -<p><em>Веб-доступність, або Доступність веб-сайтів </em>(<strong>Web Accesability, A11Y</strong>), відноситься до передового досвіду для використання веб-сайту, незважаючи на фізичні та технічні обмеження. Веб-доступність формально визначається й обговорюється на {{Glossary("W3C")}} з {{Glossary("WAI","Web Accessibility Initiative","Ініціатива веб-доступності")}} (WAI).</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/Accessibility">Ресурси щодо доступності на MDN</a></li> - <li>{{Interwiki("wikipedia", "Тестування_Веб-доступності","Веб-доступність (Web Accesability)")}} на Вікіпедія</li> -</ul> - -<h3 id="Дізнайтесь_про_веб-доступність">Дізнайтесь про веб-доступність</h3> - -<ul> - <li><a href="http://webaim.org/" rel="external">Доступність веб-сайтів</a></li> -</ul> - -<h3 id="Технічні_посилання">Технічні посилання</h3> - -<ul> - <li><a href="/uk/docs/Web/Accessibility/ARIA">ARIA документація на MDN</a></li> - <li><a href="http://www.w3.org/WAI/" rel="external">Головна сторінка The Web Accessibility Initiative</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">Рекомендації використання WAI-ARIA</a></li> -</ul> diff --git a/files/uk/glossary/adobe_flash/index.html b/files/uk/glossary/adobe_flash/index.html deleted file mode 100644 index c65ac7cf5f..0000000000 --- a/files/uk/glossary/adobe_flash/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Adobe Flash -slug: Glossary/Adobe_Flash -tags: - - Flash - - Інфраструктура - - Словник -translation_of: Glossary/Adobe_Flash ---- -<p>Flash це застаріваюча технологія розроблена Adobe, котра робить можливими багаті Веб застосунки, векторну графіку та мультимедіа. Для того, аби мати можливість користуватись Flash, необхідно скачати правильний плагін для {{Glossary("Browser","веб переглядача")}}.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li><a href="https://www.adobe.com/products/flashruntimes.html">Офіційний веб-сайт</a></li> - <li><a href="https://mozilla.github.io/shumway/">Shumway, безкоштовна імплементація від Mozilla</a></li> - <li><a href="http://gnashdev.org/">Gnash, безкоштовна імплементація від GNU</a></li> -</ul> diff --git a/files/uk/glossary/ajax/index.html b/files/uk/glossary/ajax/index.html deleted file mode 100644 index bfe326f0d8..0000000000 --- a/files/uk/glossary/ajax/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: AJAX -slug: Glossary/AJAX -tags: - - AJAX - - Інфраструктура - - Глосарій -translation_of: Glossary/AJAX ---- -<p>AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) є практикою програмування з комбінування {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, моделі {{glossary("DOM")}}, і <code>XMLHttpRequest</code> {{glossary("object","об'єкт")}} для побудови більш складних та динамічних сторінок. AJAX дозволяє оновлювати лише частини веб-сторінок замість того, щоб перезавантажувати сторінку повністю. Також AJAX дає можливість працювати асинхронно: JavaScript продовжує працювати, поки частина сторінки намагається оновитися (на відміну від синхронного способу, який заблокує виконання будь-якого коду до закінчення перезавантаження сторінки).</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{interwiki("wikipedia", "AJAX")}} на Вікіпедія</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li>Об'єкт {{domxref("XMLHttpRequest")}}.</li> - <li><a href="/uk/docs/AJAX">Документація AJAX на MDN</a></li> -</ul> diff --git a/files/uk/glossary/algorithm/index.html b/files/uk/glossary/algorithm/index.html deleted file mode 100644 index 84691c54bc..0000000000 --- a/files/uk/glossary/algorithm/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Алгоритм -slug: Glossary/Algorithm -tags: - - Словник -translation_of: Glossary/Algorithm -original_slug: Glossary/Алгоритм ---- -<p><span class="seoSummary"><strong>Алгоритм</strong> — це впорядкована послідовність дієвказів (інструкцій), що має на меті розв'язання певної задачі.</span></p> - -<p>Зазвичай під цим поняттям мається на увазі саме стратегія розв'язання (алгоритм сортування, алгоритм пошуку). Натомість програмний код, що втілює ту чи ту стратегію, називають реалізацією алгоритму.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h4 id="Загальні_відомості">Загальні відомості</h4> - -<ul> - <li>{{Interwiki("wikipedia", "Алгоритм")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/alignment_container/index.html b/files/uk/glossary/alignment_container/index.html deleted file mode 100644 index cabd45b4b7..0000000000 --- a/files/uk/glossary/alignment_container/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Alignment container (Контейнер вирівнювання) -slug: Glossary/Alignment_Container -tags: - - CSS - - Вирівнювання - - Контейнер вирівнювання - - Словник -translation_of: Glossary/Alignment_Container ---- -<p><strong>Контейнер вирівнювання </strong>- це прямокутник в якому вирівнюється <a href="/uk/docs/Glossary/Alignment_Subject">об'єкт вирівнювання</a>. Це визначається режимом компонування; зазвичай це вирівнювання об'єкта, та допускання режиму запису для контейнера, що містить блок.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> -</ul> diff --git a/files/uk/glossary/alignment_subject/index.html b/files/uk/glossary/alignment_subject/index.html deleted file mode 100644 index b5dc16601d..0000000000 --- a/files/uk/glossary/alignment_subject/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Alignment subject (Предмет вирівнювання) -slug: Glossary/Alignment_Subject -tags: - - CSS - - Вирівнювання - - Предмет вирівнювання - - Словник -translation_of: Glossary/Alignment_Subject ---- -<p>В <a href="/uk/docs/Web/CSS/CSS_Box_Alignment">вирівнюванні блоків CSS</a> <strong>об'єкт вирівнювання</strong> це річь (або речі) вирівнювані за властивостями.</p> - -<p>Для {{cssxref("justify-self")}} і {{cssxref("align-self")}}, об'єкт вирівнювання запасний блок блоку на якому встановлено властивості, за допомогою режиму запису цього блоку.</p> - -<p>Для {{cssxref("justify-content")}} і {{cssxref("align-content")}}, режим запису блоку також використовується. Визначення об'єкта вирівнювання залежить від використовуваного режиму макета.</p> - -<dl> - <dt>Блокувати контейнери (включаючи чарунки таблиці)</dt> - <dd>Весь вміст блоку як єдине ціле.</dd> - <dt>Багатоколірні контейнери</dt> - <dd>Поля блоків, з будь-яким проміжком вставленим між полями блоків додаються до відповідних проміжків стовпців.</dd> - <dt>Гнучкі контейнери</dt> - <dd>Для {{cssxref("justify-content")}}, гнучкі елементи в кожній гнучкій лінії.<br> - Для {{cssxref("align-content")}}, гнучкі лінії. Зверніть увагу, що це впливає лише на багаторядкові гнучкі контейнери.</dd> - <dt>Контейнери сітки</dt> - <dd>Сітка доріжок у відповідній осі, з будь-яким проміжком, вставленим між доріжками, доданими до відповідних жолобів. Згорнуті жолоби розглядаються як єдина можливість вставки простору.</dd> -</dl> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<ul> - <li><a href="/uk/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> -</ul> diff --git a/files/uk/glossary/api/index.html b/files/uk/glossary/api/index.html deleted file mode 100644 index b863dfe685..0000000000 --- a/files/uk/glossary/api/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: API (Прикладний програмний інтерфейс) -slug: Glossary/API -tags: - - API - - Інфраструктура - - Словник -translation_of: Glossary/API ---- -<p><span class="seoSummary"><strong>Прикладний програмний інтерфейс</strong> (англ. <em>Application Programming Interface</em>, скорочено <em>API</em>) — це сукупність засобів та правил, що вможливлюють взаємодію між окремими складниками програмного забезпечення або між програмним та апаратним забезпечення.</span></p> - -<p>У царині веб-розробки поняття API охоплює низку засобів програмного коду (як-от {{glossary("method","методи")}}, події та {{Glossary("URL","посиланння")}}), що їх розробник може використовувати у власних застосунках задля взаємодії з програмним чи апаратним навкіллям — зі складниками веб-переглядача, іншим програмним чи апаратним забезпеченням комп'ютера користувача, або й навіть сторонніми сайтами чи службами.</p> - -<p>Наприклад:</p> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a> API можна використовувати для захоплення аудіо та відео з веб-камери користувача, які потім можна використовувати будь-яким способом, яким розробник захоче, наприклад, записувати відео та аудіо, передавати його іншому користувачеві в конференц-дзвінку або фотографувати зображення з відео.</li> - <li><a href="https://developer.mozilla.org/uk/docs/Web/API/Geolocation">Geolocation API</a> може використовуватися для отримання інформації про місцезнаходження з будь-якої служби, доступної користувачеві на своєму пристрої (наприклад, GPS), який потім можна використовувати разом з <a href="https://developers.google.com/maps/">Google Maps APIs</a> наприклад, для схеми розташування користувача на звичайній карті та показувати йому які туристичні пам'ятки знаходяться в їх районі.</li> - <li><a href="https://dev.twitter.com/overview/api">Twitter APIs</a> може використовуватися для отримання даних з облікових записів користувача Twitter, наприклад, для відображення останніх твітів на веб-сторінці.</li> - <li><a href="https://developer.mozilla.org/uk/docs/Web/API/Web_Animations_API">Web Animations API</a> можна використовувати для анімації частин веб-сторінки - наприклад, для переміщення або обертання зображень.</li> -</ul> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Прикладний_програмний_інтерфейс", "Прикладний програмний інтерфейс")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>Довідник з <a href="/uk/docs/Web/API">Web API</a></li> -</ul> diff --git a/files/uk/glossary/apple_safari/index.html b/files/uk/glossary/apple_safari/index.html deleted file mode 100644 index 7f4d82eef9..0000000000 --- a/files/uk/glossary/apple_safari/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Apple Safari -slug: Glossary/Apple_Safari -tags: - - Глосарій - - Навігація -translation_of: Glossary/Apple_Safari ---- -<p><a href="http://www.apple.com/safari/">Safari</a> (Сафарі) — це {{Glossary("Browser","веб-переглядач")}}, який розробляється компанією Apple. Його включено до операційних систем Mac OS X та iOS. Safari базується на рушії з відкритим програмним кодом "<a href="http://www.webkit.org/">WebKit</a>"</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Debugging/Debugging_Safari">Safari</a> на Вікіпедії</li> - <li><a href="http://www.apple.com/safari/" rel="external">Safari на apple.com</a></li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="http://www.webkit.org/">Проект WebKit</a></li> - <li><a href="http://nightly.webkit.org/" rel="external">Нічна сбірка WebKit</a></li> - <li><a href="https://bugs.webkit.org/" rel="external">Сповістити про баг у Safari</a></li> -</ul> diff --git a/files/uk/glossary/argument/index.html b/files/uk/glossary/argument/index.html deleted file mode 100644 index f68d539ca1..0000000000 --- a/files/uk/glossary/argument/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Арґумент -slug: Glossary/Argument -tags: - - JavaScript - - Словник -translation_of: Glossary/Argument -original_slug: Glossary/Арґумент ---- -<p><span class="seoSummary"><strong>Арґумент</strong> — це своєрідний тип {{Glossary("Variable", "змінної")}}, що дозволяє передавати до {{Glossary("Function", "функції")}} ({{Glossary("Method", "метода")}}) необхідні {{Glossary("value", "значення")}}, {{Glossary("Scope", "область видимості")}} яких не виходитиме за її (функції) межі.</span></p> - -<p>Поняття «<em>арґумент</em>» та «<em>параметр</em>» часто вживаються як взаємозамінні, а справжнє значення з'ясовується зі словесного оточення.</p> - -<p>Втім слово параметр (чи то пак «формальний параметр») часто вживається на позначення змінних, наведених в самому оголошенні функції, а натомість слово арґумент (або ж «фактичний арґумент») частіше позначає {{Glossary("Primitive", "прості величини")}} або {{Glossary("Object", "об'єкти")}} які фактично було передано до функції під час її виклику.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Параметр_(програмування)", "Параметр")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>Об'єкт {{jsxref("Functions/arguments", "arguments")}} у {{glossary("JavaScript")}}</li> -</ul> diff --git a/files/uk/glossary/array/index.html b/files/uk/glossary/array/index.html deleted file mode 100644 index 8231f64187..0000000000 --- a/files/uk/glossary/array/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Array -slug: Glossary/array -tags: - - JavaScript - - Глосарій - - Масив - - Словник -translation_of: Glossary/array ---- -<p><em>Масив</em> є упорядкованою сукупністю даних (або {{Glossary("primitive", "примітивних")}}, або {{Glossary("object", "об'єктів")}}, в залежності від мови). Масиви використовуються для зберігання множини значень у єдиній змінній. Для порівняння зі змінною, яка може зберігати лише одне значення.</p> - -<p>Кожен елемент у масиві має номер, що називається числовим індексом, який дозволяє звертатися до цього елемента. У {{glossary("JavaScript")}} масиви починаються з нульового індекса, ними можна маніпулювати за допомогою різних {{Glossary("Method", "методів")}}.</p> - -<p>Масив у JavaScript має наступний вигляд:</p> - -<pre class="brush: js"><code>var myArray = [1, 2, 3, 4]; -var catNamesArray = ["Мурко", "Сірко", "Василь"]; -//Масиви у JavaScript можуть містити різні типи данних, як показано вище.</code></pre> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Масив_(структура_даних)", "Масив")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>Javascript {{jsxref("Array")}} на MDN</li> -</ul> diff --git a/files/uk/glossary/ascii/index.html b/files/uk/glossary/ascii/index.html deleted file mode 100644 index 5b6e43134b..0000000000 --- a/files/uk/glossary/ascii/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ASCII -slug: Glossary/ASCII -tags: - - Словник -translation_of: Glossary/ASCII ---- -<p><strong>ASCII</strong> (англ. <em>American Standard Code for Information Interchange - </em>Американський стандартний код для інформаційного обміну) - один з найпопулярніших методів кодування, який використовується комп'ютерами для перетворення літер, чисел, знаків пунктуації та керуючих кодів у цифровий вигляд. З 2007 {{Glossary("UTF-8")}} витіснив його у Web.</p> - -<h2 id="Дізнатися_більше">Дізнатися більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<p>{{Interwiki("wikipedia", "ASCII")}} на Вікіпедії</p> diff --git a/files/uk/glossary/asynchronous/index.html b/files/uk/glossary/asynchronous/index.html deleted file mode 100644 index d3679facf4..0000000000 --- a/files/uk/glossary/asynchronous/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Асинхронність -slug: Glossary/Asynchronous -tags: - - Веб - - Словник - - асинхронність -translation_of: Glossary/Asynchronous ---- -<p><span class="seoSummary">Термін <strong>асинхронність</strong> означає два або більше об'єктів чи подій, які <strong>не</strong> існують/відбуваються одночасно (або декілька пов'язаних процесів, які відбуваються без очікування, поки попередній процес завершиться).</span> Для комп'ютерів слово "асинхронність" використовується у двох основних контекстах.</p> - -<dl> - <dt>Мережі та комунікації</dt> - <dd> - <p>Асинхронна комунікація - це метод обміну повідомленнями між двома або більшою кількістю сторін, коли кожна сторона отримує та обробляє повідомлення тоді, коли їй це зручно, а не негайно по отриманні. Додатково, повідомлення можуть відсилатися без очікування на підтвердження, з розумінням, що, якщо проблема виникне, одержувач відправить запит на виправлення, чи іншим чином розбереться з ситуацією.</p> - - <p>Для людей методом асинхронної комунікації є електронне листування; відправник надсилає лист, а отримувач прочитає його та відповість на повідомлення, коли йому буде зручно це зробити, замість того, щоб відповідати одразу. І обидві сторони продовжують відправляти та отримувати повідомлення, коли вони цього хочуть, замість того, щоб складати графік листування.</p> - - <p>Коли програмне забезпечення використовує асинхронну комунікацію, програма може зробити запит на отримання інформації від іншого програмного забезпечення (наприклад, сервера), та продовжувати робити щось інше, очікуючи на відповідь. Наприклад, техніка програмування <a href="/uk/docs/Web/Guide/AJAX">AJAX</a> (Asynchronous JavaScript and {{Glossary("XML")}}) — зазвичай, просто "Ajax", хоча зазвичай у сучасних застосунках {{Glossary("JSON")}} використовується замість XML — є механізмом, який робить запити на відносно невеликі об'єми даних від сервера, використовуючи {{Glossary("HTTP")}}, та отримує результат, коли той є доступним, а не миттєво.</p> - </dd> - <dt>Проектування програмного забезпечення</dt> - <dd> - <p>Проектування асинхронного програмного забезпечення розширює концепцію побудовою коду, який дозволяє програмі запросити виконання нової задачі паралельно з основною задачею (чи задачами), не зупиняючись на очікування, поки задача не буде виконана. Коли другорядна задача виконана, основна задача отримує повідомлення за допомогою узгодженого механізму, який повідомляє, що робота виконана, і що результат, якщо він є, тепер доступний.</p> - - <p>Існує ряд технік програмування для реалізації асинхронного програмного забезпечення. Для ознайомлення з темою дивіться статтю <a href="/uk/docs/Learn/JavaScript/Asynchronous">Асинхронність у JavaScript</a>.</p> - </dd> -</dl> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Отримання даних з сервера</a> (Навчальний розділ)</li> - <li>{{glossary("Synchronous","Синхронність")}}</li> -</ul> - -<p>{{IncludeSubnav("/uk/docs/Glossary")}}</p> diff --git a/files/uk/glossary/block/css/index.html b/files/uk/glossary/block/css/index.html deleted file mode 100644 index cd100989a6..0000000000 --- a/files/uk/glossary/block/css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Блок(Каскадні таблиці стилів) -slug: Glossary/Block/CSS -tags: - - CSS - - HTML - - Дизайн - - Скриптинг - - Словник -translation_of: Glossary/Block/CSS ---- -<p><strong>Блок </strong>на веб-сторінці це {{glossary("HTML")}} {{glossary("element","елемент")}}, який з'являється на новому рядку, тобто під попереднім елементом у горизонтальному розташуванні і над наступним елементом (загальновідомим як <em>блочний елемент</em>). Наприклад, {{htmlelement("p")}} за налаштуванням є блочним елементом, тоді як {{htmlelement("a")}} це <em>рядковий елемент</em> — ви можете написати декілька посилань поруч у вашому HTML і вони будуть розташовані поруч на одному рядку на сторінці в браузері.</p> - -<p>Використовуючи властивість {{cssxref("display")}} ви можете змінити <span class="tlid-translation translation" lang="uk"><span title="">чи елемент відображається в рядку або як блок (серед багатьох інших варіантів);</span> <span title="">блоки також підпадають під дію схем позиціонування та використання властивості</span></span> {{cssxref("position")}}.</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> -</ul> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div> diff --git a/files/uk/glossary/block/index.html b/files/uk/glossary/block/index.html deleted file mode 100644 index b582dc3189..0000000000 --- a/files/uk/glossary/block/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Блок -slug: Glossary/Block -tags: - - TopicStub - - Однозначність - - Словник -translation_of: Glossary/Block ---- -<p>Термін <strong>блок</strong> може мати кілька значень залежно від контексту. Він може стосуватись:</p> - -<dl> - <dt><strong><a href="/uk/docs/Glossary/Block/CSS">Блок(Каскадні таблиці стилів)</a></strong></dt> - <dd><strong>Блок </strong>на веб-сторінці це {{glossary("HTML")}} {{glossary("element","елемент")}}, який з'являється на новому рядку, тобто під попереднім елементом у горизонтальному розташуванні і над наступним елементом (загальновідомим як <em>блочний елемент</em>). Наприклад, {{htmlelement("p")}} за налаштуванням є блочним елементом, тоді як {{htmlelement("a")}} це <em>рядковий елемент</em> — ви можете написати декілька посилань поруч у вашому HTML і вони будуть розташовані поруч на одному рядку на сторінці в браузері.</dd> -</dl> - -<dl> - <dt><a href="/uk/docs//Glossary/Block/Скриптинг">Блок(Скриптинг)</a></dt> - <dd>В {{glossary("JavaScript")}}, блок - це сукупність пов'язаних {{glossary("statement","інструкцій")}} що вкладені в фігурні дужки ("\{\}"). Наприклад, Ви можете помістити блок інструкцій після блоку {{jsxref("Statements/if...else","if (condition)")}}, щоб інтепритатор виконав код в середині блоку, якщо умова правдива (true), або пропустив цілий клок, якщо умова хибна (false).</dd> -</dl> diff --git a/files/uk/glossary/block/scripting/index.html b/files/uk/glossary/block/scripting/index.html deleted file mode 100644 index 6807665f73..0000000000 --- a/files/uk/glossary/block/scripting/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Блок (Скриптинг) -slug: Glossary/Block/Scripting -tags: - - CodingScripting - - JavaScript - - Глосарій - - Словник -translation_of: Glossary/Block/Scripting -original_slug: Glossary/Block/Скриптинг ---- -<p>В {{glossary("JavaScript")}}, блок - це сукупність пов'язаних {{glossary("statement","інструкцій")}} що вкладені в фігурні дужки ("{}"). Наприклад, Ви можете помістити блок інструкцій після блоку {{jsxref("Statements/if...else","if (condition)")}}, щоб інтепритатор виконав код в середині блоку, якщо умова правдива (true), або пропустив цілий клок, якщо умова хибна (false).</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Дізнайтеся_про_це"><span class="tlid-translation translation" lang="uk"><span title="">Дізнайтеся про це</span></span></h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/block">Блок інструкцій в JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/boolean/index.html b/files/uk/glossary/boolean/index.html deleted file mode 100644 index 94fd29f1c8..0000000000 --- a/files/uk/glossary/boolean/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Boolean -slug: Glossary/Boolean -tags: - - Boolean - - CodingScripting - - JavaScript - - Мови програмування - - Словник - - Типи даних -translation_of: Glossary/Boolean ---- -<p><span class="seoSummary">У галузі комп'ютерних наук <strong>Boolean</strong> (укр. Булевий вираз) це логічний тип данних що може мати лише значення <code>true</code> ("вірний" або "так") або <code>false</code> ("помилковий" або "ні").</span> Наприклад, в JavaScript, Булеві умови часто використовуються для вирішення які секції коду виконувати (наприклад в <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/if...else">операторах if</a>) або повторити (наприклад в <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">циклах</a>).</p> - -<p>Нижче JavaScript псевдокод (це не дійсно виконуваний код), що демонструє цю концепцію.</p> - -<pre class="brush: js">/* JavaScript if statement */ -if (<em>boolean conditional</em>) { - // код виконується якщо умова вірна -} - -if (<em>boolean conditional</em>) { - console.log("boolean conditional resolved to true"); -} else { - console.log("boolean conditional resolved to false"); -} - - -/* JavaScript for loop */ -for (<em>control variable</em>; <em>boolean conditional</em>; <em>counter</em>) { - // код виконується повторно якщо умова вірна -} - -for (var i=0; i < 4; i++) { - console.log("I print only when the boolean conditional is true"); -} -</pre> - -<p>Булеве значення названо на честь англійського математика {{interwiki("wikipedia", "Джордж_Буль", "Джордж Буль")}} піонера на ниві математичної логіки.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Логічний_тип_даних", "Boolean")}} на Wikipedia</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>Глобальні об'єкти (або стандартні вбудовані об'єкти) JavaScript: {{jsxref("Boolean")}}</li> - <li><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/browser/index.html b/files/uk/glossary/browser/index.html deleted file mode 100644 index a93193d895..0000000000 --- a/files/uk/glossary/browser/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Переглядач -slug: Glossary/Browser -tags: - - Навігація - - Словник -translation_of: Glossary/Browser ---- -<p><strong>Переглядач</strong> (англ. browser) — програма, що отримує та показує сторінки з {{Glossary("World Wide Web","мережі")}}, та надає користувачам доступ до інших сторінок через {{Glossary("hyperlink","гіперпосилання")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Браузер", "Переглядач")}} у Вікіпедії</li> - <li><a href="http://www.evolutionoftheweb.com/" rel="external">Еволюція всесвітньої мережі</a></li> -</ul> - -<h3 id="Завантажити_переглядач">Завантажити переглядач</h3> - -<ul> - <li><a href="http://www.mozilla.org/en-US/firefox/features/">Mozilla Firefox</a></li> - <li><a href="http://www.google.com/chrome/" rel="external">Google Chrome</a></li> - <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li> - <li><a href="http://windows.microsoft.com/en-US/internet-explorer/browser-ie" rel="external" title="Не рекомендовано">Microsoft Internet Explorer</a></li> -</ul> diff --git a/files/uk/glossary/buffer/index.html b/files/uk/glossary/buffer/index.html deleted file mode 100644 index bb0c4d5613..0000000000 --- a/files/uk/glossary/buffer/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Буфер -slug: Glossary/buffer -tags: - - Буфер - - Кеш - - Словник -translation_of: Glossary/buffer -original_slug: Glossary/Буфер ---- -<p><strong>Буфер</strong> — це ділянка фізичної пам'яті (зазвичай, оперативної), що використовується для тимчасового зберігання даних на час їх передачі з одного місця (носія) в інше.</p> - -<p>Попри те, що поняття <em>буфер</em> і <em>кеш</em> певною мірою схожі, їх призначення істотно відрізняється. <em>Кеш</em> передбачає пришвидшення обчислень завдяки розміщенню у швидкій пам'яті даних, над якими здіснюються повторювані операції (читання або запис). Натомість <em>буфер</em> використовується в дещо інший спосіб й може стати в нагоді навіть тоді, коли треба здійснити лише одну операцію читання/запису:</p> - -<ul> - <li>узгодження швидкості читання/запису носіїв даних або середовищ їх передачі;</li> - <li>узгодження швидкості надходження даних із швидкістю їх обробки: - <ul> - <li>нагромадження даних, що потребують блокової обробки (шифрування, стиснення тощо);</li> - <li>тимчасове зберігання нових даних до завершення обробки попередніх;</li> - <li>забезпечення безперервності надходження даних (відтворення звуку або відео, друк, запис оптичних дисків тощо).</li> - </ul> - </li> - <li>поліпшення швидкодії внаслідок збільшення обсягу даних, що обробляються за одну операцію, та відповідним зменшенням кількості операцій (різною мірою характерне майже для будь-якого носія або середовища передачі даних, навіть оперативної пам'яті).</li> -</ul> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Буфер_(інформатика)", "Буфер")}} у Вікіпедії</li> - <li>{{Interwiki("wikipedia", "Кеш", "Кеш")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/cache/index.html b/files/uk/glossary/cache/index.html deleted file mode 100644 index 3f627b90c2..0000000000 --- a/files/uk/glossary/cache/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Cache -slug: Glossary/Cache -tags: - - HTTP - - Словник -translation_of: Glossary/Cache ---- -<p><strong>Cache </strong>(укр. <em>кеш</em>)<strong> </strong>(web cache або HTTP cache) <span lang="uk">це компонент, який тимчасово зберігає відповіді HTTP, щоб його можна було використовувати для наступних HTTP-запитів, якщо він відповідає певним умовам.</span></p> - -<p>.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<ul> - <li>{{interwiki("wikipedia", "Веб-кешування")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/callback_function/index.html b/files/uk/glossary/callback_function/index.html deleted file mode 100644 index e7b8948786..0000000000 --- a/files/uk/glossary/callback_function/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Функція зворотного виклику -slug: Glossary/Callback_function -tags: - - Словник - - Функція - - зворотний виклик -translation_of: Glossary/Callback_function ---- -<p>Функція зворотного виклику (callback function) - це функція, яка передається іншій функції в якості аргументу та викликається всередині зовнішньої функції для виконання певних дій.</p> - -<p>Ось швидкий приклад:</p> - -<pre class="brush: js">function greeting(name) { - alert('Привіт ' + name); -} - -function processUserInput(callback) { - var name = prompt("Будь ласка, введіть своє ім'я."); - callback(name); -} - -processUserInput(greeting);</pre> - -<p>Наведений приклад є {{glossary("synchronous","синхронним")}} зворотним викликом, так як він виконується негайно.</p> - -<p>Зауважте, однак, що функції зворотного виклику часто використовуються, щоб продовжувати виконання коду після завершення {{glossary("asynchronous","асинхронної")}} операції — вони називаються асинхронними функціями зворотного виклику. Гарним прикладом є фукнція зворотного виклику, що виконується всередині блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">.then()</a></code>, приєднаного в кінець проміса, після чого проміс вирішується або відхиляється. Ця структура використовується у багатьох сучасних веб API, таких як <code><a href="/uk/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>.</p> - -<h2 id="Дізнайтесь_більше"><strong>Дізнайтесь більше</strong></h2> - -<h3 id="Загальні_відомості"><strong>Загальні відомості</strong></h3> - -<ul> - <li>{{interwiki("wikipedia", "Callback_(програмування)", "Callback")}} на Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/canvas/index.html b/files/uk/glossary/canvas/index.html deleted file mode 100644 index 3c7c015253..0000000000 --- a/files/uk/glossary/canvas/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Canvas -slug: Glossary/Canvas -translation_of: Glossary/Canvas ---- -<p>{{Glossary("HTML")}} <em>{{HTMLElement("canvas")}}</em> елемент, що забезпечує порожнє графічне поле, на котрому певні {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} можуть малювати (такі як Canvas 2D чи {{Glossary("WebGL")}}).</p> - -<h2 id="Вивчіть_більше">Вивчіть більше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Canvas element", "Canvas")}} на Вікіпедії</li> -</ul> - -<h3 id="Навчаьні_джерела">Навчаьні джерела</h3> - -<ul> - <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial">The Canvas tutorial on MDN</a></li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li>The HTML {{HTMLElement("canvas")}} елемент на MDN</li> - <li><a href="/en-US/docs/HTML/Canvas">The Canvas general documentation on MDN</a></li> - <li>{{domxref("CanvasRenderingContext2D")}}: Canvas 2D малювальне API</li> - <li><a href="http://www.w3.org/TR/2dcontext/" rel="external">The Canvas 2D API specification</a></li> -</ul> diff --git a/files/uk/glossary/character/index.html b/files/uk/glossary/character/index.html deleted file mode 100644 index fdf8c95d6d..0000000000 --- a/files/uk/glossary/character/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Символ -slug: Glossary/Character -tags: - - Словник - - рядки -translation_of: Glossary/Character ---- -<p><em>Символом</em> може бути літера, число, знак пунктуації або недруковані керуючі символи (наприклад, повернення каретки або знак м'якого переносу). {{glossary("UTF-8")}} - найбільш поширений набір символів, який включає графеми найпопулярніших мов.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "Символьний тип даних")}} на Вікіпедії</li> - <li>{{interwiki("wikipedia", "Кодування символів")}} на Вікіпедії</li> - <li>{{interwiki("wikipedia", "ASCII")}} на Вікіпедії</li> - <li>{{interwiki("wikipedia", "UTF-8")}} на Вікіпедії</li> - <li>{{interwiki("wikipedia", "Юнікод")}} на Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/character_encoding/index.html b/files/uk/glossary/character_encoding/index.html deleted file mode 100644 index 0639646a48..0000000000 --- a/files/uk/glossary/character_encoding/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Кодування символів -slug: Glossary/character_encoding -tags: - - Словник -translation_of: Glossary/character_encoding ---- -<p>Кодування визначає співвідношення між байтами та текстом. Послідовність байтів допускає різні текстові інтерпретації. Вказуючи певне кодування (наприклад, UTF-8), ми вказуємо, як інтерпретувати послідовність байтів.</p> - -<p>Наприклад, у HTML ми зазвичай оголошуємо кодування UTF-8, за допомогою наступного рядка:</p> - -<div class="example"> -<pre class="brush: html"><code><meta charset="utf-8"></code></pre> - -<p>Це гарантує, що ви зможете використовувати символи практично будь-якої людської мови у своєму HTML-документі, і вони будуть коректно відображені.</p> -</div> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://www.w3.org/International/articles/definitions-characters/index.uk">Кодування символів на W3C</a></li> - <li>{{Interwiki("wikipedia", "Кодування символів")}} на Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/cipher/index.html b/files/uk/glossary/cipher/index.html deleted file mode 100644 index 99e0930a41..0000000000 --- a/files/uk/glossary/cipher/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Шифр -slug: Glossary/Cipher -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cipher -original_slug: Glossary/Шифр ---- -<p><span class="seoSummary">В {{glossary("Криптографія","криптографії")}}, <strong>шифр</strong> це алгоритм, що спроможний {{glossary("encryption", "шифрувати")}} {{glossary("cleartext","відкритий текст")}} і зробити його нечитабельним, та {{glossary("decryption", "дешифрувати")}} його назад.</span></p> - -<p id="In-depth">Шифри набули широкої росповсюдженості ще до інформаційної ери (наприклад, <a href="https://en.wikipedia.org/wiki/Substitution_cipher">шифри підстановки</a>, <a href="https://en.wikipedia.org/wiki/Transposition_cipher">шифри транспозиції</a> та <a href="https://en.wikipedia.org/wiki/Permutation_cipher">шифри перестановки</a>), але жоден з них не був криптографічно безпечним, окрім <a href="https://en.wikipedia.org/wiki/One-time_pad">Шифра Вернама</a>.</p> - -<p>Сучасні шифри спроектовані щоб протистояти {{glossary("attack", "атакам")}} розробленим {{glossary("cryptanalysis", "криптоаналітиками")}}. Немає гарантій, що всі методи атак були відкриті, але кожен алгоритм заточений під відомі класи атак.</p> - -<p>Шифри працюють двома шляхами: <a href="https://en.wikipedia.org/wiki/Block_cipher">блочні шифри</a> на послідовних блоках чи буферах дати, та <a href="https://en.wikipedia.org/wiki/Stream_cipher">потокові шифри</a> на потоці даних, що є безперервним (часто це потоки звуку чи відеo).</p> - -<p>Також існує класифікація за методами обробки їх {{glossary("key", "ключів")}}:</p> - -<ul> - <li>алгоритми з <a href="https://en.wikipedia.org/wiki/Symmetric_key_algorithm">симетричними ключами</a> використовують однаковий ключ для кодування та декодування повідомлення. Ключ також має бути переданий захищеним шляхом, якщо повідомлення має залишитись конфіденційним.</li> - <li>алгоритми з <a href="https://en.wikipedia.org/wiki/Asymmetric_key_algorithm">асиметричними ключами</a> використовують різні ключі для кодування та декодування.</li> -</ul> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Cipher", "Шифр")}} на Wikipedia</li> - <li><a href="/en-US/docs/Archive/Security/Encryption_and_Decryption">Шифрування та дешифрування</a></li> -</ul> diff --git a/files/uk/glossary/ciphertext/index.html b/files/uk/glossary/ciphertext/index.html deleted file mode 100644 index af4ed1afac..0000000000 --- a/files/uk/glossary/ciphertext/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Шифротекст -slug: Glossary/Ciphertext -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Ciphertext -original_slug: Glossary/Шифротекст ---- -<p><span class="seoSummary">В {{glossary("Криптографія","криптографії")}}, шифротекст це зашифроване повідомлення, що передає інформацію, але воно є нерозбірливим до процесу {{glossary("decryption","дешифрування")}}</span> правильно підібраним {{glossary("Шифр","шифром")}} і правильним секретом (зазвичай це {{glossary("key","ключ")}}), що дасть змогу відтворити оригінальний {{glossary("cleartext","відкритий текст")}}. Рівень захищеності шифротексту і секретність вміщеної інформації залежать від використання безпечного шифру та зберігання ключа в таємниці.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Ciphertext","Шифротекст")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/closure/index.html b/files/uk/glossary/closure/index.html deleted file mode 100644 index 193254d230..0000000000 --- a/files/uk/glossary/closure/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Замикання -slug: Glossary/Closure -tags: - - JavaScript - - Словник -translation_of: Glossary/Closure -original_slug: Glossary/Замикання ---- -<p><span class="seoSummary"><strong>Замикання</strong> (англ. <em>closure</em>) — це певний різновид сполучення між {{glossary("scope", "областями видимості")}}, що уможливлює доступ до місцевих (локальних) змінних зовнішнього середовища виконання з новоствореного внутрішнього середовища. У {{glossary("JavaScript")}} всяка {{glossary("function", "функція")}} створює замикання.</span></p> - -<h2 id="Приклади">Приклади</h2> - -<p>В наступному прикладі наведено безіменну функцію, що має доступ до місцевих змінних зовнішньої функції, що її створила:</p> - -<pre class="brush: js">function createSequenceGenerator(begin = 0) { - var value = begin; - - return function() { - return value++; - }; -}</pre> - -<p>Місцева змінна <code>value</code> доступна зсередини безіменної функції навіть по завершенню виконання функції <code>createSequenceGenerator</code>, що її створила:</p> - -<pre class="brush: js">var seq1 = createSequenceGenerator(); -var seq2 = createSequenceGenerator(1000); - -console.log(seq1()); // виводить 0 -console.log(seq1()); // виводить 1 -console.log(seq2()); // виводить 1000 -console.log(seq2()); // виводить 1001 -console.log(seq1()); // виводить 2</pre> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Замикання_(програмування)", "Замикання")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Closures">Замикання</a> на MDN</li> -</ul> diff --git a/files/uk/glossary/compile/index.html b/files/uk/glossary/compile/index.html deleted file mode 100644 index 1e89dfece6..0000000000 --- a/files/uk/glossary/compile/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Компіляція -slug: Glossary/Compile -translation_of: Glossary/Compile -original_slug: Glossary/Компіляція ---- -<p>Компіляція це процес перетворення комп'ютерної програми, написаної на {{Glossary("computer programming", "мові программування")}} у відповідний код на іншій мові програмування. Компілятор - це програмне забеспечення яке виконує це перетворення. Інколи цей процес називають "збирання" або "побудова", що як правило, означає бульше, ніж просто виконання компіляції, наприклад упакування його у двійковому форматі. </p> - -<p>Зазвичай компілятор перетворює мову високого рівня, таку як С чи {{Glossary("Java")}}, яка зрозуміла людям, на машинну мову, таку як Ассемблер, яку розуміє процесор. Деякі компілятори перекладають на подібні за рівнем мови, їх називають транспайлер або крос-компілятор, наприклад компіляція з TypeScript на {{Glossary("JavaScript")}}. Це вважається інтрументами продуктивності.</p> - -<p>Більшість компіляторів працюють або ahead-of-time (AOT) або just-in-time (JIT). Як програміст ти зазвичай запускаєш компілятор з командного рядка або зі свого {{Glossary("IDE")}}. Як приклад, один з найпопулярніших "gcc". JIT компілятор зазвичай виконується прозоро для вас. Наприклад браузер Firefox' <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript Engine має вбудований JIT компялітор, який перетворює JavaScript на сайті у машиний код під час перегляду, щоб він працював швидше. Такі проекти як <a href="/en-US/docs/WebAssembly">WebAssembly</a>, працюють над тим щоб робити це ще краще.</p> - -<h2 id="Дізнатися_більше">Дізнатися більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Compiler")}} на Wikipedia</li> - <li>The <a href="https://gcc.gnu.org">GNU Compiler Collection (GCC)</a></li> -</ul> - -<h3 id="Посилання_для_вивчення">Посилання для вивчення</h3> - -<ul> - <li><a href="https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842">Base CS Introduction on Compilers</a></li> - <li><a href="http://stackoverflow.com/a/1672/133203">A big list of learning material on StackOverflow</a></li> -</ul> diff --git a/files/uk/glossary/computer_programming/index.html b/files/uk/glossary/computer_programming/index.html deleted file mode 100644 index f3c8ade2ee..0000000000 --- a/files/uk/glossary/computer_programming/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Комп'ютерне програмування -slug: Glossary/Computer_Programming -tags: - - Мова Програмування - - Програмування - - Словник -translation_of: Glossary/Computer_Programming ---- -<p>Комп'ютерне програмування - це процес складання та організації колекції інструкцій. Вони кажуть комп'ютеру/програмному забезпеченню, що робити, тією мовою, яку розуміє комп'ютер. Ці інструкції подаються у формі багатьох різних мов, таких як C++, Java, JavaScript, HTML, Python, Ruby та Rust. </p> - -<p>Використовуючи відповідну мову, ви можете запрограмувати/створити найрізноманітніші види програмного забезпечення. Наприклад, програму, яка допомагає вченим зі складними розрахунками, базу даних, що зберігає величезні обсяги даних, вебсайт, який дозволяє завантажувати музику, або програмне забезпечення для анімації, яке дозволяє створювати анімаційні фільми.</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Програмування")}} на Вікіпедії</li> - <li><a href="https://uk.wikipedia.org/wiki/%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%BC%D0%BE%D0%B2_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">Список мов програмування: Вікіпедія</a></li> -</ul> diff --git a/files/uk/glossary/conditional/index.html b/files/uk/glossary/conditional/index.html deleted file mode 100644 index 102d5428d9..0000000000 --- a/files/uk/glossary/conditional/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Умовна конструкція -slug: Glossary/Conditional -tags: - - Словник -translation_of: Glossary/Conditional ---- -<p><span class="seoSummary"><strong>Умова</strong> - це набір правил, які можуть перервати нормальне виконання коду або змінити його, в залежності від того, чи була виконана умова.</span></p> - -<p><span id="result_box" lang="en"><span class="hps">Інструкція або набір інструкцій виконуються, якщо була виконана вказана умова</span><span class="hps">. Інакше, виконується інша інструкція</span><span class="hps">.</span> Також можливо повторювати виконання інструкції чи набору інструкцій, доки умова не буде виконана<span>.</span></span></p> - -<h2 id="Дізнатись_більше"><strong>Дізнатись більше</strong></h2> - -<h3 id="Загальні_відомості"><strong>Загальні відомості</strong></h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Exception_handling#Condition_systems">Condition</a> у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Glossary/Control_flow">Потік керування</a> на MDN</li> -</ul> - -<h3 id="Навчання">Навчання</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling in Javascript</a> на MDN</li> -</ul> diff --git a/files/uk/glossary/constant/index.html b/files/uk/glossary/constant/index.html deleted file mode 100644 index 1141403d06..0000000000 --- a/files/uk/glossary/constant/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Константа -slug: Glossary/Constant -tags: - - Словник - - константа -translation_of: Glossary/Constant ---- -<p>Константа - це значення, яке програміст не може змінити, наприклад, число (1, 2, 42). Що стосується {{glossary("variable","змінних")}}, з іншого боку, програміст може присвоїти нове {{glossary("value","значення")}} змінній, яка вже використовується.</p> - -<p>Як і змінні, деякі константи прив'язані до ідентифікаторів. Наприклад, ідентифікатор <code>pi</code> може бути прив'язаний до значення 3.14... .</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Константа_(програмування)", "Константа")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/control_flow/index.html b/files/uk/glossary/control_flow/index.html deleted file mode 100644 index b77252424a..0000000000 --- a/files/uk/glossary/control_flow/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Потік керування -slug: Glossary/Control_flow -tags: - - JavaScript - - Словник -translation_of: Glossary/Control_flow ---- -<p><em>Потік керування (control flow - англ.)</em> - це порядок, у якому комп'ютер виконує інструкції скрипта.</p> - -<p>Код виконується у порядку від першого до останнього рядка, крім випадків, коли комп'ютер зустрічає (надзвичайно часто) структури, які змінюють потік керування, такі як умовні конструкції та цикли. </p> - -<p>Наприклад, уявіть скрипт, який перевіряє дані користувача, отримані через форму веб-сторінки. Скрипт приймає перевірені дані, але, якщо користувач, скажімо, залишає обов'язкове поле порожнім, скрипт спонукає користувача його заповнити. Щоб зробити це, скрипт використовує {{Glossary("Conditional", "умовну")}} структуру, або <code>if...else</code>, щоб, в залежності від того, чи завершено заповнення форми, виконувався різний код:</p> - -<pre class="brush: js">if (field==empty) { - promptUser(); -} else { - submitForm(); -}</pre> - -<p>Типовий скрипт у {{glossary("JavaScript")}} чи {{glossary("PHP")}} (і подібних) включає багато керуючих структур, в тому числі умовних конструкцій, {{Glossary("Loop", "циклів")}} та {{Glossary("Function", "функцій")}}. Частини скрипту також можуть виконуватись, коли виникають {{Glossary("Event", "події")}}.</p> - -<p>Наприклад, наведений вище уривок може знаходитись всередині функції, яка запускається, коли користувач натискає на кнопку <strong>Прийняти</strong> на формі. Функція також може містити цикл, який перебирає усі поля форми, перевіряючи їх усі по черзі. Повертаючись до коду у секціях <code>if</code> та <code>else</code>, рядки <code>promptUser</code> та <code>submitForm</code> можуть також бути викликами інших функцій скрипта. Як бачите, контролюючі структури можуть диктувати комплексні потоки виконання навіть кількома рядками коду.</p> - -<p>Потік керування означає, що коли ви читаєте скрипт, ви маєте не лише читати його з початку до кінця, але також дивитись на структуру програми й на те, як вона впливає на порядок виконання.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Потік_керування")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference#Control_flow">Довідка JavaScript - Потік керування</a> на MDN</li> -</ul> - -<h3 id="Навчання">Навчання</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Statements">Statements (Control flow)</a> на MDN</li> -</ul> diff --git a/files/uk/glossary/cryptanalysis/index.html b/files/uk/glossary/cryptanalysis/index.html deleted file mode 100644 index 4d0d870547..0000000000 --- a/files/uk/glossary/cryptanalysis/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Криптоаналіз -slug: Glossary/Cryptanalysis -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cryptanalysis -original_slug: Glossary/Криптоаналіз ---- -<p><span class="seoSummary"><strong>Криптоаналіз</strong> це галузь {{glossary("криптографія","криптографії")}}, що вивчає шляхи взлому кодів та криптосистем.</span> Криптоаналіз створює техніки взлому {{glossary("cipher","шифру")}}, зокрема більш ефективними методами ніж <a href="http://en.wikipedia.org/wiki/Brute-force_search">метод "грубої сили"</a>. На додачу до традиціїних методів, як <a href="http://en.wikipedia.org/wiki/Frequency_analysis">частотний аналіз</a> та <a href="http://en.wikipedia.org/wiki/Index_of_coincidence">індекс збігів</a>, криптоаналіз включає більш нові методи, такі як <a href="http://en.wikipedia.org/wiki/Linear_cryptanalysis">лінійний криптаналіз</a> або <a href="http://en.wikipedia.org/wiki/Differential_cryptanalysis">диференціальний криптоаналіз</a>, що можуть взламати прогресивніші шифри.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Cryptanalysis","Криптоаналіз")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/cryptographic_hash_function/index.html b/files/uk/glossary/cryptographic_hash_function/index.html deleted file mode 100644 index 6a6a3fa03d..0000000000 --- a/files/uk/glossary/cryptographic_hash_function/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Криптографічна геш-функція -slug: Glossary/Cryptographic_hash_function -tags: - - Безпека - - Криптографія - - Словник -translation_of: Glossary/Cryptographic_hash_function -original_slug: Glossary/Криптографічна_геш-функція ---- -<p>Криптографічна геш-функція, яка також іноді називається дайджест-функція, це одна з {{glossary("криптографія", "криптографічних")}} основ, на меті якої трансформація повідомлення довільного розміру в повідомлення фіксованого розміру, що називається {{glossary("digest","дайджест")}}. Криптографічні геш-функції використовуються для автентифікації, {{Glossary("digital signature", "цифрових підписів")}} та {{Glossary("HMAC", "кодів автентифікації повідомлень (МАС-підписів)")}}.</p> - -<p>Щоб використовуватись у криптографії, геш-функція мусить мати такі якості:</p> - -<ul> - <li>швидка для обрахунку (тому що вони генеруються часто)</li> - <li>незворотність (кожен дайджест може з'явитись з дуже великого числа повідомлень, і лише метод грубої сили може підібрати повідомлення, що створить даний дайджест)</li> - <li>стійкість до фальсифікації (будь-які зміни в повідомлені приводять до іншого дайджесту)</li> - <li>стійкість до суперечностей (має бути неможливим знахідка двох різних повідомлень, що генерують однаковий дайджест)</li> -</ul> - -<p>Криптографічні геш-функції як MD5 і SHA-1 вважаються взломаними, бо знайшлись методи атак, що значно зменшили їх стійкість до суперечностей.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<ul> - <li>{{interwiki("wikipedia", "Cryptographic hash function", "Криптографічна геш-функція")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/cryptography/index.html b/files/uk/glossary/cryptography/index.html deleted file mode 100644 index 7438b3d208..0000000000 --- a/files/uk/glossary/cryptography/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Криптографія -slug: Glossary/Cryptography -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cryptography -original_slug: Glossary/Криптографія ---- -<p><span class="seoSummary"><strong>Криптографія</strong> (або криптологія) - це наука яка вивчає методи кодування і безпечної передачі повідомлень. Криптографія створює і вивчає алгоритми, що використовуються для шифрування і дешифрування повідомлень в незахищеному середовищі, і їх використання.</span> Це не тільки <strong>конфіденційність даних</strong>, криптографія також вивчає <strong>ідентифікацію</strong>, <strong>аутентифікацію</strong>, <strong>невідмовність</strong> і <strong>цілісність даних</strong>. Тому вона також вивчає використання криптографічних методів в контексті, <strong>криптосистеми</strong><strong>.</strong></p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia","Cryptography", "Криптографія")}} на Wikipedia</li> - <li>{{glossary("Криптоаналіз")}}</li> - <li><a href="https://developer.mozilla.org/en-US/Learn/tutorial/Information_Security_Basics">Вступний урок до інформаційної безпеки</a></li> - <li><a href="/en-US/docs/Archive/Security/Encryption_and_Decryption">Шифрування та дешифрування</a></li> -</ul> diff --git a/files/uk/glossary/css/index.html b/files/uk/glossary/css/index.html deleted file mode 100644 index eeec6f5077..0000000000 --- a/files/uk/glossary/css/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: CSS -slug: Glossary/CSS -tags: - - CSS - - Веб - - Глосарій -translation_of: Glossary/CSS ---- -<p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets) це декларативна мова програмування, яка контролює зовнішній вигляд веб-сторінок у {{glossary("browser", "браузері")}}.</span> Браузер застосовує декларації стилей CSS до обраних елементів для їх коректного відображення. Декларація стиля складається з властивостей та їх значень, які обумовлюють вигляд веб-сторінки.</p> - -<p>CSS це одна із трьох ключових частин веб-технологій, разом із {{Glossary("HTML")}} та {{Glossary("JavaScript")}}. CSS зазвичай використовується для опису стилей {{Glossary("Element","HTML елементів")}}, але також може працювати із іншими мовами розмітки, такими як {{Glossary("SVG")}} чи {{Glossary("XML")}}.</p> - -<p>Правило CSS це набір {{Glossary("CSS Property","властивостей")}}, асоційованих із {{Glossary("selector", "селектором")}}. Ось приклад, який задає кожному параграфу жовтий колір тексту на чорному фоні:</p> - -<pre class="brush: css">/* Селектор "p" вказує, що правило буде застосоване для всіх параграфів на сторінці. */ -p { - /* Властивість "color" визначає колір тексту, у цьому випадку жовтий. */ - color: yellow; - - /* Властивість "background-color" визначає колір фону, у цьому разі чорний. */ - background-color: black -}</pre> - -<p>"Каскадність" це правила, за якими визначаються більш значимі селектори, ті, яким браузер віддасть приорітет при застосуванні стилей. Це дуже важливо, так як складний веб-сайт може мати тисячі правил CSS.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Вивчати CSS</a></li> - <li>{{interwiki("wikipedia", "CSS")}} на Wikipedia</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="/uk/docs/Web/CSS">Документація по CSS на MDN</a></li> - <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Надбання робочої групи CSS на сьогодні</a></li> -</ul> - -<h3 id="Вивчати_CSS">Вивчати CSS</h3> - -<ul> - <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Веб-курс на codecademy.com</a></li> - <li><a href="http://www.expression-web-tutorial.com/Types_CSS_Styles.html">Три типи CSS</a></li> -</ul> diff --git a/files/uk/glossary/data_structure/index.html b/files/uk/glossary/data_structure/index.html deleted file mode 100644 index 52d1d78523..0000000000 --- a/files/uk/glossary/data_structure/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Структура даних -slug: Glossary/Data_structure -tags: - - Словник -translation_of: Glossary/Data_structure ---- -<p><span class="seoSummary"><strong>Структура даних</strong> це спосіб організації <em>даних</em>, для ефективного подальшого їх використання.</span></p> - -<h2 id="Довідатись_більшеEdit">Довідатись більше<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility$edit#Learn_more" rel="nofollow, noindex"><span>Edit</span></a></h2> - -<h3 class="highlight-spanned" id="Загальні_поняття"><span class="highlight-span">Загальні поняття</span></h3> - -<ul> - <li>{{interwiki("wikipedia", "Data_structure", "Структура даних")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/decryption/index.html b/files/uk/glossary/decryption/index.html deleted file mode 100644 index d82125a846..0000000000 --- a/files/uk/glossary/decryption/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Дешифрування -slug: Glossary/Decryption -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Decryption -original_slug: Glossary/Дешифрування ---- -<p><span class="seoSummary">В {{glossary("Криптографія","криптографії")}}, <strong>дешифрування</strong> це трансформація {{glossary("Шифротекст","шифротексту")}} в {{glossary("cleartext","відкритий текст")}}.</span></p> - -<p>Дешифрування це одна з криптографічних основ: цей процес перетворює повідомлення з шифротекстом в відкритий текст, використовуючи криптографічний алгоритм, що називається {{glossary("шифр")}}. Як і шифрування, дешифрування з використанням сучасних шифрів виконується за допомгою специфічних алгоритмів і секрету, який називають {{glossary("key","ключем")}}. Так як алгоритми часто є публічними, то ключ має зберігатись в таємниці, якщо шифрування має бути захищеним.</p> - -<p><img alt="The decryption primitive." src="https://mdn.mozillademos.org/files/9817/Decryption.png" style="height: 81px; width: 485px;"></p> - -<p>Дешифрування це процес, протилежний процесу {{glossary("encryption","шифрування")}} і якщо ключ залишається в таємниці, то деширування без знання конкретного секрету є складним з математичної точки зору. Складність залежить від рівня захищеності обраного криптографічного алгоритму і розвивається разом з {{glossary("криптоаналіз","криптоаналізом")}}.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 class="highlight-spanned" id="Teхнічна_довідка">Teхнічна довідка</h3> - -<ul> - <li><a href="/en-US/docs/Encryption_and_Decryption">Шифрування та Дешифрування</a></li> -</ul> diff --git a/files/uk/glossary/doctype/index.html b/files/uk/glossary/doctype/index.html deleted file mode 100644 index f30daf9f01..0000000000 --- a/files/uk/glossary/doctype/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Doctype -slug: Glossary/Doctype -tags: - - HTML - - Метадані - - Словник - - Тип документа -translation_of: Glossary/Doctype ---- -<p><code><!DOCTYPE></code> вказує {{Glossary("browser", "переглядачеві")}}, яку версію {{Glossary("HTML")}} (чи {{glossary("XML")}}) було використано для створення документа. Doctype є оголошенням, але не {{Glossary("tag", "тегом")}}; його можна називати «Визначенням типу документа», або скорочено «DTD» (Document Type Declaration).</p> - -<p>На початку {{Glossary("HTML")}}-документа очікується оголошення <code><!DOCTYPE html></code>, що має на меті завадити використанню переглядачем так званого <a href="/uk/docs/Web/HTML/Режим_сумісності_й_стандартний_режим">«режиму сумісності»</a> для відображення документа. Інакше кажучи, це оголошення змушує переглядач якнайточніше дотримуватися вимог відповідних специфікацій, а не вдаватися до використання режиму відображення, що є несумісним з деякими специфікаціями.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">Виознака DOCTYPE у специфікації HTML</a></li> - <li>{{interwiki("wikipedia", "Document_Type_Definition", "Визначення Типу Документа")}} у Вікіпедії</li> - <li><a href="/uk/docs/Web/HTML/Режим_сумісності_й_стандартний_режим">Режим сумісності й стандартний режим</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/API/Document/doctype">Document.doctype</a>, властивість, що містить відомості про тип документа</li> - <li><a href="/uk/docs/Using_multiple_DTDs">Використання кількох DTD</a> для локалізації</li> -</ul> diff --git a/files/uk/glossary/dom/index.html b/files/uk/glossary/dom/index.html deleted file mode 100644 index 01bf41b037..0000000000 --- a/files/uk/glossary/dom/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: DOM (Document Object Model) -slug: Glossary/DOM -tags: - - CodingScripting - - DOM - - Словник -translation_of: Glossary/DOM ---- -<p>DOM (<em>англ.</em> Document Object Model, <em>укр.</em> Об'єктна модель документа) - це {{glossary("API")}}, який представляє та взаємодіє з будь-яким {{glossary("HTML")}} або {{glossary("XML")}} документом. DOM - це модель документа, завантажена у {{glossary("browser","переглядач")}}, що представляє документ як дерево вузлів, де кожен вузол представляє частину документа (наприклад, {{Glossary("element","елемент")}}, текстовий рядок або коментар).</p> - -<p>DOM - один з найбільш використовуваних {{Glossary("API")}} у {{glossary("World Wide Web","всесвітній мережі")}}, тому що він дозволяє коду, запущеному в переглядачі, мати доступ і взаємодіяти з кожним вузлом документа. Вузли можна створювати, переміщувати та змінювати. Слухачі подій можуть бути додані до вузлів і спрацьовувати під час виникнення заданої події.</p> - -<p>DOM не було визначено спочатку - це сталося, коли веб-переглядачі почали реалізовувати {{Glossary("JavaScript")}}. Цей успадкований DOM іноді називають DOM 0. Сьогодні асоціація WHATWG підтримує стандарт DOM Living Standard.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<ul> - <li>{{interwiki("wikipedia", "Об'єктна_модель_документа", "Об'єктна модель документа")}} на Вікіпедії</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="/uk/docs/Web/API/Document_Object_Model">Документація по DOM на MDN</a></li> - <li><a href="https://dom.spec.whatwg.org/" rel="external">Стандарт DOM</a></li> - <li><a href="https://www.w3.org/DOM/DOMTR">Технічні звіти DOM на сайті W3C</a></li> -</ul> diff --git a/files/uk/glossary/dynamic_programming_language/index.html b/files/uk/glossary/dynamic_programming_language/index.html deleted file mode 100644 index f93ccfccae..0000000000 --- a/files/uk/glossary/dynamic_programming_language/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Динамічна мова програмування -slug: Glossary/Dynamic_programming_language -tags: - - ДМП - - Динамічна мова програмування - - Словник -translation_of: Glossary/Dynamic_programming_language -original_slug: Glossary/Динамічна_мова_програмування ---- -<p> </p> - -<p><strong>Динамічна мова програмування, </strong>це мова програмування в якій операції, які в іншому разі обробляються в процесі компіляції, можуть здійснюватись в ході виконання коду. Наприклад, в JavaScript можливо змінювати тип змінної чи додавати нові властивості чи методи до об'єкта, коли програма запущена. </p> - -<p>Термін протиставляється, так званим, статичним мовам програмування, в яких такі зміни типово не можливі.</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Динамічні мови програмування")}} on Wikipedia</li> -</ul> diff --git a/files/uk/glossary/ecmascript/index.html b/files/uk/glossary/ecmascript/index.html deleted file mode 100644 index f39f348d43..0000000000 --- a/files/uk/glossary/ecmascript/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ECMAScript -slug: Glossary/ECMAScript -tags: - - Словник -translation_of: Glossary/ECMAScript ---- -<p><strong>ECMAScript</strong> - це стандарт мови програмування, на якому базується {{glossary("JavaScript")}}. Стандартизацією ECMAScript займається <a href="http://www.ecma-international.org">Ecma International</a>.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "ECMAScript")}} на Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="http://www.ecmascript.org/">ECMAScript</a></li> -</ul> diff --git a/files/uk/glossary/element/index.html b/files/uk/glossary/element/index.html deleted file mode 100644 index 3a31d88f60..0000000000 --- a/files/uk/glossary/element/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Елемент -slug: Glossary/Element -tags: - - CodingScripting - - HTML - - Словник -translation_of: Glossary/Element ---- -<p>Елемент - частина веб-сторінки. В {{glossary("XML")}} та {{glossary("HTML")}}, елемент може містити данні або фрагмент тексту або зображення, або можливо нічого. Типовий елемент включає в себе відкриваючий тег з деякими атрибутами, вкладений текстовий вміст і закриваючий тег.<br> - <img alt="Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag." src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> - -<p>Елементи та теги <em>не</em> одне й те саме. Теги починаються або закінчуються елементом у вихідному коді, тоді як елементи є частиною {{Glossary("DOM")}}, моделлю документа для відображення сторінки в {{glossary("browser")}}.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{domxref("Element")}} iнтерфес, що представлює собою елемент в DOM.</li> - <li><a href="/uk/docs/Web/Guide/HTML/Element">Більше деталей про елементи.</a></li> - <li><a href="https://developer.mozilla.org/uk/docs/Web/Web_Components/Custom_Elements">Використання спеціальних елементів</a></li> -</ul> diff --git a/files/uk/glossary/encryption/index.html b/files/uk/glossary/encryption/index.html deleted file mode 100644 index 2a296902dc..0000000000 --- a/files/uk/glossary/encryption/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Шифрування -slug: Glossary/Encryption -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Encryption ---- -<p><span class="seoSummary">В {{glossary("Криптографія","криптографії")}}, <strong>шифрування</strong> це трансфромація {{glossary("cleartext","відкритого тексту")}} в кодований текст або {{glossary("ciphertext","шифротекст")}}.</span> Шифротекст призначений бути нечитабельним для неавторизованих читачів.</p> - -<p>Шифрування це основа криптографії: воно трансформує повідомлення з текстовими даними в шифротекст використовуючи алгоритм, що називається " {{glossary("cipher","шифром")}} ". Шифруванння з використанням сучасних шифрів виконується за допомогою специфічних алгоритмів і секрету, що має назву {{glossary("key","ключ")}}. Так як алгоритми досить часто є в публічному доступі, то ключ має залишатись таємним, якщо шифрування має бути захищеним.</p> - -<p><img alt="Як працює шифрування. Відкритий текст(Cleartext) проходить процес шифрування(Encrypt) з використанням шифру(Cipher) й на виході маємо шифротекст(Ciphertext)." src="https://mdn.mozillademos.org/files/9815/Encryption.png" style="height: 108px; width: 472px;"></p> - -<p>Як працює шифрування. Відкритий текст(Cleartext) проходить процес шифрування(Encrypt) з використанням шифру(Cipher) й на виході маємо шифротекст(Ciphertext).</p> - -<p>Без знання секрету, зворотня операція {{glossary("decryption","дешифрування")}}, є складною для виконання з математичної точки зору. Складність залежить від рівня захищеності обраного криптографічного алгоритму і розвивається з прогресом {{glossary("Криптоаналіз","криптоаналізу")}}.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<ul> - <li>Довідатись більше про <a href="/en-US/docs/Encryption_and_Decryption">Шифрування і Дешифрування</a></li> -</ul> diff --git a/files/uk/glossary/engine/index.html b/files/uk/glossary/engine/index.html deleted file mode 100644 index d82b70109e..0000000000 --- a/files/uk/glossary/engine/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Рушій JavaScript -slug: Glossary/Engine -tags: - - CodingScripting - - Glossary - - Глоссарій -translation_of: Glossary/Engine ---- -<p>Рушій {{glossary("JavaScript")}} — це інтерпретатор, що аналізує та виконує програму, написану на JavaScript.</p> - -<h2 id="Дізнатися_більше">Дізнатися більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Рушій JavaScript")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/falsy/index.html b/files/uk/glossary/falsy/index.html deleted file mode 100644 index 96f165b36b..0000000000 --- a/files/uk/glossary/falsy/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Falsy -slug: Glossary/Falsy -tags: - - JavaScript - - Словник -translation_of: Glossary/Falsy ---- -<p id="Summary"><strong>Хибне (falsy)</strong> значення - це значення, яке вважається таким, що дорівнює false, у контексті {{Glossary("Boolean")}}.</p> - -<p>Мова {{Glossary("JavaScript")}} використовує {{Glossary("Type_Conversion", "перетворення типів")}}, щоб перетворити будь-яке значення на Boolean у контексті, який цього вимагає, наприклад, {{Glossary("Conditional", "умови")}} та {{Glossary("Loop", "цикли")}}.</p> - -<p>Є 8 хибних значень:</p> - -<table class="standard-table" style="height: 249px; width: 1345px;"> - <tbody> - <tr> - <td><code>false</code></td> - <td>Ключове слово <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#%D0%9A%D0%BB%D1%8E%D1%87%D0%BE%D0%B2%D1%96_%D1%81%D0%BB%D0%BE%D0%B2%D0%B0_%D0%B7%D0%B0%D1%80%D0%B5%D0%B7%D0%B5%D1%80%D0%B2%D0%BE%D0%B2%D0%B0%D0%BD%D1%96_%D0%BD%D0%B0_%D0%BC%D0%B0%D0%B9%D0%B1%D1%83%D1%82%D0%BD%D1%94_%D1%83_%D1%81%D1%82%D0%B0%D1%80%D1%88%D0%B8%D1%85_%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B0%D1%85">false</a></td> - </tr> - <tr> - <td><code>0</code></td> - <td>Число <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_number">нуль.</a></td> - </tr> - <tr> - <td><code>-0</code></td> - <td>Від'ємне число <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_number">нуль</a></td> - </tr> - <tr> - <td><code>0n</code></td> - <td><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a>, при використанні у якості boolean, дотримується тих самих правил, що й Number. 0n є хибним.</td> - </tr> - <tr> - <td><code>""</code></td> - <td> - <p>Порожній текстовий рядок (довжина рядка дорівнює нулю).</p> - - <p>Рядки у JavaScript можуть бути визначені через подвійні лапки <strong>""</strong>, одинарні лапки '', або <a href="/uk/docs/Web/JavaScript/Reference/Template_literals">Шаблонні літерали</a> <strong>``</strong></p> - </td> - </tr> - <tr> - <td>{{Glossary("null")}}</td> - <td><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/null">null</a> -<a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/null"> </a> відсутність будь-якого значення об'єкта</td> - </tr> - <tr> - <td>{{Glossary("undefined")}}</td> - <td><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> -<a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined"> </a> просте значення</td> - </tr> - <tr> - <td>{{Glossary("NaN")}}</td> - <td><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN </a>- не число (not a number)</td> - </tr> - </tbody> -</table> - -<div class="blockIndicator note"> -<p>Об'єкти є хибними лише тоді, коли мають <a href="https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot">внутрішній слот [[IsHTMLDDA]]</a>. Цей слот існує лише у <a href="/uk/docs/Web/API/Document/all"><code>document.all</code></a> та не може бути встановлений засобами JavaScript.</p> -</div> - -<h2 id="Приклади">Приклади</h2> - -<p>Приклади <em>хибних</em> значень у JavaScript (які приводяться до false у контексті Boolean і, таким чином, пропускають блок <code>if</code>):</p> - -<pre class="brush: js notranslate">if (false) -if (null) -if (undefined) -if (0) -if (-0) -if (0n) -if (NaN) -if ("") -</pre> - -<h3 id="Логічний_оператор_І">Логічний оператор І, &&</h3> - -<p>Якщо перший об'єкт є хибним, повертає цей об'єкт</p> - -<pre class="brush: js notranslate">false && "dog" -// ↪ false - -0 && "dog" -// ↪ 0 -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table> - <thead> - <tr> - <th scope="col"><strong>Специфікація</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-toboolean", "<code>ToBoolean</code> abstract operation")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<ul> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Boolean")}}</li> -</ul> - -<div>{{QuickLinksWithSubpages("/uk/docs/Glossary")}}</div> diff --git a/files/uk/glossary/function/index.html b/files/uk/glossary/function/index.html deleted file mode 100644 index 15f2ddcbf2..0000000000 --- a/files/uk/glossary/function/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Функція -slug: Glossary/Function -tags: - - IIFE - - JavaScript - - Словник - - Функція -translation_of: Glossary/Function -original_slug: Glossary/Функція ---- -<p><span class="seoSummary"><strong>Функція</strong> - це фрагмент коду, що може бути викликаний іншим кодом чи сам собою, або {{Glossary("змінна")}} що відноситься до функцій. Коли функцію викликано, {{Glossary("арґументи")}} функція отримує як ввід, та може повертати вивід. Функції у {{glossary("JavaScript")}} це також {{glossary("Object","об'єкти")}}.</span></p> - -<p>Ім'я функції це {{Glossary("identifier","ідентифікатор")}} оголошений як частина оголошення функції чи виразу функції. {{Glossary("scope", "Область видимості")}} залежить від того, є функція оголошеною чи описаною.</p> - -<h3 id="Різні_види_функцій">Різні види функцій</h3> - -<p><strong>Анонімна функція</strong>, це функція без імені функції:</p> - -<pre class="brush: js">function () {}; -// або використовуючи ECMAScript 2015 запис зі стрілкою -() => {}; -</pre> - -<p><strong>Названа функція</strong>, це функція що має ім'я:</p> - -<pre class="brush: js">function foo() {}; -// або використовуючи ECMAScript 2015 запис зі стрілкою -const foo = () => {}; -</pre> - -<p><strong>Внутрішня функція</strong>, це функція всередині іншої функції (<code>square</code> в цьому випадку). <strong>Зовнішня функція</strong>, це функція, що містить всередині інші функції (<code>addSquares</code> в цьому випадку):</p> - -<pre class="brush: js">function addSquares(a,b) { - function square(x) { - return x * x; - } - return square(a) + square(b); -}; -// використовуючи ECMAScript 2015 запис зі стрілкою -const addSquares = (a,b) => { - const square = x => x*x; - return square(a) + square(b); -}; -</pre> - -<p><strong>Рекурсивна функція</strong>, це функція, що викликає сама себе. Дивіться {{Glossary("Рекурсія", "рекурсія")}}.</p> - -<pre class="brush: js">function loop(x) { - if (x >= 10) - return; - loop(x + 1); -}; -// використовуючи ECMAScript 2015 запис зі стрілкою -const loop = x => { - if (x >= 10) - return; - loop(x + 1); -}; -</pre> - -<p><strong>Негайно виконуваний функціональний вираз </strong>(IIFE, Immediately Invoked Function Expression) — це вираз, що одночасно оголошує {{Glossary("Функція", "функцію")}} в {{Glossary("JavaScript")}} та здійснює її виклик. Позаяк подальший виклик безіменної функції, посилання на яку відсутнє, неможливий, головним призначенням такого виразу є створення окремої області видимості, щоб уникнути засмічення зовнішньої (зазвичай, глобальної). Створити НВФВ можна, додавши ліву та праву дужки в кінці оголошення функції.</p> - -<pre class="brush: js">// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) -/* -function foo() { - console.log('Hello Foo'); -}(); -*/ - -(function foo() { - console.log("Hello Foo"); -}()); - -(function food() { - console.log("Hello Food"); -})(); - -</pre> - -<p>Якщо хочете дізнатись бульше про НВФВ, перегляньте сторінку на Wikipedia : <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">Immediately Invoked Function Expression</a></p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Functions" title="en-US/docs/Web/JavaScript/Guide/Functions">Функції</a></li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрілочні функції</a></li> -</ul> diff --git a/files/uk/glossary/general_header/index.html b/files/uk/glossary/general_header/index.html deleted file mode 100644 index c49a7e4786..0000000000 --- a/files/uk/glossary/general_header/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Загальний заголовок (General header) -slug: Glossary/General_header -tags: - - Глоссарій - - Загальний заголовок - - Заголовок -translation_of: Glossary/General_header ---- -<p><strong>Загальний заголовок</strong> це {{glossary('HTTP заголовок /(HTTP header/)', 'HTTP заголовок)')}} {{glossary("HTTP_header","HTTP заголовок")}} що може використовуватись в запиті та відповіді але не стосується, власне, контенту. В залежності від контексту Depending on the context they are used in, general headers are either {{glossary("Response header", "response")}} or {{glossary("request header", "request headers")}}. However, they are not {{glossary("entity header", "entity headers")}}.</p> - -<p>Заголовки що найбільше застосовують це :{{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} or {{HTTPHeader("Connection")}}.</p> diff --git a/files/uk/glossary/global_object/index.html b/files/uk/glossary/global_object/index.html deleted file mode 100644 index d8a961d8c1..0000000000 --- a/files/uk/glossary/global_object/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Глобальний об'єкт -slug: Glossary/Global_object -tags: - - JavaScript - - Словник -translation_of: Glossary/Global_object ---- -<p><span class="seoSummary">Глобальний об'єкт — це {{glossary("object", "об'єкт")}}, що є носієм чи то пак виразником {{glossary("global scope", "глобальної області видимості")}}.</span></p> - -<p>В JavaScript глобальний об'єкт завжди визначено. У веб-переглядачах створювані скриптами глобальні змінні насправді є властивостями цього об'єкта (натомість, у середовищі {{Glossary("node.js")}} це не так). {{Glossary("interface", "Інтерфейс")}} глобального об'єкта залежить від контексту виконання скрипта:</p> - -<ul> - <li>В переглядачах всякий код, окрім коду фонових задач, має {{domxref("Window")}} за глобальний об'єкт. Це стосується переважної більшості JavaScript-коду {{glossary("тенета", "тенет")}};</li> - <li>Код, виконуваний всередині {{domxref("Worker")}}, має примірник {{domxref("WorkerGlobalScope")}} за глобальний об'єкт;</li> - <li>Код, виконуваний в середовищі {{Glossary("node.js")}}, має відповідний об'єкт з ім'ям <code><a href="https://nodejs.org/api/globals.html#globals_global">global</a></code>.</li> -</ul> - -<h3 id="Об'єкт_window_в_перегядачі">Об'єкт <code>window</code> в перегядачі</h3> - -<p>Веб-переглядач має <code>window</code> за глобальний об'єкт, тож будь-яка глобальна змінна чи функція є водночас властивістю об'єкта <code>window</code>. Наведений нижче приклад засвідчує, що оголошення змінної в глобальній області видимості створює у <code>window</code> нову властивість:</p> - -<pre class="brush: js">var foo = 'Дещось'; -foo === window.foo; // Вертає true - -console.log(window.foo); // Виводить "Дещось"</pre> - -<p>Те саме стосується оголошень функцій:</p> - -<pre class="brush: js">function greeting() { - console.log('Отакої'); -} - -// Те саме, що й простий виклик greeting() -window.greeting();</pre> diff --git a/files/uk/glossary/gpu/index.html b/files/uk/glossary/gpu/index.html deleted file mode 100644 index a9ebb3cdfe..0000000000 --- a/files/uk/glossary/gpu/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: GPU (Графічний процесор) -slug: Glossary/GPU -tags: - - Glossary - - Infrastructure - - Інфраструктура - - Глоссарій -translation_of: Glossary/GPU ---- -<p><strong>Графічний процесор</strong> (англ. <em>Graphics Processing Unit</em>, скорочено <em>GPU</em>) — це компонент комп’ютера, подібний до ЦП (центральний процесор). Він спеціалізується на обробці як двовимірної, так і тривимірної комп’ютерної графіки, і виведенні її на екран вашого монітора.</p> diff --git a/files/uk/glossary/hash/index.html b/files/uk/glossary/hash/index.html deleted file mode 100644 index eb1105b534..0000000000 --- a/files/uk/glossary/hash/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Hash -slug: Glossary/hash -translation_of: Glossary/hash ---- -<p>Хеш-функція приймає повідомлення змінної довжини та повертає, фіксованої довжини хеш-код. Зазвичай це: 128-бітний "Відбиток Пальця" чи "Дайджест Повідомлення". Хеш функціїї часто використовують в {{glossary("cryptography")}} — вони гарантують цілістність переданих данних. Це є основою для {{glossary("HMAC's")}}, який забезпечує аутентифікацію повідомлень.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "hash function")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/hoisting/index.html b/files/uk/glossary/hoisting/index.html deleted file mode 100644 index 8c628c093c..0000000000 --- a/files/uk/glossary/hoisting/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Підняття -slug: Glossary/Hoisting -tags: - - JavaScript - - Словник -translation_of: Glossary/Hoisting ---- -<p>Термін <em>підняття</em> (hoisting) ви не знайдете у жодній нормативній специфікації до <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. Підняття придумали як загальне поняття того, як працюють контексти виконання (зокрема, стадії створення та виконання) у JavaScript. Однак, спочатку ця концепція може дещо заплутати.</p> - -<p>Концептуально, наприклад, строге визначення підняття припускає, що оголошення змінних та функцій фізично пересуваються нагору вашого коду, але це не те, що насправді відбувається. Замість цього, оголошення змінних та функцій розміщуються у пам'яті під час стадії <em>компіляції</em>, але залишаються там, де ви написали їх у коді.</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Технічний_приклад">Технічний приклад</h3> - -<p>Однією з переваг розміщення оголошення функцій у пам'яті до того, як JavaScript виконає будь-який код, є те, що це дозволяє використовувати функцію до того, як ви оголосили її у коді. Наприклад:</p> - -<pre class="brush: js">function catName(name) { - console.log("Мого кота звуть " + name); -} - -catName("Тигр"); - -/* -Результат наведеного коду: "Мого кота звуть Тигр" -*/ -</pre> - -<p>Фрагмент коду, наведений вище, відображає те, як ви очікуєте написати код, щоб він працював. А тепер подивимось, що станеться, якщо ви викличете функцію перед її оголошенням:</p> - -<pre class="brush: js">catName("Барсик"); - -function catName(name) { - console.log("Мого кота звуть " + name); -} -/* -Результат наведеного коду: "Мого кота звуть Барсик" -*/ -</pre> - -<p>Хоча виклик функції у коді відбувається раніше за оголошення функції, код все одно працює. Причина в тому, як працює контекст виконання у JavaScript.</p> - -<p>Підняття добре працює з іншими типами даних та змінними. Змінні можна ініціалізувати та використовувати до того, як вони були оголошені.</p> - -<h3 id="Піднімаються_лише_оголошення">Піднімаються лише оголошення</h3> - -<p>У JavaScript піднімаються лише оголошення, а не ініціалізації. Якщо змінна була оголошена та ініціалізована після того, як була використана, її значенням буде undefined. Наприклад:</p> - -<pre class="brush: js">console.log(num); // Вертає undefined -var num; -num = 6;</pre> - -<p>Якщо ви оголошуєт змінну після того, як вона була використана, але ініціалізуєте заздалегідь, буде повернене значення:</p> - -<pre class="brush: js">num = 6; -console.log(num); // вертає 6 -var num; -</pre> - -<p>Нижче більше прикладів, що демонструють підняття.</p> - -<pre class="brush: js">//Приклад 1 - Не піднімається -var x = 1; // Ініціалізація x -console.log(x + " " + y); // '1 undefined' -var y = 2; // Initialize y -//Це не працюватиме, бо у JavaScript <strong>піднімаються лише оголошення</strong> - -//Приклад 2 - Піднімається -var num1 = 3; //Оголосити та ініціалізувати num1 -num2 = 4; //Ініціалізувати num2 -console.log(num1 + " " + num2); //'3 4' -var num2; //Оголосити num2 для підняття - -//Приклад 3 - Піднімається -a = 'Журав'; //Ініціалізувати a -b = 'лина'; //Ініціалізувати b -console.log(a + "" + b); // 'Журавлина' -var a, b; //Оголосити a & b для підняття -</pre> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/var">оператор var</a> — MDN</li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оператор function</a> — MDN</li> -</ul> diff --git a/files/uk/glossary/html/index.html b/files/uk/glossary/html/index.html deleted file mode 100644 index a0d0d99a00..0000000000 --- a/files/uk/glossary/html/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTML -slug: Glossary/HTML -tags: - - HTML - - Словник -translation_of: Glossary/HTML ---- -<p>HTML (HyperText Markup Language, мова розмітки гіпертексту) — це декларативна мова, яка визначає структуру веб-сторінки.</p> - -<h2 id="Історія">Історія</h2> - -<p>У 1990, як частину його бачення {{glossary("World Wide Web","Web")}}, Тім Бернерс-Лі описав концепцію {{glossary("hypertext", "гіпертексту")}}, яку формалізував наступного року через розмітку, що була основана головним чином на {{glossary("SGML")}}. Спільнота {{glossary("IETF")}} почала створювати специфікацію HTML у 1993, та після декількох чорнеток випустила версію 2.0 у 1995. У 1994 Бернерс-Лі створив організацію {{glossary("W3C")}} для розробки Web. У 1996, W3C взяла на себе розробку стандарта HTML та випустила рекомендації HTML 3.2 роком пізніше. HTML 4.0 було випущено у 1999 році, який набув стандарту {{glossary("ISO")}} у 2000.</p> - -<p>У ті часи W3C майже покинула HTML на користь {{glossary("XHTML")}}, закликаючи до утворення незалежної групи {{glossary("WHATWG")}} in 2004. Завдяки WHATWG, роботу над стандартом {{glossary("HTML5")}} було продовжено: дві організації випустили першу чернетку у 2008 році та фіналізували стандарт у 2014.</p> - -<h2 id="Концепція_та_синтаксис">Концепція та синтаксис</h2> - -<p>HTML-документ це текстовий документ, що складається з {{glossary("element","елементів")}}. Сам елемент зазвичай складається з початкового та кінцевого {{Glossary("tag","теґа")}}, втім є елементи (як-от {{htmlelement("img")}}), яким не дозволено мати вміст — такі елементи або складаються з одного-єдиного теґа («поодинокого» або «самозакривного»), або кінцевий теґ розташовано одразу за початковим (без жодного вмісту між ними). Кожен теґ починається та закінчується кутовими дужками.</p> - -<p>До теґів можна додавати {{Glossary("attribute","атрибути")}}, що передають додаткову інформацію, яка впливає на поведінку чи відображення елемента переглядачем:</p> - -<p><img alt="Складові HTML-елемента" src="https://mdn.mozillademos.org/files/15319/anatomy-of-an-html-element-uk.png" style="height: 200px; width: 600px;"></p> - -<p>Зазвичай HTML зберегається у файлах із розширенням .htm чи .html, обслуговується (віддається) {{Glossary("Server","веб-сервером")}}, та може переглядатися будь-яким {{Glossary("Browser","веб-переглядачем")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "HTML", "HTML")}} у Вікіпедії</li> -</ul> - -<h3 id="Вивчення_HTML">Вивчення HTML</h3> - -<ul> - <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">Наші уроки HTML</a> (en)</li> - <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Курс web на codecademy.com</a> (en)</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/HTML">Документація HTML на MDN</a></li> - <li><a href="http://www.w3.org/TR/html5/" rel="external">Специфікація HTML</a> (en)</li> -</ul> diff --git a/files/uk/glossary/html5/index.html b/files/uk/glossary/html5/index.html deleted file mode 100644 index ce32c8cb5b..0000000000 --- a/files/uk/glossary/html5/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: HTML5 -slug: Glossary/HTML5 -tags: - - Словник -translation_of: Glossary/HTML5 ---- -<p>Останній стабільний реліз {{Glossary("HTML")}}, HTML5 перетворює HTML з простої мови для структурування документа на платформу для розробки повноцінних додатків. Серед інших функцій, HTML5 включає в себе нові елементи і {{glossary("JavaScript")}} {{glossary("API","APIs")}} <span id="result_box" lang="uk"><span>для розширення можливостей сховища, мультимедіа та апаратного забезпечення</span></span> .</p> - -<h2 id="Learn_more">Learn more</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/HTML/HTML5">our HTML5 guide</a></li> -</ul> diff --git a/files/uk/glossary/http/index.html b/files/uk/glossary/http/index.html deleted file mode 100644 index 23f3f973c4..0000000000 --- a/files/uk/glossary/http/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HTTP -slug: Glossary/HTTP -tags: - - HTTP - - Інфраструктура - - Початківець - - Словник -translation_of: Glossary/HTTP ---- -<p>Протокол перенесення гіпертексту (англ. HyperText Transfer Protocol (<strong>HTTP</strong>) — це основний {{glossary("protocol","протокол")}}, що дозволяє передавати документи гіпермедіа в {{glossary("World Wide Web","мережі")}}, в основному між переглядачем та сервером, щоб люди могли їх читати. Поточна версія специфікації HTTP називається HTTP/2.</p> - -<p>Як частина {{glossary("URI")}}, "http://" називається "схемою" і зазвичай стоїть на початку адреси, наприклад, в "https://developer.mozilla.org вказує переглядачу, що запит документу робиться по протоколу HTTP. https в цьому випадку стосується захищеної версії протоколу HTTP {{glossary("SSL")}} (також називається TLS).</p> - -<p>HTTP — це текстовий протокол (обмін інформацією здійснюється у вигляді {{glossary("Plaintext", "звичайного тексту")}}), що не зберігає стан (обмін даними здійснюється без урахування попереднього обміну). Ця властивість робить його ідеальним для того, щоб люди читали документи (сайти) у мережі. Однак HTTP також можна використати як основу для веб-сервісів {{glossary("REST")}} веб-сервісів від сервера до сервера або {{glossary("AJAX")}} запитів, щоб зробити їх більш динамічними</p> - -<div> -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<ul> - <li><a href="/uk/docs/Web/HTTP">HTTP на MDN</a></li> - <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} у Вікіпедії</li> -</ul> -</div> - -<p> </p> diff --git a/files/uk/glossary/http_2/index.html b/files/uk/glossary/http_2/index.html deleted file mode 100644 index 023bb74f32..0000000000 --- a/files/uk/glossary/http_2/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: HTTP/2 -slug: Glossary/HTTP_2 -tags: - - HTTP - - Інфраструктура - - Словник -translation_of: Glossary/HTTP_2 ---- -<p><span class="seoSummary"><strong>HTTP/2</strong> це значне оновлення спрямоване на доопрацювання <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">мережевого протоколу HTTP</a></span>. Основні цілі для протоколу HTTP/2 це зменшення <a href="/en-US/docs/Glossary/Latency">затримки</a> шляхом реалізаці об'єднання повного запиту і відповіді; мінімізація надлишків протоколу шляхом ефективного стиснення полів заголовків в HTTP та підтримка реалізації пріоритетності запитів і технології "push"(надсилання даних користувачеві на основі раніше встановлених параметрами) зі сторони сервера.</p> - -<p>HTTP/2 не змінює сенс додатків HTTP взагалі. Всі концепти ядра, що наявні в HTTP 1.1, такі як методи HTTP, коди статусів, URIs та поля заголовків, залишаються на місці. Натоміть, HTTP/2 модифікує способи форматування(утворення) даних та їх транспортування між клієнтом та сервером, кожен з яких керує цілим процесом та приховує заплутаність додатків новим шаром обрамлення. В результаті маємо, що всі існуючі додатки можуть використовуватись без модифікацій.</p> - -<h2 id="Дивитись_також">Дивитись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP">HTTP на MDN</a></li> - <li>{{interwiki("wikipedia", "HTTP/2", "HTTP/2")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/http_header/index.html b/files/uk/glossary/http_header/index.html deleted file mode 100644 index ed27b4e912..0000000000 --- a/files/uk/glossary/http_header/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: HTTP заголовок (HTTP header) -slug: Glossary/HTTP_header -tags: - - HTTP - - HTTP Заголовок - - htpp заголовок - - Глосарій - - Заголовок -translation_of: Glossary/HTTP_header ---- -<p><strong>HTTP заголовок </strong>- це поле у HTTP запиту чи відповіді, яке передає додаткову інформацію змініюючи або уточнюючи семантику повідомлення або тіла запиту. Заголовки нечутливі до регістру, починаються на початку рядка і одразу після них: <code>':'</code> а значення залежно від самого заголовка. Значення закінчується в наступному CRLF або в кінці повідомлення.</p> - -<p>Традиційно заголовки класифікуються за категоріями, хоча ця класифікація більше не є частиною жодної специфікації:</p> - -<ul> - <li>{{Glossary("General header")}}: <span class="tlid-translation translation" lang="uk"><span title="">Заголовки, що застосовуються як до запитів, так і до відповідей, але не мають відношення до даних, зрештою переданих в тілі</span></span></li> - <li>{{Glossary("Request header")}}: Заголовки, що містять більше інформації про ресурс, який потрібно отримати, або про самого клієнта.</li> - <li>{{Glossary("Response header")}}: Заголовки з додатковою інформацією про відповідь, як-от її місцезнаходження або про сам сервер (ім'я, версія,…).</li> - <li>{{Glossary("Entity header")}}: Заголовки, що містять більше інформації про тіло об'єкта, як-от його довжина вмісту або тип MIME.</li> -</ul> - -<p>Основний запит в одним заголовком:</p> - -<pre>GET /example.http HTTP/1.1 -Host: example.com -</pre> - -<p>Перенаправлення мають обов'язкові заголовки ({{HTTPHeader("Location")}}):</p> - -<pre>302 Found -Location: /NewPage.html -</pre> - -<p>Типовий набір заголовків:</p> - -<pre>304 Not Modified -Access-Control-Allow-Origin: * -Age: 2318192 -Cache-Control: public, max-age=315360000 -Connection: keep-alive -Date: Mon, 18 Jul 2016 16:06:00 GMT -Server: Apache -Vary: Accept-Encoding -Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront) -X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw== -X-Backend-Server: developer6.webapp.scl3.mozilla.com -X-Cache: Hit from cloudfront -X-Cache-Info: cached -</pre> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li>Спеціфікація - <ol> - <li>Сінтаксіс заголовків (<a href="https://tools.ietf.org/html/rfc7230#section-3.2">headers</a>) у HTTP спеціфікації.</li> - </ol> - </li> - <li>Технічна довідка - <ol> - <li><a href="/en-US/docs/Web/HTTP/Headers">Список усіх HTTP заголовків</a></li> - </ol> - </li> - <li>Глосарій (<a href="/en-US/docs/Glossary">Glossary)</a> - <ol> - <li>{{Glossary("HTTP header")}}</li> - <li>{{Glossary("General header")}}</li> - <li>{{Glossary("Request header")}}</li> - <li>{{Glossary("Response header")}}</li> - <li>{{Glossary("Entity header")}}</li> - <li>{{Glossary("Forbidden header name")}}</li> - <li>{{Glossary("Forbidden response header name")}}</li> - <li>{{Glossary("CORS-safelisted request header")}}</li> - <li>{{Glossary("CORS-safelisted response header")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/hyperlink/index.html b/files/uk/glossary/hyperlink/index.html deleted file mode 100644 index 868551e6a8..0000000000 --- a/files/uk/glossary/hyperlink/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Гіперпосилання -slug: Glossary/Hyperlink -translation_of: Glossary/Hyperlink -original_slug: Glossary/Посилання ---- -<p>Гіперпосилання підключають веб-сторінки чи елементи даних один до одного. HTML елементи {{HTMLElement ("a")}} визначають гіперпосилання з місця на веб-сторінці (як-от текстовий рядок або зображення) на місце на іншій або на тій же сторінці.</p> - -<h2 id="Дізнайся_більше">Дізнайся більше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li>{{interwiki("wikipedia", "Гіперпосилання", "Гіперпосилання")}} на Wikipedia</li> - <li>Посібник по <a href="/uk/docs/Web/Guide/HTML/Hyperlink">гіперпосиланням</a> на MDN</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<p><a class="external external-icon" href="https://www.w3.org/TR/html52/textlevel-semantics.html#elementdef-a">HTML5 a - hyperlink - W3C</a></p> - -<h3 id="Learn_about_it">Learn about it</h3> - -<ul> - <li><a href="/uk/docs/Web/HTML/Element/a"><code><a></code> on MDN</a></li> - <li><a href="/uk/docs/Web/HTML/Element/link"><code><link></code> on MDN</a></li> -</ul> diff --git a/files/uk/glossary/hypertext/index.html b/files/uk/glossary/hypertext/index.html deleted file mode 100644 index 80823e7c37..0000000000 --- a/files/uk/glossary/hypertext/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Гіпертекст -slug: Glossary/Hypertext -tags: - - Глосарій - - Мережа -translation_of: Glossary/Hypertext ---- -<p>Гіпертекст - це текст, який містить посилання на інші тексти, на відміну від одного лінійного потоку, як у романі.</p> - -<p>Термін ввів Тед Нельсон близько1965.</p> - -<h2 id="Вивчити_детальніше">Вивчити детальніше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li>{{interwiki("wikipedia", "Гіпертекст", "Гіпертекст")}} на Wikipedia</li> -</ul> - -<h3 id="Technical_reference">Technical reference</h3> - -<ul> - <li><a href="http://www.ualberta.ca/dept/chemeng/AIX-43/share/man/info/C/a_doc_lib/aixuser/aix6kdov/hyperv1aix.htm">Hypertext Information Base</a></li> -</ul> diff --git a/files/uk/glossary/ide/index.html b/files/uk/glossary/ide/index.html deleted file mode 100644 index 7b0b8b9c02..0000000000 --- a/files/uk/glossary/ide/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: IDE -slug: Glossary/IDE -tags: - - CodingScripting - - Словник -translation_of: Glossary/IDE ---- -<p><span class="_Tgc">Інтегроване Середовище Розробки (<strong>IDE</strong>) або Інтерактивне Середовище Розробки це програмне забезпечення що надає комплексні можливості для програмістів для розробки програмного забезпечення.</span> IDE зазвичай складається з редактора вихідного коду, засобів автоматизації побудови та відладчика.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальна_інформація">Загальна інформація</h3> - -<ul> - <li>{{interwiki("wikipedia", "Інтегроване_середовище_розробки", "IDE")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/identifier/index.html b/files/uk/glossary/identifier/index.html deleted file mode 100644 index c673ce87e6..0000000000 --- a/files/uk/glossary/identifier/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Ідентифікатор -slug: Glossary/Identifier -tags: - - Початківець - - Словник -translation_of: Glossary/Identifier -original_slug: Glossary/ідентифікатор ---- -<p>Послідовність символів в коді, яка у недвозначний спосіб позначає (ідентифікує) {{glossary("variable", "змінну")}}, {{glossary("function", "функцію")}} або {{glossary("property", "властивість")}}, називається ідентифікатором.</p> - -<p>У {{glossary("JavaScript")}}, ідентифікатори можуть містити лише алфавітно-цифрові символи (а також "$" або "_"), і не можуть починатися з цифри. Ідентифікатор відрізняється від <strong>рядків</strong> тим, що рядок являє собою дані, натомість ідентифікатор є частиною коду. В JavaScript, немає можливості перетворити ідентифікатори в рядки, але іноді є можливість <strong>перетворити</strong> рядки у ідентифікатори.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "ідентифікатор#програмування", "Ідентифікатор")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/iife/index.html b/files/uk/glossary/iife/index.html deleted file mode 100644 index ac1a957c33..0000000000 --- a/files/uk/glossary/iife/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: IIFE -slug: Glossary/IIFE -tags: - - JavaScript - - Словник - - Шаблон проектування -translation_of: Glossary/IIFE ---- -<p><strong>Негайно виконуваний функціональний вираз </strong>(IIFE, Immediately Invoked Function Expression) — {{glossary("function", "функція")}} у {{glossary("JavaScript")}}, яка виконується одразу після оголошення. </p> - -<pre class="brush: js">(function () { - statements -})();</pre> - -<p>Це шаблон проектування, також відомий як {{glossary("Self-Executing Anonymous Function","самовиконувана анонімна функція")}}, який складається з двох основних частин:</p> - -<ol> - <li>Перша - це анонімна функція, чия лексична область видимості знаходиться всередині {{jsxref("Operators/Grouping", "оператора групування")}} <code>()</code>. Це запобігає доступу до змінних у ідіомі IIFE, а також забрудненню глобальної області видимості.</li> - <li>Друга частина створює негайно виконуваний функціональний вираз <code>()</code>, через який рушій JavaScript безпосередньо інтерпретуватиме функцію.</li> -</ol> - -<h2 id="Приклади">Приклади</h2> - -<p>Функція стає функціональним виразом, який негайно виконується. Змінна всередині виразу недоступна за його межами.</p> - -<pre class="brush: js">(function () { - var aName = "Баррі"; -})(); -// Змінна aName є недоступною з-поза меж області видимості -aName // викидає "Uncaught ReferenceError: aName is not defined"</pre> - -<p>Присвоєння IIFE змінній зберігає значення, яке повертає функція, а не саме визначення функції.</p> - -<pre class="brush: js">var result = (function () { - var name = "Баррі"; - return name; -})(); -// Негайно створює результат: -result; // "Баррі" -</pre> - -<section id="Quick_Links"> -<ol> - <li>Дізнатись більше - <ol> - <li><a href="/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Функції">Швидкий приклад</a> (в кінці розділу "Функції", прямо перед "Користувацькими об'єктами")</li> - </ol> - </li> - <li>Статті Вікіпедії - <ol> - <li><a href="https://en.wikipedia.org/wiki/Immediately_invoked_function_expression">IIFE</a></li> - </ol> - </li> - <li><a href="/uk/docs/Glossary">Словник</a> - <ol> - <li>{{Glossary("Function","Функція")}}</li> - <li>{{Glossary("Self-Executing Anonymous Function","Самовиконувана анонімна функція")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/index.html b/files/uk/glossary/index.html deleted file mode 100644 index 4fed9d13ad..0000000000 --- a/files/uk/glossary/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Словник -slug: Glossary -tags: - - Покажчик - - Початківець - - Словник -translation_of: Glossary ---- -<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Вивчіть нове визначення:"})}}</div> - -<p>Веб технології містять довжелезний перелік різних визначень та скорочень, що використовуються в документації та написані коду. Цей словник надає визначення слів та скорочень, які вам потрібно знати, що розуміти та розвивати веб.</p> - -<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> - -<h2 id="Зробіть_свій_внесок">Зробіть свій внесок</h2> - -<p>Робота над словником це нескінченний процес. Ви можете допомогти покращити його <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">додавши новий опис</a> або покращивши наявний. Щоб розпочати просто натисніть на кнопку нижче або виберіть одне із запропонованих нижче визначень.</p> - -<p><strong><a href="/uk/docs/new?parent=4391">Додати новий запис до словника</a></strong></p> - -<p>{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p> - -<p>Якщо ви бажаєте дізнатись більше про те як зробити власний внесок у розвиток словника, ознайомтесь зі <a href="/en-US/docs/MDN/Doc_status/Glossary">сторінкою стану документації словника</a>.</p> diff --git a/files/uk/glossary/internet/index.html b/files/uk/glossary/internet/index.html deleted file mode 100644 index fa2f4a921f..0000000000 --- a/files/uk/glossary/internet/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Інтернет -slug: Glossary/Internet -tags: - - NeedsContent - - WWW - - Початківець - - Словник -translation_of: Glossary/Internet -original_slug: Glossary/Інтернет ---- -<p><strong>Інтернет</strong> (також <strong>міжмере́жжя</strong>) — <strong>всесвітня мережа</strong> з мереж, яка використовує стіс {{glossary("protocol", "протоколів")}} {{glossary("TCP")}}/{{glossary("IPv6", "IP")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Навчання">Навчання</h3> - -<ul> - <li><a href="/en-US/Learn/How_the_Internet_works">Як працює Інтернет</a> (вступ для початківців)</li> -</ul> diff --git a/files/uk/glossary/java/index.html b/files/uk/glossary/java/index.html deleted file mode 100644 index efdb878cfc..0000000000 --- a/files/uk/glossary/java/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Java -slug: Glossary/Java -tags: - - Java - - Мова Програмування - - Словник -translation_of: Glossary/Java ---- -<p>Java — це {{glossary("OOP", "об'єктно-орієнтована")}}, заснована на {{Glossary("class", "класах")}} переносна мова {{Glossary("computer programming", "комп'ютерного програмування")}}, створена з думкою про скорочення кількості залежностей реалізації.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "Java")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/javascript/index.html b/files/uk/glossary/javascript/index.html deleted file mode 100644 index 6cf672f231..0000000000 --- a/files/uk/glossary/javascript/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: JavaScript -slug: Glossary/JavaScript -tags: - - JavaScript - - Словник -translation_of: Glossary/JavaScript ---- -<p>JavaScript (JS) — мова програмування, використовувана переважно для визначення поведінки динамічних веб-сторінок з клієнтського боку, але також досить часто вживана з боку {{Glossary("Server","сервера")}} в середовищах на кшталт <a href="http://nodejs.org/">node.js</a>.</p> - -<p>Попри споріднені назви, JavaScript не пов'язаний з {{interwiki("wikipedia", "Java", "Java")}}. Обидві є товарними знаками компанії Oracle у США та інших країнах, але це геть різні мови програмування, що мають різні синтаксис та призначення.</p> - -<p>Задумана Бренданом Ейком (Brendan Eich), який потім став робітником Netscape Corporation, як серверна мова, JavaScript у вересні 1995 року увійшла до Netscape Navigator 2.0. JavaScript отримала негайне визнання, а {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} запровадив підтримку JavaScript під назвою JScript в серпні 1996 року.</p> - -<p>У листопаді 1996 року Netscape розпочав співпрацю з ECMA International, щоб зробити JavaScript галузевим стандартом. Відтоді стандартизована JavaScript дістала назву ECMAScript (специфікація ECMA-262), остання (восьма) редакція якої доступна станом на червень 2017.</p> - -<p>JavaScript здебільшого використовується веб-переглядачами, надаючи розробникам можливості взаємодії із вмістом сторінок через {{Glossary("DOM")}}, орудування даними за допомогою {{Glossary("AJAX")}} та {{Glossary("IndexedDB")}}, малювання на {{Glossary("canvas", "полотні")}} та взаємодії через різні {{Glossary("API")}} з пристороєм, де запущено переглядач. JavaScript стала однією з найпоширеніших мов програмування завдяки примноженню різноманітних {{Glossary("API")}} в переглядачах та поліпшенню їх швидкодії.</p> - -<p>Останім часом, мова JavaScript набула навіть більшого поширення завдяки успіхам <a href="http://nodejs.org/" rel="external">node.js</a> — найпопулярнішого міжплатформового виконавчого середовища JavaScript, що працює поза переглядачем. Node.js дозволяє використовувати JavaScript як мову сценаріїв для автоматизації та створення повноцінного сервера з використаням протоколів {{Glossary("HTTP")}} та {{Glossary("WebSockets")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} у Вікіпедії</li> -</ul> - -<h3 id="Вивчення_JavaScript">Вивчення JavaScript</h3> - -<ul> - <li>{{Link("/uk/docs/Web/JavaScript/Guide")}}</li> - <li><a href="http://nodeschool.io/#workshoppers">Воркшоп «javascripting» на NodeSchool</a></li> - <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">Курс JavaScript на codecademy.com</a></li> - <li><a href="http://ejohn.org/apps/learn/" rel="external">«Learning Advanced JavaScript» Джона Резига</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">Останній стандарт ECMAScript</a></li> - <li>{{Link("/uk/docs/Web/JavaScript/reference")}}</li> - <li><a href="http://eloquentjavascript.net/" rel="external">Книга «Eloquent JavaScript»</a></li> -</ul> diff --git a/files/uk/glossary/json/index.html b/files/uk/glossary/json/index.html deleted file mode 100644 index 54b2f515c9..0000000000 --- a/files/uk/glossary/json/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: JSON -slug: Glossary/JSON -tags: - - JSON - - Вступ - - Словник -translation_of: Glossary/JSON ---- -<p><strong>Об'єктний запис JavaScript</strong> (JSON, JavaScript Object Notation) — це формат подання даних. Всупереч назві, між JSON та форматом запису об'єктів у {{Glossary("JavaScript")}}, немає повної відповідності, а отже й сумісності. Втім, синтаксис дуже схожий. Й хоча підтримка JSON є у багатьох мовах програмування, найкраще придається він саме в застосунках, написаних мовою JavaScript, як-от web-сайти чи розширення {{Glossary("Browser", "переглядачів")}}.</p> - -<p>JSON може подавати числа, тип boolean, рядки, null, масиви (впорядковані послідовності значень), а також об'єкти (містять пари ключ-значення), які й собі можуть містити значення всіх наведених типів (зокрема, інші об'єкти чи масиви). Складніші дані, як-от {{Glossary("Функція", "функції")}}, {{Glossary("Regular_expression", "регулярні вирази")}} чи дати, в JSON неможливо подати як є — їх доведеться попередньо перетворювати на дані підтримуваних типів. Початково об'єкти Date перетворювано на рядок, що містить запис дати у форматі ISO, тож не всі відомості буде загублено. Втім, якщо є потреба зберігати у JSON деякі додаткові типи даних, доведеться виконати належні перетворення до серіалізування та після десеріалізування.</p> - -<p>Формат JSON, як і XML, уможливлює збереження ієрархічних даних, на відміну від більш традиційного CSV. Чимало інструментів надають можливість перетворення даних між цими двома форматами, як-от <a href="https://json-csv.com/">JSON to CSV Converter</a> або ж <a href="https://jsontoexcel.com/">JSON to CSV Converter</a>.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "JSON", "JSON")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>{{Link("/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON")}} на MDN</li> -</ul> diff --git a/files/uk/glossary/ligature/index.html b/files/uk/glossary/ligature/index.html deleted file mode 100644 index 645e846c39..0000000000 --- a/files/uk/glossary/ligature/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Лігатура -slug: Glossary/Ligature -tags: - - CSS - - Дизайн - - Словник -translation_of: Glossary/Ligature ---- -<p><strong>Лігатура</strong> - це об'єднання двох символів у єдиний друкований символ. Наприклад, у французській мові "œ" є лігатурою "oe".</p> - -<p>Ви можете застосовувати лігатури на веб-сторінці за допомогою {{cssxref("font-variant-ligatures")}}.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li>{{interwiki("wikipedia", "Лігатура (типографія)", "Лігатура")}} на Вікіпедії</li> -</ol> -</section> diff --git a/files/uk/glossary/loop/index.html b/files/uk/glossary/loop/index.html deleted file mode 100644 index b2e8ec9b12..0000000000 --- a/files/uk/glossary/loop/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Цикл -slug: Glossary/loop -tags: - - Програмування - - Словник - - потік керування -translation_of: Glossary/loop ---- -<p>Цикл - це послідовність інструкцій, яка безперервно повторюється, поки не буде виконана певна умова у {{Glossary("computer programming","комп'ютерному програмуванні")}}. Прикладом може бути процес отримання елементу даних або його зміна, з перевіркою, що певна {{Glossary("conditional","умова")}} виконана, наприклад, що лічильник досяг прописаного значення.</p> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Цикл_for">Цикл for</h3> - -<h4 id="Синтаксис">Синтаксис: </h4> - -<pre>for (інструкція 1; інструкція 2; інструкція 3){ - блок коду для виконання -}</pre> - -<ul> - <li>Інструкція 1 виконується один раз перед запуском блоку коду.</li> - <li>Інструкція 2 визначає умову, необхідну для виконання блоку коду.</li> - <li>Інструкція 3 виконується кожний раз, коли запускається блок коду.</li> -</ul> - -<h4 id="Приклад">Приклад:</h4> - -<pre class="brush: js"><span class="keyword token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #0077aa; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>for</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>(</span><span class="keyword token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #0077aa; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>var</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> i </span><span class="operator token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #a67f59; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>=</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> </span><span class="number token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #990055; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>0</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>;</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> i </span><span class="operator token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #a67f59; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'><</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> </span><span class="number token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #990055; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>10</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>;</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> i</span><span class="operator token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #a67f59; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>++</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>)</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>{</span> -<span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> console</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>.</span><span class="function token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #dd4a68; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>log</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>(</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'>i</span><span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>)</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> </span> -<span class="punctuation token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #999999; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>}</span><span style='background-color: transparent; color: #333333; direction: ltr; display: inline !important; float: none; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre; word-wrap: normal;'> </span> -<span class="comment token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #708090; display: inline; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>//Цей цикл виведе числа 0-9, зупиниться, коли буде виконана умова </span><span class="comment token" style='background-clip: border-box; background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #708090; display: inline; font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre;'>(i = 10)</span> -</pre> - -<p>Для наведеного вище прикладу, синтаксис наступний: </p> - -<ul> - <li>Інструкція 1 задає змінну циклу (var i = 0).</li> - <li>Інструкція 2 задає умову циклу (i < 10).</li> - <li>Інструкція 3 збільшує значення i (i++) кожний раз, коли виконується блок коду.</li> -</ul> - -<h3 id="Цикл_while">Цикл while</h3> - -<h4 id="Синтаксис_2">Синтаксис:</h4> - -<pre>while (умова){ - блок коду для виконання -} -</pre> - -<ul> - <li>Блок коду буде виконуватись, поки умова дорівнює true.</li> -</ul> - -<h4 id="Приклад_2">Приклад:</h4> - -<pre class="brush: js"><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #9872a2; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>var</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #6089b4; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>i</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #676867; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>=</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #6089b4; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>0</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>;</span> -<span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #9872a2; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>while</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>(</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #6089b4; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>i</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #676867; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'><</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #6089b4; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>5</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>){</span> -<span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c7444a; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>console</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>.</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #9872a2; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>log</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>(</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #6089b4; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>i</span><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>)</span> -<span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'> </span><font color="#0b0118">i</font><span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #676867; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>++</span> -<span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #c5c8c6; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>}</span> -<span style='background-color: transparent; border-bottom-style: none; border-bottom-width: 0px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; color: #9a9b99; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>//Цей цикл виведе числа 0-4, зупиниться, коли умова дорівнюватиме false (i >= 5)</span> -</pre> - -<p>Для наведеного вище прикладу синтаксис наступний: </p> - -<ul> - <li>Блок коду буде виконуватись, доки значення змінної (i) менше 5.</li> -</ul> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{interwiki("wikipedia", "Цикл_(програмування)","Цикл")}} на Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/method/index.html b/files/uk/glossary/method/index.html deleted file mode 100644 index 976f480f8f..0000000000 --- a/files/uk/glossary/method/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Метод -slug: Glossary/Method -tags: - - JavaScript - - Словник - - Функція -translation_of: Glossary/Method -original_slug: Glossary/Метод ---- -<p><span class="seoSummary"><strong>Метод</strong> — це {{glossary("function", "функція")}}, яка є {{glossary("property", "властивістю")}} {{glossary("object", "об'єкта")}}.</span> Існує два види методів: <em>Примірниковий метод</em>, який можна викликати лише за наявності об'єкта, або <em>{{Glossary("static method", "Статичний метод")}}</em>, який можна викликати безпосередньо на конструкторі об'єкта.</p> - -<div class="note"> -<p><strong>Заувага:</strong> У JavaScript сама функція є об'єктом, а тому метод, насправді є {{glossary("object reference", "посиланням на об'єкт")}} функції.</p> -</div> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Метод_(програмування)", "Метод")}} у Вікіпедії</li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">Оголошення метода у JavaScript</a> (порівняння звичайного і нового скороченого запису)</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Methods_Index">Перелік вбудованих методів у JavaScript</a></li> - <li><a href="/uk/docs/Glossary">MDN Web Docs Glossary</a> - <ul> - <li>{{Glossary("function", "функція")}}</li> - <li>{{Glossary("object", "об'єкт")}}</li> - <li>{{Glossary("property", "властивість")}}</li> - <li>{{Glossary("static method", "статичний метод")}}</li> - </ul> - </li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">Оголошення метода у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/mozilla_firefox/index.html b/files/uk/glossary/mozilla_firefox/index.html deleted file mode 100644 index 3963108137..0000000000 --- a/files/uk/glossary/mozilla_firefox/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Mozilla Firefox -slug: Glossary/Mozilla_Firefox -tags: - - Firefox - - Mozilla - - Mozilla Firefox - - Переглядач - - Словник -translation_of: Glossary/Mozilla_Firefox ---- -<p>Mozilla Firefox <span style="line-height: 1.5;">це безкоштовний <a href="https://developer.mozilla.org/uk/docs/Glossary/Browser">переглядач</a> з відкритим кодом, розробку якого здійснює корпорація Mozilla. Firefox працює на Windows, OS X, Linux, та Android.</span></p> - -<p><span class="tlid-translation translation"><span title="">Вперше випущений у листопаді 2004 року, Firefox повністю настроюється за допомогою тем, плагінів та <a href="https://developer.mozilla.org/uk/docs/Mozilla/Add-ons">додатків</a></span></span><span style="line-height: 1.5;">. Firefox використовує <a href="https://developer.mozilla.org/uk/docs/Glossary/Gecko">Gecko</a> </span> <span class="tlid-translation translation"><span title="">для відображення веб-сторінок і реалізує як поточні, так і майбутні Веб-стандарти</span></span><span style="line-height: 1.5;">.</span></p> - -<h2 id="Дізнатись_більше"><span style="line-height: 1.5;">Дізнатись більше</span></h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://www.mozilla.org/uk/firefox/">Mozilla Firefox офіційний веб-сайт</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Mozilla/Firefox">Документація розробника про MDN</a></li> -</ul> diff --git a/files/uk/glossary/nan/index.html b/files/uk/glossary/nan/index.html deleted file mode 100644 index 3f4b24b2af..0000000000 --- a/files/uk/glossary/nan/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: NaN -slug: Glossary/NaN -tags: - - JavaScript - - NaN - - Обчислення -translation_of: Glossary/NaN ---- -<p>NaN (Not a Number) належить до <em>числового</em> {{Glossary("Type", "типу даних")}} та означає невизначений результат або таке значення, яке неможливо подати. Переважно це результати операцій над числами з рухомою комою.</p> - -<p>Наприклад, NaN може представляти нескінченність, результат ділення на нуль, відсутнє значення, або квадратний корінь від'ємного числа (бо то уявне число, а числа з рухомою комою є дійсними).</p> - -<p>Як це виглядає на практиці? Результат математичної операції в {{glossary("JavaScript")}} може бути NaN, що в JavaScript означає "невизначений". Така операція може зіпсувати результати обчислень і поведінку програми в цілому. Більш того, якщо йдеться про один із проміжних результатів складного обчислення, знайти помилку може буде непросто. На щастя, результат NaN красномовно свідчить про те, що операція здійснюється над неприйнятними значеннями. А те, що результатом всякої математичної операції над NaN завжди лишається NaN, дозволяє значно легше відстежити походження помилкового значення.</p> - -<h2 id="Дізнатись_більше" style="line-height: 30px;">Дізнатись більше</h2> - -<h3 id="Загальні_відомості" style="line-height: 24px;">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "NaN")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN в JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/node.js/index.html b/files/uk/glossary/node.js/index.html deleted file mode 100644 index cb4a59aa94..0000000000 --- a/files/uk/glossary/node.js/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Node.js -slug: Glossary/Node.js -tags: - - JavaScript - - node.js - - Інфраструктура - - Словник -translation_of: Glossary/Node.js ---- -<p>Node.js — міжплатформове виконавче середовище {{Glossary("JavaScript")}}, що уможливлює створення серверних та мережевих застосунків за допомогою JavaScript.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Node.js")}} у Вікіпедії</li> - <li><a href="https://nodejs.org/">Сайт Node.js</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="https://nodejs.org/api/">Довідник з API</a></li> - <li><a href="https://nodejs.org/documentation/tutorials/">Підручники</a></li> -</ul> diff --git a/files/uk/glossary/null/index.html b/files/uk/glossary/null/index.html deleted file mode 100644 index 74bb9e6b61..0000000000 --- a/files/uk/glossary/null/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 'Null' -slug: Glossary/Null -tags: - - Словник -translation_of: Glossary/Null ---- -<p>У комп'ютерних науках величина <strong><code>null</code></strong> представляє собою посилання, що вказує, як правило, навмисно, на неіснуючий або недійсний {{glossary("object", "об'єкт")}} чи адресу. Значення null-посилання різниться у реалізаціях різних мов.</p> - -<p>У мові {{Glossary("JavaScript")}} null є однією з {{Glossary("Primitive", "простих величин")}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Нульовий вказівник")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних у JavaScript</a></li> - <li>Глобальний об'єкт JavaScript: {{jsxref("null")}}</li> -</ul> diff --git a/files/uk/glossary/number/index.html b/files/uk/glossary/number/index.html deleted file mode 100644 index 4d3431e705..0000000000 --- a/files/uk/glossary/number/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Number -slug: Glossary/Number -tags: - - JavaScript - - Словник -translation_of: Glossary/Number ---- -<p>У {{Glossary("JavaScript")}}, <strong>Number</strong> є числовим типом даних, <a class="external external-icon" href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%B7_%D1%80%D1%83%D1%85%D0%BE%D0%BC%D0%BE%D1%8E_%D0%BA%D0%BE%D0%BC%D0%BE%D1%8E">64-бітним значенням подвійної точності формату IEEE 754</a>. У інших програмних мовах можуть існувати інші числові типи, наприклад: Integer, Float, Double або Bignum.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li> - <p><span>{{Interwiki("wikipedia", "Тип_даних#Числові_типи_даних", "Числові типи даних")}} на Вікіпедії</span></p> - </li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>Структури даних JavaScript: <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_number">Number</a></li> - <li>Глобальний об'єкт JavaScript {{jsxref("Число","Number")}}</li> -</ul> diff --git a/files/uk/glossary/object/index.html b/files/uk/glossary/object/index.html deleted file mode 100644 index 264b184892..0000000000 --- a/files/uk/glossary/object/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Об'єкт -slug: Glossary/Object -tags: - - Об'єкт -translation_of: Glossary/Object ---- -<p>Об'єкт являє собою структуру, що містить власне дані та інструкції для обробки даних. Часом об'єкти стосуються справжніх речей, як-от авто чи мапа у грі в автомобільні перегони. Прикладами {{glossary("OOP", "об'єктно-орієнтованих мов програмування")}} є {{glossary("JavaScript")}}, Java, C++, Python, Ruby тощо.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Об'єктно-орієнтоване_програмування", "Об'єктно-орієнтоване програмування")}} у Вікіпедії</li> - <li>{{jsxref("Object", "Об'єкт")}} у <a href="/uk/docs/Web/JavaScript/Reference">Довіднику з JavaScript</a></li> - <li><a href="/uk/docs/Web/JavaScript/Data_structures#Objects">Об'єкт серед структур даних у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/object_reference/index.html b/files/uk/glossary/object_reference/index.html deleted file mode 100644 index aaba46f1e6..0000000000 --- a/files/uk/glossary/object_reference/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Посилання на об'єкт -slug: Glossary/Object_reference -tags: - - Посилання - - Словник -translation_of: Glossary/Object_reference ---- -<p><strong>Посилання на об'єкт</strong> (англ. object reference) — це певний <em>ключ</em>, призначений для опосередкованого доступу до об'єкта. Залежно від мови програмування то може бути адреса об'єкта в пам'яті, чи будь-який неповторний ключ (рядок або число) в асоціативному масиві абощо.</p> - -<p>В таких мовах програмування, як C/C++, розрізняють три різновиди змінних: вказівник (англ. pointer), посилання (англ. reference) та, власне, значення. Це рівною мірою стосується як {{Glossary("Primitive", "простих типів даних")}}, так і {{Glossary("object", "об'єктів")}}. Натомість в Java, JavaScript та багатьох інших мовах розрізняють лише значення (за значенням зберігаються та передаються лише прості величини) та посилання (об'єкти завжди передаються та зберігаються за посиланням).</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Збагнути різницю між значенням та посиланням легко з порівняння двох прикладів.</p> - -<p>Пості величини завжди зберігаються як значення, а тому копіювання означає створення незалежної копії самого значення:</p> - -<pre class="brush: js">var origin = 5; -var clone = origin; - -console.log(origin); // виводить 5 -console.log(clone); // виводить 5 - -origin++; - -console.log(origin); // виводить 6 -console.log(clone); // виводить 5</pre> - -<p>Втім змінна ніколи не зберігає сам об'єкт, а лише посилання на нього. Звідси випливає те, що копіювання змінної, що посилається на об'єкт, створює не копію об'єкта, а копію посилання, а отже обидві змінні посилаються на одне й те саме:</p> - -<pre class="brush: js">var origin = {x: 5}; -var clone = origin; - -console.log(origin.x); // виводить 5 -console.log(clone.x); // виводить 5 - -origin.x++; - -console.log(origin.x); // виводить 6 -console.log(clone.x); // виводить 6 -</pre> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Посилання_(програмування)", "Посилання")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/oop/index.html b/files/uk/glossary/oop/index.html deleted file mode 100644 index c6e1e6a182..0000000000 --- a/files/uk/glossary/oop/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: OOP (Об'єктно-орієнтоване програмування) -slug: Glossary/OOP -tags: - - Об'єкт - - Парадигма - - Програмування -translation_of: Glossary/OOP -original_slug: Glossary/ООП ---- -<p><strong>OOP </strong>(об'єктно-орієнтоване програмування) є підходом у програмуванні, який передбачає, що дані сховано всередині об'єктів, а операції здійснюються радше над <strong>{{glossary("object", "об'єктами")}}</strong>, ніж над їх складовими.</p> - -<p>{{glossary("JavaScript")}} є значною мірою об'єктно-орієнтованою мовою. Вона пропонує модель даних засновану на <em>прототипах</em> (<a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">на противагу моделі, заснованій на класах</a>).</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Об'єктно-орієнтоване_програмування", "Об'єктно-орієнтоване програмування")}} у Вікіпедії</li> - <li><a href="uk/docs/Learn/JavaScript/Objects">Вступ до об'єктно-орієнтованої JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/operator/index.html b/files/uk/glossary/operator/index.html deleted file mode 100644 index 3b592f879c..0000000000 --- a/files/uk/glossary/operator/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Оператор -slug: Glossary/Operator -tags: - - Оператори - - Словник -translation_of: Glossary/Operator -original_slug: Glossary/Оператор ---- -<p>Зарезервований <strong>вираз</strong>, що позначається знаком пунктуації чи буквенно-цифровим символом, що забезпечує вбудований функціонал, що може варіюватись в залежності від мови. Наприклад, в JavaScript оператор додавання ("+") може додавати числа та, крім цього, виконувати конкатинацію(злиття) рядків; оператор "not" (позн. "!") надає виразу протилежного значення, наприклад, вираз зі значенням <code>true</code> повертатиме <code>false</code>.</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Оператор (програмування)")}} on Wikipedia</li> -</ul> - -<h3 id="Technical_reference">Technical reference</h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators">JavaScript operators</a></li> -</ul> diff --git a/files/uk/glossary/polyfill/index.html b/files/uk/glossary/polyfill/index.html deleted file mode 100644 index 8172a1e8db..0000000000 --- a/files/uk/glossary/polyfill/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Polyfill -slug: Glossary/Polyfill -tags: - - polyfill - - Словник -translation_of: Glossary/Polyfill ---- -<p>Поліфіл (англ. polyfill) — це програмний код (зазвичай мовою JavaScript), який використовується як запасний варіант реалізації певних функцій в старих {{glossary("Browser", "переглядачах")}}, які тих функцій не підтримують.</p> - -<p>Для прикладу, поліфіл може бути використаний для того, щоб відтворити функціонал HTML-елементу <code><canvas></code> у переглядачі Internet Explorer 7 використовуючи плагін Silverlight, підтримку подоби rem величин в CSS, або ж {{cssxref("text-shadow")}} тощо.</p> - -<p>Слід розуміти, що з технічних причин поліфіл не завжди може повною мірою відтворити можливості, що відсутні у старих переглядачах. Деякі функції можна відтворити лише частково, а для деяких створення запасного варіанту є геть неможливим.</p> - -<h2 id="Дізнатися_більше">Дізнатися більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill">What is a polyfill?</a> (стаття Remy Sharp'а, який першим запропонував термін «поліфіл»)</li> -</ul> diff --git a/files/uk/glossary/primitive/index.html b/files/uk/glossary/primitive/index.html deleted file mode 100644 index 1029704199..0000000000 --- a/files/uk/glossary/primitive/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Простий тип даних -slug: Glossary/Primitive -tags: - - JavaScript - - Словник -translation_of: Glossary/Primitive ---- -<p><span class="seoSummary"><strong>Примітив</strong> (проста величина, простий тип даних) являє собою дані, що не є {{glossary("object", "об'єктом")}} та не мають {{glossary("method","методів")}}. В JavaScript є шість простих типів даних: {{glossary("string")}}, {{glossary("number")}}, {{glossary("boolean")}}, {{glossary("null")}}, {{glossary("undefined")}} та {{glossary("symbol")}} (з'явився в {{glossary("ECMAScript")}} 2015).</span></p> - -<p>Зазвичай, прості величини подаються безпосередньо як є на найнижчому рівні реалізації мови програмування.</p> - -<p>Всі прості типи даних є <strong>незмінними</strong> (англ. immutable).</p> - -<h2 id="Об'єкти-обгортки_в_JavaScript">Об'єкти-обгортки в JavaScript</h2> - -<p>За винятком {{jsxref("Global_Objects/null", "null")}} та {{jsxref("Global_Objects/undefined", "undefined")}}, всі прості типи даних мають відповідники серед класів, що являють собою обгортки для простих величин:</p> - -<ul> - <li>{{jsxref("String")}} є обгорткою для рядків.</li> - <li>{{jsxref("Number")}} є обгорткою для чисел.</li> - <li>{{jsxref("Boolean")}} є обгорткою для простого типу даних Boolean.</li> - <li>{{jsxref("Symbol")}} є обгорткою для простого типу даних Symbol.</li> -</ul> - -<p>Метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">valueOf()</a> класу-обгортки вертає просту величину.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних у JavaScript</a></li> - <li>{{Interwiki("wikipedia", "Тип_даних#.D0.9F.D1.80.D0.BE.D1.81.D1.82.D1.96_.D1.82.D0.B8.D0.BF.D0.B8_.D0.B4.D0.B0.D0.BD.D0.B8.D1.85", "Прості типи даних")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/property/css/index.html b/files/uk/glossary/property/css/index.html deleted file mode 100644 index f39a86f9e1..0000000000 --- a/files/uk/glossary/property/css/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Властивість (CSS) -slug: Glossary/property/CSS -tags: - - Словник -translation_of: Glossary/property/CSS ---- -<p><strong>Властивість CSS</strong> - це характеристика (як колір), чия величина визначає один аспект того, як веб-переглядач має відображати елемент.</p> - -<p>Ось приклад правила CSS:</p> - -<pre class="brush: css">/* "div" - це селектор, який вказує, що всі елементи div */ -/* у документі матимуть стиль згідно з цим правилом */ -div { - /* Властивість "color" з величиною "black" вказує */ - /* що текст матиме чорний колір */ - color: black; - - /* Властивість "background-color" з величиною "white" вказує */ - /* що елементи матимуть білий колір фону */ - background-color: white; -}</pre> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/Learn/CSS">Learn CSS</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/docs/Web/CSS/Reference">CSS довідник на MDN</a></li> - <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">The CSS Working Group current work</a></li> -</ul> diff --git a/files/uk/glossary/property/index.html b/files/uk/glossary/property/index.html deleted file mode 100644 index 93791d64fe..0000000000 --- a/files/uk/glossary/property/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Властивість -slug: Glossary/property -tags: - - Словник -translation_of: Glossary/property ---- -<p>Термін <strong>властивість</strong> може мати декілька значень в залежності від контексту. Він може означати:</p> - -<p>{{GlossaryDisambiguation}}</p> diff --git a/files/uk/glossary/property/javascript/index.html b/files/uk/glossary/property/javascript/index.html deleted file mode 100644 index 3bb124fa01..0000000000 --- a/files/uk/glossary/property/javascript/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Властивість (JavaScript) -slug: Glossary/property/JavaScript -tags: - - Словник -translation_of: Glossary/property/JavaScript ---- -<p><strong>Властивість у</strong> <strong>JavaScript</strong> - це характеристика об'єкта, що часто описує атрибути, пов'язані зі структурою даних.</p> - -<p>Існує два види властивостей: </p> - -<ul> - <li><em>Властивості екземпляра</em> містять дані, специфічні для даного екземпляра об'єкта. </li> - <li><em>Статичні властивості </em>містять дані, спільні для усіх екземплярів об'єкта.</li> -</ul> - -<p>У властивості є ім'я ({{glossary("string","рядок")}}) та значення ({{glossary("primitive","проста величина")}}, {{glossary("method","метод")}}, або {{glossary("object reference","посилання на об'єкт")}}). Зауважте, що, коли ми кажемо "властивість містить об'єкт", це скорочення від "властивість містить <em>посилання</em> на об'єкт". Ця відмінність важлива, тому що сам об'єкт лишається незмінним, коли ви змінюєте значення властивості.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{InterWiki('wikipedia','Властивість_(програмування)','Властивість (програмування)')}} на Вікіпедії</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/protocol/index.html b/files/uk/glossary/protocol/index.html deleted file mode 100644 index 59422c2f7d..0000000000 --- a/files/uk/glossary/protocol/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Протокол -slug: Glossary/Protocol -tags: - - Інфраструктура - - Протоколи - - Словник -translation_of: Glossary/Protocol ---- -<p><strong>Протокол</strong> — система правил, що визначає, як відбувається обмін даними всередині чи між компʼютерами. Звʼязок між пристроями потребує узгодженого формату даних, що передаються. Низка правил, які визначають цей формат, називається <em>протоколом</em>.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Комунікаційний протокол")}} у Вікіпедії</li> - <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li> -</ul> - -<p> </p> diff --git a/files/uk/glossary/prototype-based_programming/index.html b/files/uk/glossary/prototype-based_programming/index.html deleted file mode 100644 index e2f4b74a19..0000000000 --- a/files/uk/glossary/prototype-based_programming/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Prototype-based programming -slug: Glossary/Prototype-based_programming -translation_of: Glossary/Prototype-based_programming ---- -<p><span class="short_text" id="result_box" lang="uk"><span><strong>Прототип-базоване програмування</strong> є стилем</span></span> {{Glossary("OOP", "object-oriented programming")}}, у якому {{Glossary('Class', 'classes')}} <span id="result_box" lang="uk"><span>не визначені чітко, а виникають шляхом додавання властивостей і методів до екземпляра іншого класу або, рідше, додавання їх до порожнього об'єкта.</span></span><br> - <br> - Простими словами, цей тип стилю програмування дозволяє створити {{Glossary('Object', 'object')}} не визначивши його {{Glossary('Class', 'class')}}.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Prototype-based programming", "Prototype-based programming")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/proxy_server/index.html b/files/uk/glossary/proxy_server/index.html deleted file mode 100644 index 2083a0639b..0000000000 --- a/files/uk/glossary/proxy_server/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Проксі-сервер -slug: Glossary/Proxy_server -tags: - - Глосарій - - Проксі - - Сервер -translation_of: Glossary/Proxy_server ---- -<p><strong>Проксі-сервер</strong> — це проміжна програма або комп’ютер, що використовується під час переміщення по різних мережах Інтернету. Вони полегшують доступ до вмісту у всесвітній мережі. Проксі перехоплює запити та обслуговує відповіді; він може пересилати запити або ні (наприклад, у випадку кешем), а також може змінювати їх (наприклад, змінити заголовки на межі двох мереж).</p> - -<p>Проксі може знаходитись на локальному комп'ютері користувача або будь-де між комп'ютером користувача та сервером призначення в Інтернеті. Загалом існує два основних типи проксі-серверів:</p> - -<ul> - <li><strong>Прямий проксі</strong> — обробляє запити з та у будь-яке місце в Інтернеті.</li> - <li><strong>Зворотний проксі </strong>— приймає запити з Інтернету та пересилає їх на сервери у внутрішній мережі.</li> -</ul> - -<h2 id="Дізнайся_більше">Дізнайся більше</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Проксі-сервери та тунелювання</a></li> - <li><a href="https://uk.wikipedia.org/wiki/Проксі-сервер">Проксі-сервер</a> у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/recursion/index.html b/files/uk/glossary/recursion/index.html deleted file mode 100644 index 7474a56209..0000000000 --- a/files/uk/glossary/recursion/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Рекурсія -slug: Glossary/Recursion -tags: - - Словник -translation_of: Glossary/Recursion -original_slug: Glossary/Рекурсія ---- -<p><span class="seoSummary">Рекурсія — це виклик функцією самої себе. Рекурсію застосовують, коли розв'язувана задача містить подібні до себе підзадачі.</span> Залежно від вхідних даних розрізняють кінцевий виклик (розв'язує найпростішу задачу) та проміжний (має підзадачі, тож передбачає щонайменше один рекурсивний виклик).</p> - -<p>Типовим прикладом застосування рекурсії є обчислення факторіалу:</p> - -<pre class="brush: js">function f(n) { - if (n > 1) { - return n * f(n - 1); - } - return 1; -}</pre> - -<p>Слід завважити, що будь-який алгоритм можна втілити без застосування рекурсії, але для вирішення певних задач її застосування спрощує та увиразнює код. Для прикладу розгляньмо обчислення факторіалу без рекурсії:</p> - -<pre class="brush: js">function f(n) { - var value = 1; - - while (n > 1) { - value *= n; - n--; - } - - return value; -} -</pre> - -<p>Водночас для деяких алгоритмів перевага рекурсивного втілення буде навіть суттєвішою.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Рекурсія (програмування)")}} у Вікіпедії</li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Functions#Рекурсія">Докладніше про рекурсію в JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/regular_expression/index.html b/files/uk/glossary/regular_expression/index.html deleted file mode 100644 index 0e58dacbd3..0000000000 --- a/files/uk/glossary/regular_expression/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Регулярний вираз -slug: Glossary/Regular_expression -tags: - - Regular Expression - - Регулярний вираз - - Словник -translation_of: Glossary/Regular_expression ---- -<p><strong>Регулярний вираз</strong> (англ. <em>regular expression</em> або <em>regex</em>) — це записаний формальною мовою (що називається <em>мовою регулярних виразів</em>) рядок, що описує множину (подеколи нескінченну) послідовностей символів, що їх слід шукати.</p> - -<p>Регулярні вирази використовуються для:</p> - -<ul> - <li>перевірки рядка на відповідність певним очікуванням (як-от адреса електронної пошти чи номер телефону);</li> - <li>пошуку підрядка (підрядків), що відповідає певним очікуванням (наприклад, пошук всіх IP-адрес, згаданих в тексті);</li> - <li>пошуку із заміною.</li> -</ul> - -<p>{{Glossary("Algorithm", "Алгоритми")}} пошуку за регулярними виразами впроваджені у багатьох мовах програмування, але найбільшого поширення набула реалізація з Perl, яка згодом зросла до окремої від мови Perl множини сумісних реалізацій, що зветься PCRE (<em>Perl Compatible Regular Expression</em>). Втім {{glossary("JavaScript")}} надає через клас {{jsxref("RegExp")}} інший варіант реалізації.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Регулярний вираз")}} у Вікіпедії</li> - <li><a href="http://regexone.com/">Інтерактивний підручник</a></li> - <li><a href="http://regexper.com/">Візуалізовані регулярні вирази</a></li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Написання регулярних виразів у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/rest/index.html b/files/uk/glossary/rest/index.html deleted file mode 100644 index 7dca92dbd0..0000000000 --- a/files/uk/glossary/rest/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: REST -slug: Glossary/REST -tags: - - HTTP - - Rest - - Архітектура - - Словник -translation_of: Glossary/REST ---- -<p>Передача репрезентативного стану (англ. Representational State Transfer, <strong>REST</strong>) - це набір архітектурних обмежень, які утворюють ефективні, надійні та масштабовані розподілені системи. Система називається RESTful, коли дотримується цих обмежень.</p> - -<p>Головна ідея REST полягає в тому, що ресурс, наприклад, документ, передається разом зі своїм станом та зв'язками (гіпертекстом) за допомогою чітко визначених, стандартизованих операцій та форматів. Часто {{Glossary("API","API")}} або сервіси називають себе RESTful, коли прямо змінюють тип документа, як протилежність запуску команд в іншому місці.</p> - -<p>Через те, що {{Glossary("HTTP")}}, стандартний протокол {{glossary("World Wide Web","Web")}}, також передає документи та гіпертекстові посилання, прості HTTP API іноді називають RESTful API, RESTful сервісами, або просто REST сервісами, хоча вони не обов'язково дотримуються усіх обмежень REST. Початківці можуть припустити, що REST API означає HTTP-сервіс, який можна викликати за допомогою стандартних веб-бібліотек та інструментів.</p> - -<h2 id="Дізнатися_більше">Дізнатися більше</h2> - -<h3 id="Дізнатися_про_це_більше">Дізнатися про це більше</h3> - -<ul> - <li><a href="http://www.restapitutorial.com/">restapitutorial.com</a></li> - <li><a href="http://restcookbook.com/">restcookbook.com</a></li> -</ul> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "REST", "REST")}} на Вікіпедії</li> - <li><a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">Архітектура REST</a></li> -</ul> diff --git a/files/uk/glossary/rss/index.html b/files/uk/glossary/rss/index.html deleted file mode 100644 index 79c2d9b299..0000000000 --- a/files/uk/glossary/rss/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: RSS -slug: Glossary/RSS -tags: - - Atom - - RSS - - Оновлення - - Поширення - - Словник - - Стрічка -translation_of: Glossary/RSS ---- -<p><strong>RSS</strong> (Really Simple Syndication) позначає декілька заснованих на {{Glossary("XML")}} форматів, створених для поширення інформації про зміни на веб-сторінках. Клієнтський додаток, читач RSS отримує своєчасні оновлення зі сторінок, на які налаштовано <em>підписку</em>, та подає їх у вигляді <em>стрічки</em> (англ. RSS feed). Це звільняє користувача від потреби самостійно перевіряти оновлення на всіх сторінках.</p> - -<p>Слід зауважити, що для забезпечення роботи цієї технології необхідна підтримка RSS кожним окремим сайтом.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "RSS")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="http://www.rssboard.org/rss-specification">Остання специфікація RSS</a></li> -</ul> diff --git a/files/uk/glossary/scope/index.html b/files/uk/glossary/scope/index.html deleted file mode 100644 index 9a683908fe..0000000000 --- a/files/uk/glossary/scope/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Область видимості -slug: Glossary/Scope -tags: - - Словник -translation_of: Glossary/Scope ---- -<p><span class="seoSummary"><strong>Область видимості</strong> (англ. <em>scope</em>) — це чинний для поточного контексту виконання простір імен. Цей контекст характеризується множиною «видимих» <strong>{{Glossary("Variable", "змінних")}}</strong>, <strong>{{Glossary("Function", "функцій")}}</strong> (<strong>{{Glossary("Method", "методів")}}</strong>) та будь-яких інших оголошуваних сутностей.</span></p> - -<p>Якщо змінна, функція абощо перебуває <em>поза областю видимості</em> певних рядків коду, вона є недоступною для використання цим кодом. Більш того, сутності з однаковими іменами можуть одночасно співіснувати в різних областях видимості. Області видимості нашаровуються одне на одне відповідно до ієрархії, тож область-нащадок може мати доступ до області-пращура, але не навпаки. В разі збігу імен сутність, що належить до області-нащадка, <em>заступає</em> ту, що належить до області-пращура.</p> - -<p>У {{Glossary("JavaScript")}} функція працює як {{Glossary("Closure", "замикання")}}, створючи власну область видимості, тож, наприклад, оголошена всередині функції змінна є недосяжною ззовні чи з інших функцій.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Область_видимості_(програмування)", "Область видимості")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/self-executing_anonymous_function/index.html b/files/uk/glossary/self-executing_anonymous_function/index.html deleted file mode 100644 index 74fd0e93fd..0000000000 --- a/files/uk/glossary/self-executing_anonymous_function/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Самовиконувана анонімна функція -slug: Glossary/Self-Executing_Anonymous_Function -tags: - - Словник -translation_of: Glossary/Self-Executing_Anonymous_Function ---- -<p>Це {{glossary("function","функція")}} {{glossary("JavaScript")}}, яка запускається одразу після того, як була визначена. Також відома як {{glossary("IIFE")}} (Негайно виконуваний функціональний вираз).</p> - -<p>Дивіться більш детальну інформацію на сторінці IIFE, наведеній вище.</p> diff --git a/files/uk/glossary/server/index.html b/files/uk/glossary/server/index.html deleted file mode 100644 index cfe0f145e9..0000000000 --- a/files/uk/glossary/server/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Сервер -slug: Glossary/Server -tags: - - Інфраструктура - - Глосарій - - Мережа - - Сервер - - протокол -translation_of: Glossary/Server ---- -<p>Апаратний сервер являє собою загальний компʼютер в мережі, який надає сервіси клієнтам. Сервер, в програмному забезпеченні – програма, яка надає сервіси програмам-клієнтам.</p> - -<p>Зазвичай сервіси надаються в межах локальної або глобальної мереж. Програма-клієнт та сервер традиційно зʼєднуються між собою та обмінюються повідомленнями закодованими за допомогою {{glossary("protocol", "протокол")}}у.</p> - -<p>Найпоширенішими серверами в локальній мережі є файлові сервери, сервери імен, поштові сервери, сервери друку та сервери надсилання та приймання факс-повідомлень. Інший приклад – Веб-сервери, зʼєднані з Інтернетом. Мінікомпʼютери, мейнфрейми, суперкомпʼютери в дата-центрах також є серверами.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">Introduction to servers</a></li> - <li>{{Interwiki("wikipedia", "Server (computing)")}} on Wikipedia</li> -</ul> diff --git a/files/uk/glossary/shim/index.html b/files/uk/glossary/shim/index.html deleted file mode 100644 index baa8d5aca6..0000000000 --- a/files/uk/glossary/shim/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Shim -slug: Glossary/Shim -tags: - - Словник -translation_of: Glossary/Shim ---- -<p><strong>Шим</strong> (shim - прошарок, англ.) - це код, що використовується для виправлення поведінки кода, який вже існує, зазвичай, додаванням нового API, який дозволяє обійти проблему. Це відрізняє його від {{Glossary("polyfill", "поліфіла")}}, що впроваджує новий API, який не підтримується переглядачем початково.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Shim_(computing)">Shim</a> на Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/statement/index.html b/files/uk/glossary/statement/index.html deleted file mode 100644 index 83801fd6b3..0000000000 --- a/files/uk/glossary/statement/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Інструкція -slug: Glossary/Statement -tags: - - Beginner - - CodingScripting - - Глосарій -translation_of: Glossary/Statement -original_slug: Glossary/Інструкція ---- -<p>В комп'ютерній мові програмування <strong>інструкція </strong>- <span class="tlid-translation translation" lang="uk"><span title="">це рядок коду, який виконує завдання.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Кожна програма складається з послідовності інструкцій.</span></span></p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_знання"><span class="tlid-translation translation" lang="uk"><span title="">Загальні знання</span></span></h3> - -<ul> - <li>{{Interwiki("wikipedia", "Інструкція_(програмування)")}} на Вікіпеді</li> -</ul> - -<h3 id="Технічна_довідка"><span class="tlid-translation translation" lang="uk"><span title="">Технічна довідка</span></span></h3> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a></li> -</ul> - -<ul> -</ul> - -<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 59px; top: 322px;"> -<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Play"></div> - -<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"></div> -</div> diff --git a/files/uk/glossary/static_method/index.html b/files/uk/glossary/static_method/index.html deleted file mode 100644 index f81086819e..0000000000 --- a/files/uk/glossary/static_method/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Статичний метод -slug: Glossary/Static_method -tags: - - JavaScript - - Словник - - Статичний - - метод -translation_of: Glossary/Static_method ---- -<p>Статичний метод (чи <em>статична функція</em>) - це {{Glossary("method","метод")}}, визначений як член {{Glossary("object","об'єкта")}}, але доступний безпосередньо з конструктора об'єкта API, а не з екземпляра об'єкта, створеного конструктором.</p> - -<p>У <a href="/uk/docs/Web/API">Web API</a> статичний метод - це метод, визначений інтерфейсом, який натомість можна викликати без попереднього створення екземпляра об'єкта цього типу.</p> - -<p>Методи, які викликаються на екземплярах об'єкта, називаються <em>методами екземпляра</em>.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>В інтерфейсі <a href="/uk/docs/Web/API/Notifications_API">Notifications API</a> метод {{domxref("Notification.requestPermission()")}} викликається на самому конструкторі {{domxref("Notification")}} — це статичний метод:</p> - -<pre class="brush: js">let promise = Notification.requestPermission();</pre> - -<p>З іншого боку, метод {{domxref("Notification.close()")}} є методом екземпляра — він викликається на конкретному екземплярі об'єкта сповіщення, щоб закрити сповіщення, яке він представляє:</p> - -<pre class="brush: js">let myNotification = new Notification('Це моє сповіщення'); - -myNotification.close();</pre> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li>Загальні відомості - <ol> - <li><a href="https://www.techopedia.com/definition/24034/static-method">Статичний метод </a>на Techopedia</li> - </ol> - </li> - <li>Довідка JavaScript - <ol> - <li><a href="/uk/docs/Web/JavaScript/Reference/Classes/static">static</a></li> - </ol> - </li> - <li><a href="/uk/docs/Glossary">Словник MDN</a> - <ol> - <li>{{Glossary("Object","Об'єкт")}}</li> - <li>{{Glossary("Method","Метод")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/string/index.html b/files/uk/glossary/string/index.html deleted file mode 100644 index 9ff37d062a..0000000000 --- a/files/uk/glossary/string/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: String -slug: Glossary/String -tags: - - String - - Словник - - рядок -translation_of: Glossary/String ---- -<p id="Summary">У будь-якій мові програмування рядок - це послідовність {{Glossary("character","символів")}}, які утворюють текст.</p> - -<p>У {{Glossary("JavaScript")}} рядок є однією з {{Glossary("Primitive", "простих величин")}}, а об'єкт {{jsxref("String")}} є {{Glossary("wrapper","обгорткою")}} для рядкового примітива.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Рядок_(програмування)","Рядок (програмування)")}} на Вікіпедії</li> - <li><a href="/uk/docs/Web/JavaScript/Data_structures#Тип_string">Типи та структури даних у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/svg/index.html b/files/uk/glossary/svg/index.html deleted file mode 100644 index a95edae93a..0000000000 --- a/files/uk/glossary/svg/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: SVG -slug: Glossary/SVG -tags: - - SVG - - Глосарій - - Графіка - - Початківцям -translation_of: Glossary/SVG ---- -<p><em>Scalable Vector Graphics</em> (<strong>SVG, </strong><em>масштабована векторна графіка</em>) — це формат для двовимірної векторної графіки, що базується на синтаксисі {{Glossary("XML")}}. Група {{Glossary("W3C")}} почала працювати над SVG наприкінці дев'яностих, але SVG здобув популярність лише коли було випущено {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 із підтримкою SVG. Всі головні {{Glossary("browser","браузери")}} зараз підтримують SVG.</p> - -<p>Завтяки тому, що SVG базується на синтаксисі {{Glossary("XML")}}, його можна стилізувати за допомогою {{Glossary("CSS")}} та надавати йому інтерактивності, використовуючи {{Glossary("JavaScript")}}. HTML5 зараз дозволяє напряму включати SVG {{Glossary("Tag","теги")}} у документ {{Glossary("HTML")}}.</p> - -<p>Так як SVG — це векторний формат графіки, те, що він може маштабуватися без втрати даних, робить його неоціненним у адаптивному {{Glossary("responsive design", "веб-дизайні")}}, тому що він дає можливість створювати елементи інтерфейсу, що можуть маштабуватися для будь-якого розміру екрана. Також SVG включає в себе корисні інструменти, такі як відсікання, маскування, фільтри та анімації.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "SVG")}} на Wikipedia</li> -</ul> - -<h3 id="Вивчати_SVG">Вивчати SVG</h3> - -<ul> - <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3.org's SVG Primer</a> (en)</li> -</ul> - -<h3 id="Технічна_інформація">Технічна інформація</h3> - -<ul> - <li><a href="/en-US/docs/Web/SVG">Документація SVG на MDN</a></li> - <li><a href="http://www.w3.org/TR/SVG/" rel="external">Остання специфікація SVG</a></li> -</ul> diff --git a/files/uk/glossary/symbol/index.html b/files/uk/glossary/symbol/index.html deleted file mode 100644 index da8ea9c366..0000000000 --- a/files/uk/glossary/symbol/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Символ -slug: Glossary/Symbol -tags: - - ECMAScript2015 - - JavaScript - - Sharing - - Символ - - Словник - - Тип даних -translation_of: Glossary/Symbol -original_slug: Glossary/Символ ---- -<p>У {{Glossary("JavaScript")}}, символ (Symbol) є {{Glossary("Primitive", "простим типом даних")}}.</p> - -<p>Значення типу <strong>символ</strong> також називають "Символьним значенням". У середовищі виконання JavaScript символьне значення створюється викликом функції {{jsxref("Symbol")}}, яка динамічно створює анонімне, унікальне значення. Символ можна використовувати як властивість об'єкта.</p> - -<p>Символ може мати необов'язковий опис, але тільки для відлагодження.</p> - -<p><strong>Символьне значення</strong> є унікальним ідентифікатором. Наприклад,</p> - -<pre class="brush: js notranslate">// Ось два символи з однаковим описом, -let Sym1 = Symbol("Sym"); -let Sym2 = Symbol("Sym"); - -console.log(Sym1 == Sym2); // повертає "false" -// Символи гарантовано є унікальними. -// Навіть якщо ми створимо багато символів з тим самим описом, -// вони будуть різними значеннями.</pre> - -<div class="blockIndicator note"> -<p><strong>Заувага</strong>: Якщо ви знайомі з Ruby чи іншою мовою, що має свій аналог “символів” – будь ласка, не плутайте. Символи JavaScript інші.</p> -</div> - -<p>Символьний тип - це новий функціонал у ECMAScript 2015, і він не має еквіваленту у ECMAScript 5.</p> - -<p>У деяких мовах програмування символьний тип даних також називається "атом".</p> - -<h3 id="Символи_не_мають_автоматичного_перетворення_у_рядки">Символи не мають автоматичного перетворення у рядки</h3> - -<p>Більшість значень у JavaScript підтримують неявне перетворення у рядки. Наприклад, ми можемо викликати <code>alert</code> майже з будь-яким значенням, і це спрацює. Символи особливі. Вони не перетворюються автоматично.</p> - -<p>Наприклад,</p> - -<pre class="brush: js notranslate">let Sym = Symbol("Sym"); -alert(Sym); // TypeError: Cannot convert a Symbol value to a string</pre> - -<p>Це “мовний захист” від плутанини, тому що рядки та символи є фундаментально різними, і не повинні випадково перетворюватись один на одного.</p> - -<p>Якщо нам дуже потрібно вивести символ, треба викликати на ньому метод <code>.toString()</code>.</p> - -<pre class="brush: js notranslate">let Sym = Symbol("Sym"); - -alert(Sym.toString()); // Symbol(Sym), тепер це працює</pre> - -<p>Або ми можемо скористатись властивістю символу <code><em>symbol</em>.description</code>, щоб дістати його опис, наприклад,</p> - -<pre class="brush: js notranslate">let _Sym = Symbol("Sym"); - -alert(_Sym.description); // Sym</pre> - -<h3 id="Добревідомі_символи">Добревідомі символи</h3> - -<p>Клас {{jsxref("Symbol")}} має константи для так званих добревідомих символів (<em>well-known symbols</em>). Ці символи дозволяють налаштовувати взаємодію JS з об'єктом, використовуючи їх в якості ключів.</p> - -<p>Прикладами добревідомих символів є: {{jsxref("Symbol.iterator")}} для подібних до масивів об'єктів, або {{jsxref("Symbol.search")}} для рядкових об'єктів.</p> - -<p>Вони наведені у таблиці специфікації <a href="https://tc39.github.io/ecma262/#sec-well-known-symbols">Добревідомі символи</a>:</p> - -<ul> - <li><code>Symbol.hasInstance</code></li> - <li><code>Symbol.isConcatSpreadable</code></li> - <li><code>Symbol.iterator</code></li> - <li><code>Symbol.toPrimitive</code></li> - <li>…і так далі.</li> -</ul> - -<h3 id="Глобальний_реєстр_символів">Глобальний реєстр символів</h3> - -<p>Методами, що мають доступ до глобального реєстру символів, є {{jsxref("Symbol.for()")}} і {{jsxref("Symbol.keyFor()")}}; це посередники між глобальною таблицею (або "реєстром") символів та середовищем виконання. Реєстр символів переважно збудований інфраструктурою компілятора Javascript, а вміст реєстру символів не доступний для інфраструктури виконання Javascript, окрім як за допомогою цих методів.</p> - -<p>Метод <em><code>Symbol.for(tokenString)</code></em> повертає символьне значенняз реєстру, а <em><code>Symbol.keyFor(symbolValue)</code></em> повертає рядковий токен з реєстру; ці функції зворотні одна одній, тому наступне є істиною:</p> - -<pre class="brush: js notranslate">Symbol.keyFor(Symbol.for("tokenString")) === "tokenString" // true</pre> - -<h2 id="Дізнайтеся_більше">Дізнайтеся більше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Symbol_(programming)">Symbol (programming)</a> на Вікіпедії</li> - <li><a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних у JavaScript</a></li> - <li><a href="http://2ality.com/2014/12/es6-symbols.html">Символи у ECMAScript 6</a></li> - <li>{{jsxref("Symbol")}} у довідці MDN з JS</li> - <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li> -</ul> - -<section id="Quick_Links"> -<ul> - <li><a href="/uk/docs/Glossary">Словник MDN Web Docs</a> - - <ul> - <li>{{Glossary("JavaScript")}}</li> - <li>{{Glossary("Primitive","Простий тип даних")}}</li> - </ul> - </li> - <li>{{jsxref("Symbol")}}</li> -</ul> -</section> diff --git a/files/uk/glossary/synchronous/index.html b/files/uk/glossary/synchronous/index.html deleted file mode 100644 index e70f25554d..0000000000 --- a/files/uk/glossary/synchronous/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Синхронність -slug: Glossary/Synchronous -tags: - - Веб - - Словник -translation_of: Glossary/Synchronous ---- -<p><em>Синхронність</em> означає комунікацію в реальному часі, в якій кожна сторона отримує (а також, за необхідності, обробляє та відповідає) повідомлення миттєво (або настільки швидко, наскільки це можливо).</p> - -<p>Прикладом є телефон — під час телефонної розмови ви намагаєтесь відповідати іншій людині одразу.</p> - -<p>Багато команд програмування є синхронними — наприклад, коли ви вводите дані для обчислення, середовище поверне вам результат миттєво, якщо тільки ви не запрограмували його не робити цього.</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li>{{glossary("Asynchronous","Асинхронність")}}</li> - <li><a href="/uk/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">Синхронні та асинхронні запити </a>за допомогою {{glossary("API")}} <a href="/uk/docs/Web/API/XMLHttpRequest">XMLHttpRequest()</a></li> -</ul> diff --git a/files/uk/glossary/truthy/index.html b/files/uk/glossary/truthy/index.html deleted file mode 100644 index a89d30a922..0000000000 --- a/files/uk/glossary/truthy/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Truthy -slug: Glossary/Truthy -tags: - - JavaScript - - Словник -translation_of: Glossary/Truthy ---- -<p><span class="seoSummary">У мові {{Glossary("JavaScript")}}, <strong>правдиве (truthy) </strong>значення - це значення, яке дорівнює <code>true</code> у контексті {{Glossary("Boolean")}}. Всі величини є правдивими, крім тих, які визначені як {{Glossary("Falsy", "хибні")}} (тобто, крім <code>false</code>, <code>0</code>, <code>-0</code>, <code>0n</code>, <code>""</code>, <code>null</code>, <code>undefined</code> та <code>NaN</code>).</span></p> - -<p>Мова {{Glossary("JavaScript")}} використовує неявне {{Glossary("Type_Conversion", "перетворення типів")}} у контексті Boolean.</p> - -<p>Приклади <em>правдивих </em>значень у JavaScript (які будуть неявно приведені до true у контексті boolean, і, таким чином, виконають блок <code>if</code>):</p> - -<pre class="brush: js notranslate">if (true) -if ({}) -if ([]) -if (42) -if ("0") -if (new Date()) -if (-42) -if (12n) -if (3.14) -if (-3.14) -if (Infinity) -if (-Infinity) -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table> - <thead> - <tr> - <th scope="col"><strong>Специфікація</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-toboolean", "<code>ToBoolean</code> abstract operation")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{Glossary("Falsy")}}</li> - <li>{{Glossary("Type_Conversion", "Приведення")}}</li> - <li>{{Glossary("Boolean")}}</li> -</ul> - -<div>{{QuickLinksWithSubpages("/uk/docs/Glossary")}}</div> diff --git a/files/uk/glossary/type/index.html b/files/uk/glossary/type/index.html deleted file mode 100644 index 0d9fde0060..0000000000 --- a/files/uk/glossary/type/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Тип -slug: Glossary/Type -tags: - - JavaScript - - Змінна - - Значення - - Словник - - Тип -translation_of: Glossary/Type -original_slug: Glossary/Тип ---- -<p><strong>Тип</strong> (або <em>тип даних</em>) є характеристикою {{glossary("value", "значення")}}, що визначає формат його зберігання та способи обробки. Скажімо, <em>ціле число</em> можна помножити на <em>дробове</em>, але не на <em>текстовий рядок</em>.</p> - -<p>Крім того, кожен тип даних передбачає обмежену форматом зберігання множину значень. Наприклад, тип {{domxref("Boolean")}} у JavaScript може містити лише значення <code>true</code> та <code>false</code>, натомість тип {{domxref("String")}} містить текстові рядки, а {{domxref("Number")}} — цілі числа та десяткові дроби тощо.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Тип_даних", "Тип даних")}} у Вікіпедії</li> - <li><a href="/uk/docs/Web/JavaScript/Data_structures">Типи даних у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/type_coercion/index.html b/files/uk/glossary/type_coercion/index.html deleted file mode 100644 index 972aad0ebc..0000000000 --- a/files/uk/glossary/type_coercion/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Примусове приведення типів -slug: Glossary/Type_coercion -tags: - - Coercion - - JavaScript - - перетворення - - приведення типів -translation_of: Glossary/Type_coercion ---- -<p>Примусове приведення типів (<em>type coercion </em>- <em>англ.</em>) - це автоматичне або неявне перетворення значень з одного типу даних у інший (наприклад, рядки у числа). <em>{{Glossary("Type conversion","Перетворення типів")}}</em> схоже на <em>примусове приведення типів</em>, тому що обидва перетворюють значення з одного типу даних у інший, з однією ключовою різницею — <em>примусове приведення</em> є неявним, в той час, як <em>перетворення типів</em> може бути неявним <em>або</em> явним.</p> - -<h2 id="Приклади">Приклади</h2> - -<pre class="brush: js">const value1 = '5'; -const value2 = 9; -let sum = value1 + value2; - -console.log(sum);</pre> - -<p>У наведеному прикладі, JavaScript <em>примусово перетворює</em> <code>9</code> з числа у рядок, а після цього поєднує два значення, отримуючи в результаті рядок <code>59</code>. JavaScript мав вибір між рядком та числом, та прийняв рішення використовувати рядок.</p> - -<p>Компілятор міг перетворити <code>5</code> у число та повернути суму <code>14</code>, але не зробив цього. Щоб повернути цей результат, вам довелось би явно перетворити <code>5</code> у число за допомогою методу {{jsxref("Global_Objects/Число", "Number()")}}:</p> - -<pre class="brush: js">sum = Number(value1) + value2;</pre> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/uk/docs/Glossary">Словник</a> - - <ol> - <li>{{Glossary("Type","Тип")}}</li> - <li>{{Glossary("Type conversion","Перетворення типів")}}</li> - </ol> - </li> - <li>Стаття Вікіпедії - <ol> - <li>{{Interwiki("wikipedia", "Приведення типів")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/type_conversion/index.html b/files/uk/glossary/type_conversion/index.html deleted file mode 100644 index d91d2a1ef4..0000000000 --- a/files/uk/glossary/type_conversion/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Перетворення типів -slug: Glossary/Type_Conversion -tags: - - Словник - - перетворення типів - - приведення типів -translation_of: Glossary/Type_Conversion ---- -<p>Перетворення (або приведення) типів означає переведення даних з одного типу даних в інший. <em>Неявне перетворення</em> відбувається, коли компілятор автоматично призначає типи даних, але програмний код також може <em>явно</em> вимагати, щоб відбулось перетворення. Наприклад, у інструкції <code>5+2.0</code> число з рухомою крапкою <code>2.0</code> неявно приводиться до цілого, а в інструкції <code>Number("0x11")</code>, рядок "0x11" явно приводиться до числа 17.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/uk/docs/Glossary">Словник</a> - - <ol> - <li>{{Glossary("Type", "Тип")}}</li> - <li>{{Glossary("Type coercion")}}</li> - </ol> - </li> - <li>Статті у вікіпедії - <ol> - <li>{{Interwiki("wikipedia", "Приведення типів")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/undefined/index.html b/files/uk/glossary/undefined/index.html deleted file mode 100644 index d817f047cf..0000000000 --- a/files/uk/glossary/undefined/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: undefined -slug: Glossary/undefined -tags: - - Проста величина - - Словник -translation_of: Glossary/undefined ---- -<p><span class="seoSummary">Значення <strong>undefined</strong> є {{Glossary("Primitive", "простою величиною")}}, яка призначається щойно оголошеним <strong>змінним</strong> (якщо початкового значення не вказано) та <strong>формальним {{Glossary("Argument", "арґументам")}}</strong>, які під час виклику {{Glossary("Function", "функції")}} ({{Glossary("Method", "метода")}}) не було передано. Крім того, значення <strong>undefined</strong> матиме всяка видалена чи просто відсутня {{Glossary("Property", "властивість")}} об'єкта.</span></p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Undefined_value">Undefined value</a> у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/uri/index.html b/files/uk/glossary/uri/index.html deleted file mode 100644 index 240c4f9c2a..0000000000 --- a/files/uk/glossary/uri/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: URI (Уніфікований ідентифікатор ресурсів) -slug: Glossary/URI -tags: - - HTTP - - URI - - URL - - Пошук - - Словник -translation_of: Glossary/URI ---- -<p><strong>URI</strong><em> (англ. Uniform Resource Identifier, укр. Уніфікований ідентифікатор ресурсів)</em> це рядок, який посилається на ресурс. Найбільш поширеними є {{Glossary("URL","URLs")}}, які ідентифікують ресурс, надаючи його місцезнаходження в Інтернеті. {{Glossary("URN","URNs")}}, навпаки, посилаються на ресурс за назвою, в даному просторі імен, так як ISBN книги.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "URI")}} у Вікіпедії</li> - <li><a href="http://tools.ietf.org/html/rfc3986">RFC 3986 on URI</a></li> - <li><a href="/uk/docs/Web/HTTP/data_URIs">data URIs</a></li> - <li><a href="/uk/docs/URI/www_vs_non-www_URLs">www vs non-www</a></li> -</ul> diff --git a/files/uk/glossary/url/index.html b/files/uk/glossary/url/index.html deleted file mode 100644 index 33c37dfaf0..0000000000 --- a/files/uk/glossary/url/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: URL -slug: Glossary/URL -tags: - - Інфраструктура - - Словник -translation_of: Glossary/URL ---- -<p><strong>Уніфікований локатор ресурсів</strong> (англ. <em>Uniform Resource Locator</em>, скорочено <em>URL</em>) — текстовий рядок, що є адресою певного ресурсу в Інтернеті та вможливлює прямий доступ до нього.</p> - -<p>У контексті {{Glossary("HTTP")}}, URL називають «веб-адресою» або «посиланням». Ваш веб-переглядач подає у адресовому рядку URL-адресу поточної сторінки, наприклад, <code>https://developer.mozilla.org</code></p> - -<p>Втім, URL стосується не лише протоколу {{Glossary("HTTP")}}. URL-адреси також використовуються для передачі файлів ({{Glossary("FTP")}}) , електронної пошти ({{Glossary("SMTP")}}), та інших потреб.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "URL")}} у Вікіпедії</li> -</ul> - -<h3 id="Докладніше">Докладніше</h3> - -<ul> - <li><a href="/uk/docs/Learn/Common_questions/What_is_a_URL">Що таке URL?</a> (структура та різновиди)</li> -</ul> diff --git a/files/uk/glossary/urn/index.html b/files/uk/glossary/urn/index.html deleted file mode 100644 index 108e7aad48..0000000000 --- a/files/uk/glossary/urn/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: URN (Незмінне ім'я ресурсу) -slug: Glossary/URN -tags: - - urn - - Вступ - - Навігація - - Словник -translation_of: Glossary/URN ---- -<p>URN (англ. Uniform Resource Name, укр. Незмінне ім'я ресурсу) це {{Glossary("URI")}} у стандартному форматі, який посилається на ресурс без посилання на його місцезнаходження або його існування. Цей приклад походить з <a href="http://www.ietf.org/rfc/rfc3986.txt">RFC3986</a>: <code> urn:oasis:names:specification:docbook:dtd:xml:4.1.2</code></p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_поняття" style="line-height: 24px;">Загальні поняття</h3> - -<ul> - <li>{{Interwiki("wikipedia", "URN")}} у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/utf-8/index.html b/files/uk/glossary/utf-8/index.html deleted file mode 100644 index c55476db9e..0000000000 --- a/files/uk/glossary/utf-8/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: UTF-8 -slug: Glossary/UTF-8 -tags: - - HTML - - JavaScript - - Utf-8 - - Словник -translation_of: Glossary/UTF-8 ---- -<p>UTF-8 (<em>англ.</em> UCS Transformation Format 8 - формат перетворення Юнікоду) - це найбільш вживане {{Glossary("Character encoding", "кодування символів")}} у Всесвітній мережі. Кожний символ представлений послідовністю від одного до чотирьох байтів. UTF-8 зворотно сумісний з {{Glossary("ASCII")}} і може відобразити будь-який стандартний символ Юнікоду.</p> - -<p>Перші 128 символів UTF-8 повністю співпадають з першими 128 символами ASCII (пронумеровані 0-127). Це означає, що існуючий текст ASCII вже є коректним текстом UTF-8. Усі інші символи використовують від двох до чоритьох байтів. Кожен байт має кілька бітів, зарезервованих для цілей кодування. Оскільки символи, що не належать до ASCII, потребують більше одного байту для зберігання, вони ризикують бути пошкодженими у випадку, якщо байти були розділені та не поєднані знову.</p> - -<h2 id="Дізнатись_більше" style="line-height: 18px; font-size: 1.28571rem;"><strong style="font-size: 1.71428571428571rem;">Дізнатись більше</strong></h2> - -<h3 id="Загальні_відомості"><strong>Загальні відомості</strong></h3> - -<ul> - <li>{{Interwiki("wikipedia", "UTF-8")}} на Вікіпедії</li> - <li><a href="http://www.unicode.org/faq/utf_bom.html#UTF8">FAQ про UTF-8 на вебсайті Unicode</a></li> -</ul> diff --git a/files/uk/glossary/ux/index.html b/files/uk/glossary/ux/index.html deleted file mode 100644 index 395f32a69a..0000000000 --- a/files/uk/glossary/ux/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ДК -slug: Glossary/UX -tags: - - Дизайн - - Доступність - - Навігація - - Словник -translation_of: Glossary/UX -original_slug: Glossary/ДК ---- -<p><strong>ДК</strong> — це акронім від слів досвід користування. Це дослідження взаємодії користувачів і системи. Його мета - зробити систему легкою в взаємодії з точки зору користувача.</p> - -<p>Система може бути будь-яким продуктом або додатком, з яким кінцевий користувач має взаємодіяти. Наприклад, дослідження ДК, проведені на веб-сторінці, можуть продемонструвати, чи легко зрозуміти сторінку, перейти до різних областей та виконувати загальні завдання, а також, де такі процеси можуть мати менше труднощів.</p> - -<h2 id="Вчіть_більше">Вчіть більше</h2> - -<h3 id="Загальні_знання">Загальні знання</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Досвід користування")}} on Wikipedia</li> -</ul> diff --git a/files/uk/glossary/value/index.html b/files/uk/glossary/value/index.html deleted file mode 100644 index 36c4f46d87..0000000000 --- a/files/uk/glossary/value/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Значення -slug: Glossary/Value -tags: - - Значення - - Посилання - - Проста величина - - Словник -translation_of: Glossary/Value -original_slug: Glossary/Значення ---- -<p><span class="seoSummary">Кажучи про дані або <strong>{{Glossary("Wrapper", "обгортку")}}</strong> для тих даних, <strong>значення</strong> являє собою <strong>{{Glossary("Primitive","просту величину")}}</strong>, яка міститься в об'єкті-обгортці. Натомість, кажучи про <strong>{{Glossary("Variable","змінну")}}</strong> чи <strong>{{Glossary("Property","властивість")}}</strong>, <strong>значенням</strong> можуть називати як просту величину, так і <strong>{{Glossary("Object reference","посилання на об'єкт")}}</strong>.</span></p> - -<h2 id="Приклади">Приклади</h2> - -<pre class="brush: js">// Значенням змінної x є число 5 -var x = 5; - -// Значенням змінної y є рядок (проста величина) 'Затівка' -var y = 'Затівка'; - -// Значенням змінної z є посилання на об'єкт типу String, а значенням того об'єкта є рядок (проста величина) 'Затівка' -var z = new String(y); - -console.log(x.valueOf() === 5); // виводить true -console.log(y.valueOf() === y); // виводить true -console.log(z.valueOf() === z); // виводить false -console.log(z.valueOf() === y); // виводить true</pre> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Primitive_wrapper_class">Primitive wrapper class</a> у Вікіпедії</li> -</ul> diff --git a/files/uk/glossary/variable/index.html b/files/uk/glossary/variable/index.html deleted file mode 100644 index 6fe5d7721c..0000000000 --- a/files/uk/glossary/variable/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Змінна -slug: Glossary/Variable -tags: - - JavaScript - - Програмування -translation_of: Glossary/Variable -original_slug: Glossary/Змінна ---- -<p>Змінна — це {{glossary("Identifier", "найменована")}} ділянка пам'яті, де зберігається {{Glossary("Value", "значення")}}. Таким чином заздалегідь відоме ім'я уможливлює доступ до значення, яке може бути довільним на момент доступу.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Змінна_(програмування)", "Змінна")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Оголошення">Оголошення змінних у JavaScript</a></li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/var">Оператор <code>var</code> у JavaScript</a></li> -</ul> diff --git a/files/uk/glossary/viewport/index.html b/files/uk/glossary/viewport/index.html deleted file mode 100644 index 224cd9a6dd..0000000000 --- a/files/uk/glossary/viewport/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Вікно перегляду -slug: Glossary/Viewport -tags: - - Графіка - - Словник -translation_of: Glossary/Viewport -original_slug: Glossary/Вікно_перегляду ---- -<p><strong>Вікном</strong> (або <strong>вікном перегляду</strong>) в царині комп'ютерної графіки називають многокутну (зазвичай прямокутну) область, яка в поточний момент переглядається. На прикладі веб-переглядача це та частина відкритого документа, яка в поточний момент видима у вікні переглядача (або на екрані, якщо документ відображено на повний екран). Вміст за межами вікна перегляду для користувача невидимий, тож користувач має можливість гортати той вміст, отримуючи у вікні перегляду щораз іншу частину документа.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Вюпорт")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/CSS/@viewport">Правило @viewport у CSS</a></li> -</ul> diff --git a/files/uk/glossary/w3c/index.html b/files/uk/glossary/w3c/index.html deleted file mode 100644 index cd7ed94d0c..0000000000 --- a/files/uk/glossary/w3c/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: W3C -slug: Glossary/W3C -tags: - - W3C - - Інтернет - - Глосарій - - Мережа - - Правила - - Спільнота - - всесвітня - - консорціум - - павутина - - стандарт - - терміни - - інтро -translation_of: Glossary/W3C ---- -<p><em>World Wide Web Консорціум</em> (W3C) є міжнародним органом, що підтримує {{Glossary("World Wide Web", "Web-пов'язані")}} правила та робочі рамки.</p> - -<p><span id="result_box" lang="uk"><span>Вона складається з більш ніж 350 організацій-членів, які спільно розробляють веб-стандарти</span></span> , запускають аутріч-програми, і підтримують відкритий форум для обговорення Web-мережі. W3C координує компанії в галузі, щоб переконатися, що вони реалізують однакові стандарти W3C.</p> - -<p><span id="result_box" lang="uk"><span>Кожен стандарт проходить через чотири етапи зрілості:</span></span> Робочий Проект (WD), Рекомендація Кандидата (CR), Запропонована Рекомендація (PR) та W3C Рекомендація (REC).</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge" style="line-height: 24px;">General knowledge</h3> - -<ul> - <li><a href="http://www.w3.org/">W3C вебсайт</a></li> - <li>{{Interwiki("wikipedia", "World Wide Web Consortium", "W3C")}} на Wikipedia</li> -</ul> diff --git a/files/uk/glossary/webgl/index.html b/files/uk/glossary/webgl/index.html deleted file mode 100644 index ceda2aa4bd..0000000000 --- a/files/uk/glossary/webgl/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: WebGL -slug: Glossary/WebGL -tags: - - WebGL - - Веб-графіка - - Глоссарій - - Словник -translation_of: Glossary/WebGL ---- -<p><strong>WebGL</strong> (<em>Web Graphics Library</em>) - це {{Glossary("JavaScript")}} {{Glossary("API")}}, який відображає інтерактивну 2D і 3D графіку.</p> - -<p><a href="https://www.khronos.org/">Khronos Group</a> підтримує WebGL, який базується на {{Glossary("OpenGL")}} ES 2.0.</p> - -<p>Ви можете викликати WebGL в межах елементу {{Glossary("HTML")}} {{HTMLElement("canvas")}}, який слугує, як поверхня відображення.</p> - -<p>Всі основні {{Glossary("Browser","веб-переглядачі")}} зараз підтримують WebGL, але його підтримка також залежить від зовнішніх факторів (наприклад, підтримка графічним процесором пристрою).</p> - -<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2> - -<h3 id="Загальні_знання" style="line-height: 24px;">Загальні знання</h3> - -<ul> - <li>{{Interwiki("wikipedia", "WebGL")}} на Вікіпедії</li> - <li><a href="http://get.webgl.org/">Перевірка на підтримку WebGL</a></li> -</ul> - -<h3 id="Технічна_стаття" style="line-height: 24px;">Технічна стаття</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL на MDN</a></li> - <li><a href="http://caniuse.com/#feat=webgl">Таблиця підтримки для WebGL</a></li> -</ul> diff --git a/files/uk/glossary/websockets/index.html b/files/uk/glossary/websockets/index.html deleted file mode 100644 index 3e9ac2a54c..0000000000 --- a/files/uk/glossary/websockets/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebSockets -slug: Glossary/WebSockets -tags: - - Connection - - Networking - - Інфраструктура - - Протоколи - - Словник -translation_of: Glossary/WebSockets ---- -<p>WebSocket — це {{Glossary("protocol", "протокол")}}, який передбачає тривале {{Glossary("TCP")}}-з'єдання між {{Glossary("Server", "сервером")}} та клієнтом, що можуть за потреби здійснювати обмін даними будь-якої миті.</p> - -<p>Протокол WebSocket зазвичай використовують веб-сервер та {{Glossary("Browser", "переглядач")}}, втім він доступний для всякого клієнського чи серверного застосунка. Через постійно утримуване з'єднання WebSocket сервер може надсилати дані без попереднього запиту з боку клієнта, що уможливлює постійне та вчасне оновлення вмісту.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості" style="line-height: 24px;">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "WebSocket")}} у Вікіпедії</li> -</ul> - -<h3 id="Технічна_довідка">Технічна довідка</h3> - -<ul> - <li><a href="/uk/docs/Web/API/WebSocket">Довідка з WebSocket на MDN</a></li> -</ul> - -<h3 id="Вивчення_WebSocket">Вивчення WebSocket</h3> - -<ul> - <li><a href="/uk/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Розробка клієнтського застосунка WebSocket</a></li> - <li><a href="/uk/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">Розробка сервера WebSocket</a></li> -</ul> diff --git a/files/uk/glossary/whitespace/index.html b/files/uk/glossary/whitespace/index.html deleted file mode 100644 index cf288acd04..0000000000 --- a/files/uk/glossary/whitespace/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Пробільний символ -slug: Glossary/Whitespace -tags: - - Словник - - пробільний символ -translation_of: Glossary/Whitespace ---- -<p><span class="seoSummary"><strong>Пробільні символи</strong> - це набір {{Glossary("Character", "символів")}}, які використовуються для відображення горизонтальної або вертикальної відстані між іншими символами. Вони часто використовуються для розмежування токенів у {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} та інших комп'ютерних мовах.</span> Пробільні символи та їхнє використання відрізняються у різних мовах.</p> - -<h2 id="У_HTML">У HTML</h2> - -<p><a href="https://html.spec.whatwg.org/">HTML Living Standard</a> визначає 5 символів у якості пробільних символів ASCII: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR та U+0020 SPACE. У тексті вони поводяться як звичайні знаки пробілів, а послідовні пробільні символи у багатьох випадках згортаються у єдиний пробіл (цю поведінку можна змінити властивістю CSS {{cssxref("white-space")}}). Вони також використовуються в якості роздільника імені елемента і його параметрів, імен класів і т. д.</p> - -<h2 id="У_JavaScript">У JavaScript</h2> - -<p><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">Специфікація мови ECMAScript® 2015</a> визначає в Юнікоді декілька кодів символів в якості пробільних символів: U+0009 Символ табуляції <TAB>, U+000B Вертикальна табуляція <VT>, U+000C Кінець сторінки <FF>, U+0020 Пробіл <SP>, U+00A0 Нерозривний пробіл <NBSP>, U+FEFF Нерозривний пробіл нульової ширини <ZWNBSP> та категорія Інше, “Zs”, будь-який інший код символа Юнікоду “Роздільник, пробіл” <USP>. Ці символи зазвичай непотрібні для функціональності коду.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li>Специфікації - <ol> - <li><a href="https://infra.spec.whatwg.org/#ascii-whitespace">Пробільні символи ASCII</a></li> - <li><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">Специфікація мови ECMAScript® 2015</a></li> - </ol> - </li> - <li>Довідка - <ol> - <li><a href="/uk/docs/Web/API/Document_Object_Model/Whitespace">Як обробляються пробільні символи у HTML, CSS та DOM</a></li> - <li>{{cssxref("white-space")}}</li> - </ol> - </li> - <li>Статті Вікіпедії - <ol> - <li><a href="https://en.wikipedia.org/wiki/Whitespace_character">Whitespace character</a></li> - </ol> - </li> - <li><a href="/uk/docs/Glossary">Словник</a> - <ol> - <li>{{Glossary("Character","Символ")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/glossary/world_wide_web/index.html b/files/uk/glossary/world_wide_web/index.html deleted file mode 100644 index 4bbdfb2ed2..0000000000 --- a/files/uk/glossary/world_wide_web/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Всесвітня мережа -slug: Glossary/World_Wide_Web -tags: - - WWW - - Інфраструктура - - Словник -translation_of: Glossary/World_Wide_Web -original_slug: Glossary/Тенета ---- -<p><span class="seoSummary"><strong>Всесві́тня мережа</strong> (англ. World Wide Web, скорочено: <strong>WWW</strong>, <strong>W3</strong> чи просто <strong>Web</strong>), <strong>павутиння</strong>, <strong>тене́та,</strong> або <strong>веб</strong> — це всесвітня система відкритих документів і сторінок, доступних в мережі {{Glossary("Internet", "Інтернет")}}. Мережа — це не те саме, що й Інтернет: Мережа є лише одним із численних застосувань Інтернету та використовує останній як середовище передачі даних.</span></p> - -<p>Тім Бернерз-Лі запропонував архітектуру, яка стала відома під назвою Всесвітня мережа. Саме він в 1990-му році створив найперший веб-{{Glossary("Server", "сервер")}}, {{Glossary("Browser", "переглядач")}} та веб-сторінку на власному комп'ютері в лабораторії фізичних досліджень у ЦЕРН. В 1991-му він оголосив про своє творіння в групі новин alt.hypertext, позначивши мить, коли Мережу вперше було оприлюднено.</p> - -<p>Те, що нині відоме, як Тене́та або Мережа, має декілька складових:</p> - -<ul> - <li>Протокол <strong>{{Glossary("HTTP")}}</strong> забезпечує обмін даними між сервером та клієнтом.</li> - <li>Надсилаючи до сервера запит на певний ресурс, клієнт надає неповторний ідентифікатор, що зветься <strong>{{Glossary("URL")}}</strong> (англ. Uniform Resource Location — уніфіковане розташування ресурсів) або {{Glossary("URI")}} (англ. Uniform Resource Identifier — уніфікований ідентифікатор ресурсу), що також формально називається UDI (англ. Universal Document Identifier — універсальний ідентифікатор документів).</li> - <li><strong>{{Glossary("HTML")}}</strong> (мова розмітки гіпертексту) — найпоширеніший формат для оприлюднення веб-документів.</li> -</ul> - -<p>Зв'язування сторінок за допомогою {{Glossary("Hyperlink", "гіперпосилань")}} є ключовою можливістю, яка власне і дає можливість називати Тенета множиною пов'язаних документів.</p> - -<p>Невдовзі після створення Тенет, Тім Бернерз-Лі заснував об'єднання {{Glossary("W3C")}} (англ. World Wide Web Consortium — Консорціум World Wide Web) для стандартизації та подальшого розвитку мережі. Цей консорціум складається з основних цільових веб-груп, таких як розробники переглядачів, державні установи, дослідники та університети. Його місія включає освіту та поширення.</p> - -<h2 id="Дізнатись_більше" style="line-height: 30px;">Дізнатись більше</h2> - -<h3 id="Навчання">Навчання</h3> - -<ul> - <li><a href="/uk/Learn">Вивчаємо веб-розробку</a></li> - <li><a href="https://learning.mozilla.org/web-literacy">Мапа грамотності у царині тенет</a> (навички та знання необхідні для веб-розробки)</li> -</ul> - -<h3 id="Загальні_відомості" style="line-height: 24px;">Загальні відомості</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Всесвітнє павутиння")}} у Вікіпедії</li> - <li><a href="http://w3.org">Сайт міжнародної спільноти W3C</a></li> -</ul> diff --git a/files/uk/glossary/wrapper/index.html b/files/uk/glossary/wrapper/index.html deleted file mode 100644 index c256511fae..0000000000 --- a/files/uk/glossary/wrapper/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Wrapper -slug: Glossary/Wrapper -tags: - - Обгортка - - Словник -translation_of: Glossary/Wrapper -original_slug: Glossary/Обгортка ---- -<p>У таких мовах програмування, як JavaScript, розрізняють два значення поняття <strong>обгортка</strong>: це або {{glossary("Function", "функція")}}, призначена викликати одну або кілька інших функцій (лише для зручності або задля пристосування їх до використання з дещо іншою метою, ніж передбачалося раніше), або {{glossary("Object", "об'єкт")}} (та {{glossary("Class", "клас")}}, до якого він належить), який містить (огортає) {{glossary("Primitive", "просту величину")}} та надає відповідні {{glossary("Method", "методи")}} для здійснення операцій над нею.</p> - -<h2 id="Дізнатись_більше">Дізнатись більше</h2> - -<h3 id="Загальні_відомості">Загальні відомості</h3> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/Wrapper_function">Wrapper function</a> у Вікіпедії (англійською)</li> - <li><a href="https://en.wikipedia.org/wiki/Primitive_wrapper_class">Primitive wrapper class</a> у Вікіпедії (англійською)</li> -</ul> diff --git a/files/uk/glossary/xml/index.html b/files/uk/glossary/xml/index.html deleted file mode 100644 index 3883574f72..0000000000 --- a/files/uk/glossary/xml/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: XML -slug: Glossary/XML -tags: - - XML - - Глосарій - - Мова розмітки -translation_of: Glossary/XML ---- -<p>Розширювана мова розмітки (E<strong>x</strong>tensible <strong>M</strong>arkup <strong>L</strong>anguage, скорочено XML) — загальна мова розмітки, встановлена W3C. Галузь інформаційних технологій використовує для опису даних чимало мов, що базуються на XML.</p> - -<p>Теги XML подібні до тегів HTML, але XML значно гнучкіший, оскільки дозволяє користувачам впроваджувати власні теги. Таким чином, XML є мета-мовою та використовується для визначення інших мов, таких як {{Glossary("RSS")}}. До того ж, HTML є мовою розмітки, тоді як XML — мова опису даних. Це означає, що сфера застосування XML істотно ширша за Web. Наприклад, веб-сервіси можуть використовувати XML для обміну запитами та відповідями.</p> - -<h2 id="Довідатись_більше">Довідатись більше</h2> - -<ul> - <li><a href="/uk/docs/Web/XML/XML_introduction">XML Введення</a></li> -</ul> diff --git a/files/uk/learn/accessibility/index.html b/files/uk/learn/accessibility/index.html deleted file mode 100644 index 2e721693f3..0000000000 --- a/files/uk/learn/accessibility/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Доступність -slug: Learn/Accessibility -translation_of: Learn/Accessibility -original_slug: Learn/Доступність ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p> - -<h2 id="Overview">Overview</h2> - -<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> - -<ul> - <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> - <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> - <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> -</ul> - -<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> - -<p>The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:</p> - -<p>{{EmbedYouTube("7mqqgIxX_NU")}}</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> - <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> - <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> - <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> - <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> - <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> - <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> - <dd> - <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p> - </dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> - <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> - <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> - <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> - includes a list of web accessibility evaluation tools.</li> -</ul> diff --git a/files/uk/learn/common_questions/index.html b/files/uk/learn/common_questions/index.html deleted file mode 100644 index cef04ddf9c..0000000000 --- a/files/uk/learn/common_questions/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Поширені питання -slug: Learn/Common_questions -tags: - - Інфраструктура - - Мережа - - Механізми мережі - - Навчання - - Написання сценаріїв -translation_of: Learn/Common_questions ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Цей розділ надає відповіді на поширені питання, які проте не обов'язково є частиною основного матеріалу для вивчення (як-от статті по <a href="/uk/docs/Learn/HTML">HTML</a> чи <a href="/uk/docs/Learn/CSS">CSS</a>.) Ці статті надані для самостійного опрацювання.</p> - -<h2 id="Як_працює_мережа">Як працює мережа</h2> - -<p>Розділ розкриває механізм мережі - це питання, що відносяться до загальних знань про екосистему мережі та принципу її роботи.</p> - -<dl> - <dt> - <h3 id="Як_працює_Інтернет"><a href="/uk/docs/Learn/Common_questions/How_does_the_Internet_work">Як працює Інтернет?</a></h3> - </dt> - <dd>Інтернет - це основа мережі, технічна інфраструктура, завдяки якій вона можлива. В найпростішому вигляді - це велика мережа комп'ютерів, що спілкуються один з одним. В цій статті розглядається принцип його роботи на базовому рівні.</dd> - <dt> - <h3 id="Яка_різниця_між_веб-сторінкою_сайтом_веб-сервером_та_пошуковою_системою"><a href="/uk/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Яка різниця між веб-сторінкою, сайтом, веб-сервером та пошуковою системою?</a></h3> - </dt> - <dd><font>У цій статті ви дізнаєтесь про різні веб-поняття: веб-сторінки, веб-сайти, веб-сервери та пошукові системи. Нові користувачі Інтернету часто плутають або використовуються неправильно ці терміни. Давайте дізнаємося, що вони означають!</font></dd> - <dt> - <h3 id="Що_таке_URL"><a href="/uk/docs/Learn/Common_questions/What_is_a_URL">Що таке URL?</a></h3> - </dt> - <dd>Поряд з {{Glossary("Hypertext","гіпертекстом")}} та {{Glossary("HTTP")}}, URL - одне з ключових понять мережі. Це механізм, який використовують {{Glossary("Browser","переглядачі")}} для отримання будь-яких доступних в мережі ресурсів.</dd> - <dt> - <h3 id="Що_таке_доменне_ім'я"><a href="/uk/docs/Learn/Common_questions/What_is_a_domain_name">Що таке доменне ім'я?</a></h3> - </dt> - <dd><font>Доменні імена є ключовою частиною інфраструктури Інтернету. Вони надають адресу для будь-якого веб-сервера, доступного в Інтернеті, у вигляді, що легко читається людиною</font></dd> - <dt> - <h3 id="Що_таке_веб-сервер"><a href="/uk/docs/Learn/Common_questions/What_is_a_web_server">Що таке веб-сервер?</a></h3> - </dt> - <dd><font>Термін "веб-сервер" може означати обладнання або програмне забезпечення, яке обслуговує веб-сайти клієнтів в Інтернеті, а також обидві частини, що працюють разом. </font><font>У цій статті ми розглянемо, як працюють веб-сервери, та чому вони важливі.</font></dd> - <dt> - <h3 id="Що_таке_гіперпосилання"><a href="/uk/docs/Learn/Common_questions/What_are_hyperlinks">Що таке гіперпосилання?</a></h3> - </dt> - <dd>В цій статті ми розглянемо, що таке {{Glossary("Hyperlinks","гіперпосилання")}}, та чому вони мають значення. </dd> -</dl> - -<h2 id="Інструменти_та_налаштування">Інструменти та налаштування</h2> - -<p>Питання, що пов'язані з інструментами/програмами, які ви можете використати для створення сайтів.</p> - -<dl> - <dt> - <h3 id="Скільки_коштує_щось_зробити_в_мережі"><a href="/uk/docs/Learn/Common_questions/How_much_does_it_cost">Скільки коштує щось зробити в мережі?</a></h3> - </dt> - <dd>Коли ви запускаєте сайт, це може вам нічого не коштувати або ваші витрати можуть бути захмарні. В статті ми вияснимо скільки що коштуватиме, та що ви матимете за плату чи даром.</dd> - <dt> - <h3 id="Які_програми_потрібні_для_створення_сайту"><a href="/uk/docs/Learn/Common_questions/What_software_do_I_need">Які програми потрібні для створення сайту?</a></h3> - </dt> - <dd>Ця стаття про програмні компоненти, що необхідні вам для редагування, вивантаження чи перегляду сайту.</dd> - <dt> - <h3 id="Які_є_текстові_редактори"><a href="/uk/docs/Learn/Common_questions/Available_text_editors">Які є текстові редактори?</a></h3> - </dt> - <dd>В статті окреслено деякі речі, про які потрібно замислитися перед вибором та встановленням текстового редактора для веб-розробки.</dd> - <dt> - <h3 id="Що_таке_Інструменти_розробника_в_браузері"><a href="/uk/docs/Learn/Common_questions/What_are_browser_developer_tools">Що таке "Інструменти розробника" в браузері?</a></h3> - </dt> - <dd>Кожен браузер має набір інструментів розробника для налагодження HTML, CSS та іншого веб-коду. Дізнайтесь, як використовувати їхні основні функції.</dd> - <dt> - <h3 id="Як_переконаєтись_що_сайт_працює_належним_чином"><a href="/uk/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Як переконаєтись, що сайт працює належним чином?</a></h3> - </dt> - <dd>Ви оприлюднили сайт в Інтернеті — чудово! Та чи впевнені ви, що він працює належним чином? Дізнайтеся про кілька основних способів усунення несправностей.</dd> - <dt> - <h3 id="Як_налаштувати_локальний_сервер_для_тестування"><a href="/uk/docs/Learn/Common_questions/set_up_a_local_testing_server">Як налаштувати локальний сервер для тестування?</a></h3> - </dt> - <dd> - <div> - <p>Стаття про налаштовування, на вашому комп'ютері, простого локального сервера для тестування та основи його використання.</p> - </div> - </dd> - <dt> - <h3 id="Як_вивантажити_файли_на_веб-сервер"><a href="/uk/docs/Learn/Common_questions/Upload_files_to_a_web_server">Як вивантажити файли на веб-сервер?</a></h3> - </dt> - <dd>Як оприлюднити сайт в Інтернеті, щоб люди мала доступ до нього з їхніх комп'ютерів? Зробимо це за допомогою одого з найпоширеніших способів — інструментів <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a></dd> - <dt> - <h3 id="Як_користуватись_GitHub_сторінками"><a href="/uk/docs/Learn/Common_questions/Using_GitHub_Pages">Як користуватись GitHub сторінками </a><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">?</a></h3> - </dt> - <dd>Ця стаття містить загальний посібник по публікації вмісту за допомогою gh-сторінок GitHub.</dd> - <dt> - <h3 id="Як_розмістити_свій_сайт_на_Google_App_Engine"><a href="/uk/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Як розмістити свій сайт на Google App Engine?</a></h3> - </dt> - <dd>Шукаєте місце для розміщення вашого веб-сайту? Це покроковий посібник по розміщенню вашого сайту на Google App Engine.</dd> - <dt> - <h3 id="Які_є_інструменти_для_налагодження_та_підвищення_ефективності_сайту"><a href="/uk/docs/Tools/Performance">Які є інструменти для налагодження та підвищення ефективності сайту?</a></h3> - </dt> - <dd>В наборі статей показано, як використовувати інструменти розробника в Firefox для налагодження та підвищення ефективності сайту. А саме — інструментів для перевірки використання пам'яті, дерева викликів JavaScript, кількості виділених версій DOM та інших.</dd> -</dl> - -<h2 id="Дизайн_та_доступність">Дизайн та доступність </h2> - -<p>У розділі перелічені питання, пов'язані з естетикою, структурою сторінки, методами досягнення доступності тощо.</p> - -<dl> - <dt> - <h3 id="Як_почати_розробку_сайту"><a href="/uk/docs/Learn/Common_questions/Thinking_before_coding">Як почати розробку сайту?</a></h3> - </dt> - <dd>Стаття про найважливіший перший крок кожного проекту: визначте, що ви хочете цим досягти.</dd> - <dt> - <h3 id="Що_містять_поширені_веб-макети"><a href="/uk/docs/Learn/Common_questions/Common_web_layouts">Що містять поширені веб-макети?</a></h3> - </dt> - <dd>При проектуванні сторінок сайту, добре мати уявлення про найпоширеніші макети. Ця стаття про декілька типових веб-макетів та їх окремі компоненти.</dd> - <dt> - <h3 id="Що_таке_доступність"><a href="/uk/docs/Learn/Common_questions/What_is_accessibility">Що таке доступність?</a></h3> - </dt> - <dd>Стаття містить основні поняття, що визначають доступність сайтів.</dd> - <dt> - <h3 id="Як_ми_можемо_спроектувати_сайт_для_різноманітних_користувачів"><a href="/uk/docs/Learn/Common_questions/Design_for_all_types_of_users">Як ми можемо спроектувати сайт для різноманітних користувачів?</a></h3> - </dt> - <dd>Стаття містить основні методи, які допоможуть вам розробляти сайти для будь-яких користувачів — переваги швидкого доступу та подібні речі.</dd> - <dt> - <h3 id="Які_особливості_HTML_сприяють_доступності"><a href="/uk/docs/Learn/Common_questions/HTML_features_for_accessibility">Які особливості HTML сприяють доступності?</a></h3> - </dt> - <dd>В статті описуються специфічні особливості HTML, які можна використати, щоб зробити веб-сторінку більш доступною для людей з різними обмеженнями.</dd> -</dl> - -<h2 id="Питання_з_HTML_CSS_та_JavaScript">Питання з HTML, CSS та JavaScript</h2> - -<p>Про поширені вирішеня проблем в HTML/CSS/JavaScript читайте в наступних статтях:</p> - -<ul> - <li><a href="/uk/docs/Learn/HTML/Howto">Скористайтесь HTML, щоб вирішити поширені проблеми</a></li> - <li><a href="/uk/docs/Learn/CSS/Howto">Скористайтесь CSS, щоб вирішити поширені проблеми</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Howto">Скористайтесь JavaScrip, щоб вирішити поширені проблеми</a></li> -</ul> diff --git a/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html b/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html deleted file mode 100644 index 5ebd96246f..0000000000 --- a/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Як налаштувати локальний тестовий сервер? -slug: Learn/Common_questions/set_up_a_local_testing_server -translation_of: Learn/Common_questions/set_up_a_local_testing_server ---- -<div class="summary"> -<p> Стаття про те, як налаштувати на вашому комп'ютері простий локальний тестовий сервер та основи його використання.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Вам потрібно спочатку дізнатись, <a href="/uk/docs/Learn/How_the_Internet_works">як працює інтернет</a> і <a href="/uk/docs/Learn/What_is_a_Web_server">що таке веб-сервер</a>.</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Ви дізнаєтеся, як налаштувати локальний тестовий сервер.</td> - </tr> - </tbody> -</table> - -<h2 id="Локальні_файли_порівняно_з_віддаленими">Локальні файли порівняно з віддаленими</h2> - -<p>Протягом більшої частини вивчення зони навчання ми пропонуємо вам просто відкрити свої приклади безпосередньо в браузері. Це можна зробити двічі клацнувши файл HTML, перетягнувши його в вікно браузера або вибравши «Файл»> «Відкрити ...» та знайти файл HTML. Є ще багато способів це зробити.</p> - -<p>Якщо шлях веб-адреси починається з <code>file://</code>, а потім йде шлях до файлу на локальному жорсткому диску, використовується локальний файл. На відміну від цього, якщо ви переглядаєте один з наших прикладів, розміщених на GitHub (або приклад на якомусь іншому віддаленому сервері), веб-адреса почнеться з <code>http://</code> або <code>https://</code>, щоб показати, що файл буде отримано через HTTP .</p> - -<h2 id="Проблема_з_тестуванням_локальних_файлів">Проблема з тестуванням локальних файлів</h2> - -<p>Деякі приклади не працюватимуть, якщо ви відкриєте їх як локальні файли. Це може бути з різних причин, найбільш імовірно:</p> - -<ul> - <li><strong>Вони мають асинхронні запити. </strong>Деякі переглядачі (включаючи Chrome) не запускають асинхроні запити (див. <a href="/uk/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Отримання даних зі сервера</a>), якщо ви запустите приклад з локального файлу. Це пов'язано з обмеженнями безпеки (для отримання додаткової інформації про веб-безпеку, читайте <a href="/uk/docs/Learn/Server-side/First_steps/Website_security">Безпека сайту</a>).</li> - <li><strong>Вони мають мову на стороні сервера.</strong> Мови на стороні сервера (наприклад, PHP або Python) вимагають спеціального сервера для інтерпретації коду та отримання результатів.</li> -</ul> - -<h2 id="Запуск_простого_локального_HTTP-сервера">Запуск простого локального HTTP-сервера</h2> - -<p>Щоб подолати проблему з асинхронними запитами, та перевірити такі приклади, ми повинні запустити їх на локальному веб-сервері. Для наших цілей одним з найпростіших способів зробити це — використати модуль Python <code>SimpleHTTPServer</code>.</p> - -<p>Як це зробити:</p> - -<ol> - <li> - <p>Встановити Python. Якщо ви використовуєте Linux або Mac OS X, він вже має бути доступним у вашій системі. Якщо ви користувач Windows, ви можете отримати інсталятор з домашньої сторінки Python та дотримуватесь інструкцій, щоб встановити його:</p> - - <ul> - <li>Перейдіть до <a href="https://www.python.org/">python.org</a></li> - <li>Натисніть кнопку «Download» віберіть «Windows».</li> - <li>У списку виберіть виконавчий файл <em>Windows x86 executable installer</em> або <em>Windows x86-64 executable installer</em> та завантажте його. </li> - <li>Після завантаження запустіть його.</li> - <li>На першій сторінці встановлення переконайтеся, що відмітили "Додати Python 3.xxx до PATH".</li> - <li>Натисніть кнопку «Встановити», а після завершення інсталяції — «Закрити».</li> - </ul> - </li> - <li> - <p>Відкрийте командний рядок (Windows) або термінал (OS X/Linux). Щоб перевірити, чи встановлено Python, введіть таку команду:</p> - - <pre class="brush: bash notranslate">python -V</pre> - </li> - <li> - <p>Ви маєте отриматити номер версії. Якщо це так, то перейдіть до каталогу, в якому ваш приклад, за допомогою команди <code>cd</code>.</p> - - <pre class="brush: bash notranslate"># include the directory name to enter it, for example -cd Desktop -# use two dots to jump up one directory level if you need to -cd ..</pre> - </li> - <li> - <p>Щоб запустити сервер у цьому каталозі, введіть команду:</p> - - <pre class="brush: bash notranslate"># If Python version returned above is 3.X -python -m http.server -# If Python version returned above is 2.X -python -m <code>SimpleHTTPServer</code></pre> - </li> - <li> - <p>Зазвичай він буде запускати вміст каталогу на локальному веб-сервері по порту 8000. Ви можете перейти на цей сервер, зайшовши на адресу <code>localhost: 8000</code> у своєму переглядачі. Ви побачите там вміст вказаного каталогу — натисніть файл HTML, який ви хочете запустити.</p> - </li> -</ol> - -<div class="note"> -<p><strong>Примітка</strong>: Якщо у вас вже щось працює по порту 8000, ви можете вибрати інший, запустивши команду сервера з іншим номером порту, як-от <code>python -m http.server 7800</code> (Python 3.x) або <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Після цього ви можете отримати доступ до свого вмісту по <code>localhost:7800</code>.</p> -</div> - -<h2 id="Запуск_мов_серверної_частини_локально">Запуск мов серверної частини локально</h2> - -<p>Модуль Python <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> корисний, але він не знає як запустити код написаний на таких мовах як Python, PHP чи JavaScript. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:</p> - -<ul> - <li>To run Python server-side code, you'll need to use a Python web framework. You can find out how to use the Django framework by reading <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> is also a good (slightly less heavyweight) alternative to Django. To run this you'll need to <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, then install Flask using <code>pip3 install flask</code>. At this point you should be able to run the Python Flask examples using for example <code>python3 python-example.py</code>, then navigating to <code>localhost:5000</code> in your browser.</li> - <li>To run Node.js (JavaScript) server-side code, you'll need to use raw node or a framework built on top of it. Express is a good choice — see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> - <li>To run PHP server-side code, you'll need a server setup that can interpret PHP. Good options for local PHP testing are <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, and PHP/Python/Perl). These are complete packages that create local setups to allow you to run the Apache server, PHP, and MySQL databases.</li> -</ul> diff --git a/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 5444f5713a..0000000000 --- a/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Cascade and inheritance -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>Мета цього уроку - розвинути розуміння найфундаментальніших концептів CSS — каскадності (cascade), специфічності (specificity), і наслідування (inheritance) — ці принципи контролюють те, як CSS застосовується до елементів HTML і як вирішуються конфлікти між правилами CSS.</p> - -<p>Опрацювання цього уроку може здатися не настільки актуальним на даному етапі і занадто академічним порівняно з іншими частинами курсу, однак розуміння цих концепцій збереже вам багато часу в майбутньому. Ми заохочуємо вас опрацювати цю частину курсу уважно і впевнитися, що ви розумієте ці концепти перед тим, як рухатися далі. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn about the cascade and specificity, and how inheritance works in CSS.</td> - </tr> - </tbody> -</table> - -<h2 id="Правила_CSS_що_конфліктують_між_собою">Правила CSS, що конфліктують між собою</h2> - -<p>CSS означає Cascading Style Sheets (Каскадні Таблиці Стилів), і розуміння першого слова <em>каскадний</em> є надзвичайно важливим — спосіб поведінки каскадів це ключ до розуміння CSS.</p> - -<p>Рано чи пізно, ви будете працювати над проектом і потрапите в ситуацію, коли правила CSS, які повинні були б застосуватися до якогось певного HTML елемента, не працюють. Як правило, проблема полягатиме в тому, що ви створили два різних СSS правила, які можуть потенційно застосуватися до одного і того самого елемента. <strong>Каскад (cascade)</strong>, так само як і тісно пов*язаний із ним концепт <strong>специфічності - </strong>це механізми, які контролюють те, яке саме із CSS правил застосується в випадку такого конфлікту. Правило, яке застосується до вашого елементу може бути далеко не тим, на котре ви очікували. Для того, щоб уникнути таких ситуацій, потрібно зрозуміти, як саме працюють ці механізми. </p> - -<p>Так само важливим є і концепт <strong>наслідування (inheritance)</strong>, який полягає в тому, що деякі CSS властивості (CSS properties) по замовчуванню наслідують ознаки своїх батьківських елементів (parent elements), а деякі ні. Це так само може призвести до неочікуваних ситуацій.</p> - -<p>Для початку, поглянемо на концепції із якими ми матимемо справу в загальному, а потім розберемо кожну із них по черзі, щоб побачити те, як вони співпрацюють між собою і іншими правилами CSS, які ви написали. Зрозуміти ці концепти може бути непросто спочатку, однак в процесі написання і практикування з CSS, вам буде все легше і легше розуміти і те, як саме воно працює. </p> - -<h3 id="Каскад_cascade">Каскад (cascade)</h3> - -<p>Каскад — на найпростішому рівні, цей принцип полягає в тому, що порядок CSS правил має значення. В випадках, коли можна застосувати одне із двох різних правил із однаковою специфічністю, вибирається те правило, яке зазначене останнім. </p> - -<p>В нашому прикладі ми маємо два правила, що могли б бути застосовані до елемента <code>h1</code>. Елемент <code>h1</code> в кінцевому результаті виявиться синім — ці два правила мають ідентичний селектор, і, як результат, однакову специфічність, а тому той, який іде останнім по порядку, "перемагає".</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> - -<h3 id="Специфічність_specificity">Специфічність (specificity)</h3> - -<p>Принцип специфічності полягає в тому, як саме браузер вирішує те, яке із CSS правил застосувати тоді, коли різні правила відносяться до різних селеторів, але все одно можуть бути застосовані до одного і того самого елемента. В певному сенсі це міра того, наскільки специфічним буде вибір селектора.</p> - -<ul> - <li>Селектор що відноситься до <strong>типу елемента</strong> (наприклад, h1, p) буде менш специфічним. Він вибирає всі елементи однакового типу, що з*являться на сторінці, а тому матиме низький показник. </li> - <li>Селектор, що відноситься до<strong> класу </strong>буде специфічнішим, оскільки він вибере лише ті елементи на сторінці, що матимуть атрибут <code>class</code> із якимось специфічним значенням. Тому його показник буде вищим.</li> -</ul> - -<p>Час для прикладу: ми знову бачимо 2 правила, що можуть бути застосовані до елемента <code>h1</code>. В кінцквому результаті <code>h1</code> стає червоним — селектор по класу надає своєму правилу більшої специфічності, а тому браузер застосує саме його, не зважаючи на те, що по порядку він йде другим.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> - -<p>Ми пояснимо розрахунок специфічності далі у цій статті. </p> - -<h3 id="Inheritance">Inheritance</h3> - -<p>Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.</p> - -<p>For example, if you set a <code>color</code> and <code>font-family</code> on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> - -<p>Some properties do not inherit — for example if you set a {{cssxref("width")}} of 50% on an element, all of its descendants do not get a width of 50% of their parent's width. If this was the case, CSS would be very frustrating to use!</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: On MDN CSS property reference pages you can find a technical information box, usually at the bottom of the specifications section, which lists a number of data points about that property, including whether it is inherited or not. See the <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a>, for example.</p> -</div> - -<h2 id="Understanding_how_the_concepts_work_together">Understanding how the concepts work together</h2> - -<p>These three concepts together control which CSS applies to what element; in the below sections we'll see how they work together. It can sometimes seem a little bit complicated, but you will start to remember them as you get more experienced with CSS, and you can always look up the details if you forget! Even experienced developers don't remember all the details.</p> - -<h2 id="Understanding_inheritance">Understanding inheritance</h2> - -<p>We'll start with inheritance. In the example below we have a {{cssxref("ul")}}, with two levels of unordered lists nested inside it. We have given the outer <code><ul></code> a border, padding, and a font color.</p> - -<p>The color has applied to the direct children, but also the indirect children — the immediate child <code><li></code>s, and those inside the first nested list. We have then added a class of <code>special</code> to the second nested list and applied a different color to it. This then inherits down through its children.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> - -<p>Things like widths (as mentioned above), margins, padding, and borders do not inherit. If a border were to be inherited by the children of our list, every single list and list item would gain a border — probably not an effect we would ever want!</p> - -<p>Which properties are inherited by default and which aren't is largely down to common sense.</p> - -<h3 id="Controlling_inheritance">Controlling inheritance</h3> - -<p>CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.</p> - -<dl> - <dt>{{cssxref("inherit")}}</dt> - <dd>Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".</dd> - <dt>{{cssxref("initial")}}</dt> - <dd>Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to <code>inherit</code> instead.</dd> - <dt>{{cssxref("unset")}}</dt> - <dd>Resets the property to its natural value, which means that if the property is naturally inherited it acts like <code>inherit</code>, otherwise it acts like <code>initial</code>.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: There is also a newer value, {{cssxref("revert")}}, which has limited browser support.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: See {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} for more information on each of these and how they work.</p> -</div> - -<p>We can look at a list of links and explore how the universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to get to grips with HTML and CSS.</p> - -<p>For example:</p> - -<ol> - <li>The second list item has the class <code>my-class-1</code> applied. This sets the color of the a element nested inside to inherit. If you remove the rule how does it change the color of the link?</li> - <li>Do you understand why the third and fourth links are the color that they are? Check the description of the values above if not.</li> - <li>Which of the links will change color if you define a new color for the <code><a></code> element — for example <code>a { color: red; }</code>?</li> -</ol> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> - -<h3 id="Resetting_all_property_values">Resetting all property values</h3> - -<p>The CSS shorthand property <code>all</code> can be used to apply one of these inheritance values to (almost) all properties at once. Its value can be any one of the inheritance values (<code>inherit</code>, <code>initial</code>, <code>unset</code>, or <code>revert</code>). It's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes.</p> - -<p>In the below example we have two blockquotes. The first has styling applied to the blockquote element itself, the second has a class applied to the blockquote which sets the value of <code>all</code> to <code>unset</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> - -<p>Try setting the value of <code>all</code> to some of the other available values and observe what the difference is.</p> - -<h2 id="Розуміння_каскадів">Розуміння каскадів</h2> - -<p>Ми тепер розуміємо, чому параграф, що знаходиться всередині структури HTML документа, має такий самий коляр як і той, що вказаний в CSS для елементу <body>. З початкових уроків ми розуміємо також from the introductory lessons we have an understanding of how to change the CSS applied to something at any point in the document — whether by assigning CSS to an element or creating a class. We will now take a proper look at how the cascade defines which CSS rules apply when more than one thing could style an element.</p> - -<p>There are three factors to consider, listed here in decreasing order of importance. Earlier ones overrule later ones:</p> - -<ol> - <li>Importance</li> - <li>Specificity</li> - <li>Source order</li> -</ol> - -<p>We will look at these from the bottom up, to see how browsers figure out exactly what CSS should be applied.</p> - -<h3 id="Source_order">Source order</h3> - -<p>We have already seen how source order matters to the cascade. If you have more than one rule, which has exactly the same weight, then the one that comes last in the CSS will win. You can think of this as rules which are nearer the element itself overwriting early ones until the last one wins and gets to style the element.</p> - -<h3 id="Specificity">Specificity</h3> - -<p>Once you understand the fact that source order matters, at some point you will run into a situation where you know that a rule comes later in the stylesheet, but an earlier, conflicting, rule is applied. This is because that earlier rule has a <strong>higher specificity</strong> — it is more specific, and therefore is being chosen by the browser as the one that should style the element.</p> - -<p>As we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the element.</p> - -<p>Something to note here is that although we are thinking about selectors, and the rules that are applied to the thing they select, it isn't the entire rule which is overwritten, only the properties which are the same.</p> - -<p>This behavior helps avoid repetition in your CSS. A common practice is to define generic styles for the basic elements, and then create classes for those which are different. For example, in the stylesheet below we have defined generic styles for level 2 headings, and then created some classes which change only some of the properties and values. The values defined initially are applied to all headings, then the more specific values are applied to the headings with the classes.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> - -<p>Let's now have a look at how the browser will calculate specificity. We already know that an element selector has low specificity and can be overwritten by a class. Essentially a value in points is awarded to different types of selectors, and adding these up gives you the weight of that particular selector, which can then be assessed against other potential matches.</p> - -<p>The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:</p> - -<ol> - <li><strong>Thousands</strong>: Score one in this column if the declaration is inside a {{htmlattrxref("style")}} attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.</li> - <li><strong>Hundreds</strong>: Score one in this column for each ID selector contained inside the overall selector.</li> - <li><strong>Tens</strong>: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.</li> - <li><strong>Ones</strong>: Score one in this column for each element selector or pseudo-element contained inside the overall selector.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: The universal selector (<code>*</code>), combinators (<code>+</code>, <code>></code>, <code>~</code>, ' '), and negation pseudo-class (<code>:not</code>) have no effect on specificity.</p> -</div> - -<p>The following table shows a few isolated examples to get you in the mood. Try going through these, and making sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Selector</th> - <th scope="col">Thousands</th> - <th scope="col">Hundreds</th> - <th scope="col">Tens</th> - <th scope="col">Ones</th> - <th scope="col">Total specificity</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>h1</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1</td> - <td>0001</td> - </tr> - <tr> - <td><code>h1 + p::first-letter</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>3</td> - <td>0003</td> - </tr> - <tr> - <td><code>li > a[href*="en-US"] > .inline-warning</code></td> - <td>0</td> - <td>0</td> - <td>2</td> - <td>2</td> - <td>0022</td> - </tr> - <tr> - <td><code>#identifier</code></td> - <td>0</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0100</td> - </tr> - <tr> - <td>No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1000</td> - </tr> - </tbody> -</table> - -<p>Before we move on, let's look at an example in action.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> - -<p>So what's going on here? First of all, we are only interested in the first seven rules of this example, and as you'll notice, we have included their specificity values in a comment before each one.</p> - -<ul> - <li>The first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra ID selector in the chain: its specificity is 201 vs. 101.</li> - <li>The third and fourth selectors are competing over the styling of the link's text color — the second one wins and makes the text white because although it has one less element selector, the missing selector is swapped out for a class selector, which is worth ten rather than one. So the winning specificity is 113 vs. 104.</li> - <li>Selectors 5–7 are competing over the styling of the link's border when hovered. Selector six clearly loses to five with a specificity of 23 vs. 24 — it has one fewer element selectors in the chain. Selector seven, however, beats both five and six — it has the same number of sub-selectors in the chain as five, but an element has been swapped out for a class selector. So the winning specificity is 33 vs. 23 and 24.</li> -</ul> - -<ol> -</ol> - -<div class="note"> -<p><strong>Note</strong>: This has only been an approximate example for ease of understanding. In actuality, each selector type has its own level of specificity that cannot be overwritten by selectors with a lower specificity level. For example, a <em>million</em> <strong>class</strong> selectors combined would not be able to overwrite the rules of <em>one</em> <strong>id</strong> selector.</p> - -<p>A more accurate way to evaluate specificity would be to score the specificity levels individually starting from highest and moving on to lowest when necessary. Only when there is a tie between selector scores within a specificity level do you need to evaluate the next level down; otherwise, you can disregard the lower specificity level selectors since they can never overwrite the higher specificity levels.</p> -</div> - -<h3 id="!important">!important</h3> - -<p>There is a special piece of CSS that you can use to overrule all of the above calculations, however you should be very careful with using it — <code>!important</code>. This is used to make a particular property and value the most specific thing, thus overriding the normal rules of the cascade.</p> - -<p>Take a look at this example where we have two paragraphs, one of which has an ID.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> - -<p>Let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand:</p> - -<ol> - <li>You'll see that the third rule's {{cssxref("color")}} and {{cssxref("padding")}} values have been applied, but the {{cssxref("background-color")}} hasn't. Why? Really all three should surely apply, because rules later in the source order generally override earlier rules.</li> - <li>However, The rules above it win, because class selectors have higher specificity than element selectors.</li> - <li>Both elements have a {{htmlattrxref("class")}} of <code>better</code>, but the 2nd one has an {{htmlattrxref("id")}} of <code>winning</code> too. Since IDs have an <em>even higher</em> specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are <em>very specific</em> in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.</li> - <li>The 2nd element <em>does</em> get the red background color, but no border. Why? Because of the <code>!important</code> declaration in the second rule — including this after <code>border: none</code> means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: The only way to override this <code>!important</code> declaration would be to include another <code>!important</code> declaration on a declaration with the <em>same specificity</em> later in the source order, or one with a higher specificity.</p> -</div> - -<p>It is useful to know that <code>!important</code> exists so that you know what it is when you come across it in other people's code. <strong>However, we strongly recommend that you never use it unless you absolutely have to.</strong> <code>!important</code> changes the way the cascade normally works, so it can make debugging CSS problems really hard to work out, especially in a large stylesheet.</p> - -<p>One situation in which you may have to use it is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override a style that can't be overridden in any other way. But really, don't use it if you can avoid it.</p> - -<h2 id="The_effect_of_CSS_location">The effect of CSS location</h2> - -<p>Finally, it is also useful to note that the importance of a CSS declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.</p> - -<h2 id="To_summarize">To summarize</h2> - -<p>Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:</p> - -<ol> - <li>Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).</li> - <li>Normal declarations in user style sheets (custom styles set by a user).</li> - <li>Normal declarations in author style sheets (these are the styles set by us, the web developers).</li> - <li>Important declarations in author style sheets</li> - <li>Important declarations in user style sheets</li> -</ol> - -<p>It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using <code>!important</code> in their rules.</p> - -<h2 id="Active_learning_playing_with_the_cascade">Active learning: playing with the cascade</h2> - -<p>In this active learning, we'd like you to experiment with writing a single new rule that will override the color and background color that we've applied to the links by default. Can you use one of the special values we looked at in the {{anch("Controlling inheritance")}} section to write a declaration in a new rule that will reset the background color back to white, without using an actual color vff</p> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">take a look at the solution here</a>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> - -<h2 id="Whats_next">What's next</h2> - -<p>If you understood most of this article, then well done — you've started getting familiar with the fundamental mechanics of CSS. Next up, we'll look at selectors in detail.</p> - -<p>If you didn't fully understand the cascade, specificity, and inheritance, then don't worry! This is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky. We'd advise that you return to this article a few times as you continue through the course, and keep thinking about it.</p> - -<p>Refer back here if you start to come across strange issues with styles not applying as expected. It could be a specificity issue.</p> - -<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> diff --git a/files/uk/learn/css/building_blocks/index.html b/files/uk/learn/css/building_blocks/index.html deleted file mode 100644 index 39839cd182..0000000000 --- a/files/uk/learn/css/building_blocks/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Будівельні блоки CSS -slug: Learn/CSS/Building_blocks -tags: - - Beginner - - CSS - - Learn - - NeedsTranslation - - TopicStub - - building blocks -translation_of: Learn/CSS/Building_blocks ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> - -<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should have:</p> - -<ol> - <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> - <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> - <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> - <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> - <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> - <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: - <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> - <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> - <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> - <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> - <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> - <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> - <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> - <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> - <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> - <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> - <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> - <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> - <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> - <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> - <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> -</dl> diff --git a/files/uk/learn/css/css_layout/index.html b/files/uk/learn/css/css_layout/index.html deleted file mode 100644 index ed65a3192e..0000000000 --- a/files/uk/learn/css/css_layout/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: CSS розмітка -slug: Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -original_slug: Learn/CSS/CSS_розмітка ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should already:</p> - -<ol> - <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> - <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> - <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> - <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt> - <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> - <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> - <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt> - <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt> - <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> - <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> - <dd> - <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> - </dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt> - <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> - <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> -</dl> diff --git a/files/uk/learn/css/first_steps/how_css_works/index.html b/files/uk/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 7a21625871..0000000000 --- a/files/uk/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: What is CSS? -slug: Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<div>{{CSSTutorialTOC}}</div> - -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p> - -<h2 class="clearLeft" id="Інформація_Що_таке_CSS">Інформація: Що таке CSS?</h2> - -<p>Каскадні таблиці стилів (англ. - <em>Cascading Style Sheets </em> <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a>.</p> - -<p><em>Документ</em> являє собою інформацію, структуровану для подання з використанням <em>мови розмітки</em>.</p> - -<p><em>Presenting</em> a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.</p> - -<div class="tuto_example"> -<p><strong>Приклади</strong></p> - -<ul> - <li>A web page like the one you are reading is a document.<br> - The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language).</li> - <li>Dialogs in an application, also called modal windows, are often documents.<br> - Such dialogs may also be structured using a markup language, like XUL (XML User Interface Language), which you will find in some Mozilla applications.</li> -</ul> -</div> - -<p>In this tutorial, boxes captioned <strong>Детальніше</strong> like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.</p> - -<div class="tuto_details"> -<div class="tuto_type">Детальніше</div> - -<p>Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.</p> - -<p>Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з документами, збереженими у файлах.</p> - -<p>Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> - <td>для веб-сторінок</td> - </tr> - <tr> - <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> - <td>для структурованих документів в загальному</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> - <td>для графіки</td> - </tr> - <tr> - <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> - <td>для інтерфейсів користувачів у браузері Mozilla</td> - </tr> - </tbody> -</table> - -<p>У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.</p> -</div> - -<div class="tuto_details"> -<div class="tuto_type">Детальніше</div> - -<p>In formal CSS terminology, the program that presents a document to a user is called a <em>user agent</em> (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.</p> - -<p>For formal definitions of terminology relating to CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.</p> -</div> - -<h2 id="До_роботи_Створення_документу">До роботи: Створення документу</h2> - -<ol> - <li>Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.</li> - <li>Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.</li> - <li>Copy and paste the HTML shown below. Save the file using the name <code>doc1.html</code> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html></pre> - - <p>{{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}</p> - </li> - <li>Open a new tab or a new window in your browser, then open the file you just created. - <p>You should see the text with the initial letters bold, like this:</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.</p> - </li> -</ol> - -<h2 id="Що_далі">Що далі?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">next section</a> you'll use CSS to style your document.</p> diff --git a/files/uk/learn/css/first_steps/index.html b/files/uk/learn/css/first_steps/index.html deleted file mode 100644 index 30aa7f0214..0000000000 --- a/files/uk/learn/css/first_steps/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Перші кроки у CSS -slug: Learn/CSS/First_steps -tags: - - CSS - - Модулі - - Навчання - - Перші кроки - - Посадка - - Початок -translation_of: Learn/CSS/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">CSS (Cascading Style Sheets) використовується для стилювання та розміщення веб-сторінок - наприклад, для зміни шрифту, кольору, розміру та інтервалу вашого вмісту, розділення його на кілька стовпців або додавання анімації та інших декоративних функцій. Цей модуль забезпечує легкий початок вашого шляху до оволодіння CSS основами того, як він працює, як виглядає синтаксис і як ви можете почати використовувати його для додавання стилю до HTML.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Перш ніж запустити цей модуль, ви повинні мати:</p> - -<ol> - <li>Основне ознайомлення з використанням комп'ютерів та пасивним використанням Інтернету (тобто перегляд його, споживання вмісту.)</li> - <li>Основне робоче середовище, створене, як детально описано в <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення,</a> і розуміння того, як створювати файли та керувати ними, як детально описано у розділі <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">«Робота з файлами».</a><br> - Основне ознайомлення з HTML, як обговорювалося в модулі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> .</li> -</ol> - -<div class="note"> -<p><strong>Примітка. Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де у вас немає можливості створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад </strong><a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Посібники">Посібники</h2> - -<p>Цей модуль містить наступні статті, які допоможуть вам ознайомитись з усією базовою теорією CSS та нададуть вам можливість перевірити деякі навички.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></dt> - <dd><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></dt> - <dd>У цій статті ми візьмемо простий HTML-документ і застосуємо до нього CSS, вивчивши деякі практичні речі щодо мови.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Яка структура CSS</a></dt> - <dd>Тепер, коли ви маєте уявлення про те, що таке CSS та основи його використання, саме час трохи заглибитись у структуру самої мови. Ми вже зустріли багато обговорених тут концепцій; ви можете повернутися до цього, щоб скласти резюме, якщо ви знайдете якісь пізніші поняття заплутані.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></dt> - <dd>Ми вивчили основи CSS, для чого він потрібен та як писати прості таблиці стилів. У цьому уроці ми розглянемо, як браузер приймає CSS та HTML і перетворює їх у веб-сторінку.</dd> - <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуючи свої нові знання</a></dt> - <dd>З того, що ви вивчили на останніх кількох уроках, ви повинні виявити, що ви можете форматувати прості текстові документи за допомогою CSS, щоб додати до них свій власний стиль. Ця стаття дає вам шанс це зробити.</dd> -</dl> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Проміжна веб-грамотність 1: Вступ до CSS</a></dt> - <dd>Чудовий курс від Mozilla foundation, який вивчає та перевіряє багато навичок, про які говорилося в модулі «Вступ до CSS». Дізнайтеся про стилізацію HTML-елементів на веб-сторінці, селекторах CSS, атрибутах та значеннях.</dd> -</dl> diff --git a/files/uk/learn/css/first_steps/what_is_css/index.html b/files/uk/learn/css/first_steps/what_is_css/index.html deleted file mode 100644 index 18a74a4f44..0000000000 --- a/files/uk/learn/css/first_steps/what_is_css/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Що таке CSS? -slug: Learn/CSS/First_steps/What_is_CSS -tags: - - CSS - - Вступ до CSS - - Модулі - - Навчання - - Синтаксис - - Специфікація - - новачок -translation_of: Learn/CSS/First_steps/What_is_CSS -original_slug: Learn/CSS/First_steps/Що_таке_CSS ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> - -<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Основна комп'ютерна грамотність, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">встановлено базове програмне забезпечення</a>, основні знання про <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">робота з файлами,</a> та HTML базовий (вивчыть <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>)</td> - </tr> - <tr> - <th scope="row"> - <p>Мета:</p> - - - </th> - <td>To learn what CSS is.</td> - </tr> - </tbody> -</table> - -<p>У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.</p> - -<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> - -<p>Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.</p> - -<h2 id="Для_чого_CSS">Для чого CSS?</h2> - -<p>Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A <strong>document</strong> is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.</p> - -<p>Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.</p> - -<div class="blockIndicator note"> -<p><strong>Примітка</strong>: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.</p> -</div> - -<p>CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.</p> - -<h2 id="Синтаксис_CSS">Синтаксис CSS</h2> - -<p>CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".</p> - -<p>У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:</p> - -<pre class="brush: css">h1 { - color: red; - font-size: 5em; -}</pre> - -<p>Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).</p> - -<p>Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.</p> - -<p>Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">значення кольорів</a>. У нас також є <code>font-size</code> влыстивість. Ця властивість може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">розмір одиниць</a>.</p> - -<p>Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.</p> - -<pre class="brush: css">h1 { - color: red; - font-size: 5em; -} - -p { - color: black; -}</pre> - -<p>Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.</p> - -<div class="blockIndicator note"> -<p><strong>Примітка</strong>: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN <a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!</p> -</div> - -<h2 id="CSS_Модулі">CSS Модулі</h2> - -<p>Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).</p> - -<p>На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.</p> - -<p>Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> та <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> властивості, що визначаються в цьому модулі. І ти будеш прав.</p> - -<h3 id="CSS_специфікація">CSS специфікація</h3> - -<p>Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.</p> - -<p>CSS не відрізняється - він розроблений групою в межах W3C під назвою <a href="https://www.w3.org/Style/CSS/">CSS Робоча група</a>. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.</p> - -<p>Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!</p> - -<p>Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.</p> - -<h2 id="Підтримка_браузера">Підтримка браузера</h2> - -<p>Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a>. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.</p> - -<p>Далі йде таблиця даних compat для властивості CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> .</p> - -<p>{{Compat("css.properties.font-family")}}</p> - -<h2 id="Що_далі">Що далі</h2> - -<p>Тепер, коли ви зрозуміли, що таке CSS, перейдемо до <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a> де ви можете почати самостійно писати деякі CSS.</p> - -<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ol> - <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Як структурується CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуйте свої нові знання</a></li> -</ol> diff --git a/files/uk/learn/css/index.html b/files/uk/learn/css/index.html deleted file mode 100644 index c4fd0dedfc..0000000000 --- a/files/uk/learn/css/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Learn to style HTML using CSS -slug: Learn/CSS -tags: - - Beginner - - CSS - - CodingScripting - - Debugging - - Landing - - NeedsContent - - NeedsTranslation - - Style - - Topic - - TopicStub - - length - - specificity -translation_of: Learn/CSS ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Cascading Stylesheets — або {{glossary("CSS")}} — це перша технологія, яку слід почати вивчати після {{glossary("HTML")}}. Хоча HTML використовується для визначення структури та семантики вашого вмісту, CSS використовується для його стилізації та викладки. Наприклад, ви можете використовувати CSS, щоб змінити шрифт, колір, розмір та інтервал вашого вмісту, розділити його на кілька стовпців або додати анімацію та інші декоративні функції.</p> - -<h2 id="Шляхи_навчання">Шляхи навчання</h2> - -<p>Ви повинні вивчити основи HTML, перш ніж спробувати будь-який CSS. Рекомендуємо спочатку опрацювати наш Вступ до модуля HTML. У цьому модулі ви дізнаєтесь про:</p> - -<ul> - <li>CSS, почніть з модуля <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></li> - <li>Більш продвинуті <a href="/en-US/docs/Learn/HTML#Modules">HTML м</a>одулі</li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, і як використовувати його для додавання динамічної функціональності веб-сторінкам</li> -</ul> - -<p>Після того, як ви зрозумієте основи HTML, рекомендуємо вам вивчити HTML і CSS одночасно, рухаючись вперед і назад між двома темами. Це тому, що HTML набагато цікавіше і набагато цікавіше вчитися, коли ви застосовуєте CSS, і ви не можете навчитися CSS, не знаючи HTML.</p> - -<p>Перш ніж розпочати цю тему, ви також повинні ознайомитись з використанням комп’ютерів та пасивним використанням Інтернету (тобто, просто переглянувши його, споживаючи вміст). Ви повинні мати базове робоче середовище, налаштоване як детально<br> - в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення</a> та зрозуміти, як створити та керувати файлами, як це детально описано в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> — обидва вони є нашими частинами <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> повний модуль для початківців.</p> - -<p>Рекомендується опрацювати <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> перш ніж перейти до цієї теми. Однак це не зовсім необхідне, оскільки значна частина того, що розглядається в статті про основи CSS, також висвітлено в нашому модулі <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, хоча і набагато детальніше.</p> - -<h2 id="Модулі">Модулі</h2> - -<p>Ця тема містить наступні модулі в запропонованому порядку для роботи над ними. Ви обов'язково повинні почати з першого.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></dt> - <dd>Цей модуль розпочинає роботу з основами роботи CSS, включаючи використання селекторів та властивостей; написання правил CSS; застосування CSS до HTML; визначення довжини, кольору та інших одиниць у CSS; контроль каскаду та успадкування; розуміння основ моделі коробки; та налагодження CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt> - <dd>Тут ми розглядаємо основи стилізації тексту, включаючи встановлення шрифту, жирності та курсиву; інтервал між рядками та літерами; і скидання тіней та інших функцій тексту. Ми округляємо модуль, дивлячись на застосування спеціальних шрифтів до вашої сторінки та стилістичні списки та посилання.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Стильні коробки</a></dt> - <dd>Далі ми розглянемо вікна стилізації, один із основних кроків щодо створення веб-сторінки. У цьому модулі ми резюмуємо модель коробки, потім переглядаємо керування макетами коробки, встановлюючи накладки, межі та поля, встановлюючи власні кольори фону, зображення та фантазійні функції, такі як тіні для крапель та фільтри на коробках.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS макет</a></dt> - <dd>На даний момент ми вже розглядали основи CSS, як стилювати текст та як стилізувати та маніпулювати полями, у яких розміщений ваш вміст. Тепер прийшов час розглянути, як розташувати вікна в потрібному місці по відношенню до вікна перегляду та один до одного. Ми забезпечили необхідні передумови, тому тепер ми можемо зануритися в глиб CSS-макета, переглядаючи різні налаштування дисплея, сучасні інструменти компонування, такі як flexbox, CSS-сітка та позиціонування, а також деякі застарілі методи, про які ви все ще можете знати.</dd> - <dt>Чуйний дизайн (TBD)</dt> - <dd>Завдяки такій кількості різних типів пристроїв, які сьогодні можуть переглядати Інтернет, <a href="/en-US/docs/Web/Guide/Responsive_design">чуйний веб-дизайн</a> (RWD) стала основним навиком веб-розробки. Цей модуль буде охоплювати основні принципи та інструменти роботи RWD; поясніть, як застосувати різні CSS до документа залежно від функцій пристрою, таких як ширина екрана, орієнтація та роздільна здатність; та вивчити технології, доступні для обслуговування різних відео та зображень залежно від таких функцій.</dd> -</dl> - -<h2 id="Вирішення_поширених_проблем_CSS">Вирішення поширених проблем CSS</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto">Використовуйте CSS для вирішення загальних проблем</a> надає посилання на розділи вмісту, що пояснюють, як використовувати CSS для вирішення дуже поширених проблем під час створення веб-сторінки.</p> - -<p>Ви спочатку застосовуватимете кольори до елементів HTML та їх фонів; зміни розміру, форми та положення елементів; і додавати та визначати межі елементів. Але не так багато, що ти не зможеш зробити, коли добре зрозумієш навіть основи CSS. Одна з найкращих речей щодо вивчення CSS - це те, що, як тільки ви знаєте основи, зазвичай у вас є гарне відчуття того, що можна, а чого не можна зробити, навіть якщо ви ще не знаєте, як це зробити!</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS">CSS в MDN</a></dt> - <dd>Основна точка входу для CSS-документації на MDN, де ви знайдете детальну довідкову документацію щодо всіх функцій мови CSS. Хочете знати всі цінності, які може спричинити властивість? Це гарне місце.</dd> -</dl> diff --git a/files/uk/learn/css/styling_text/index.html b/files/uk/learn/css/styling_text/index.html deleted file mode 100644 index 46c343f406..0000000000 --- a/files/uk/learn/css/styling_text/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Стилізація тексту -slug: Learn/CSS/Styling_text -tags: - - Beginner - - CSS - - CodingScripting - - Fonts - - Landing - - Links - - Module - - NeedsTranslation - - Text - - TopicStub - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> - <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt> - <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt> - <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt> - <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt> - <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd> -</dl> diff --git a/files/uk/learn/css/styling_text/styling_lists/index.html b/files/uk/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index c47c3888c6..0000000000 --- a/files/uk/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Стилі списків -slug: Learn/CSS/Styling_text/Styling_lists -tags: - - CSS - - Початківець - - Спискі - - Стаття - - Стилі - - Текст -translation_of: Learn/CSS/Styling_text/Styling_lists -original_slug: Learn/CSS/Styling_text/Стилі_списків ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> - -<p class="summary">Здебільшого <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#List">Списки</a> ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Основна комп'ютерна грамотність, основи HTML (вивчення <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступу до HTML</a>), основи CSS (вивчення <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступу до CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основи тексту та шрифтів CSS.</a></td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.</td> - </tr> - </tbody> -</table> - -<h2 id="Простий_приклад_списку">Простий приклад списку</h2> - -<p>Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі, що є характерними для їхнього типу списку. Неперевершений приклад <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступний на Github</a> ( також перевірте <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">цей код</a>)</p> - -<p>Приклад HTML для нашого списку виглядає так:</p> - -<pre class="brush: html"><h2>Shopping (unordered) list</h2> - -<p>Paragraph for reference, paragraph for reference, paragraph for reference, -paragraph for reference, paragraph for reference, paragraph for reference.</p> - -<ul> - <li>Humous</li> - <li>Pitta</li> - <li>Green salad</li> - <li>Halloumi</li> -</ul> - -<h2>Recipe (ordered) list</h2> - -<p>Paragraph for reference, paragraph for reference, paragraph for reference, -paragraph for reference, paragraph for reference, paragraph for reference.</p> - -<ol> - <li>Toast pitta, leave to cool, then slice down the edge.</li> - <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> - <li>Wash and chop the salad.</li> - <li>Fill pitta with salad, humous, and fried halloumi.</li> -</ol> - -<h2>Ingredient description list</h2> - -<p>Paragraph for reference, paragraph for reference, paragraph for reference, -paragraph for reference, paragraph for reference, paragraph for reference.</p> - -<dl> - <dt>Humous</dt> - <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> - <dt>Pitta</dt> - <dd>A soft, slightly leavened flatbread.</dd> - <dt>Halloumi</dt> - <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> - <dt>Green salad</dt> - <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> -</dl></pre> - -<p>Якщо ви зараз перейдете до живого прикладу та вивчіть елементи списку, що використовують <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">інструменти розробника браузера</a>, ви помітите пара стилів по замовчуванням:</p> - -<ul> - <li>{{htmlelement("ul")}} і {{htmlelement("ol")}} елементи мають верхній і нижній {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>) і {{cssxref("padding-left")}} від <code>40px</code> (<code>2.5em</code>.)</li> - <li>Елементи списку ({{htmlelement("li")}} елементи) не встановлено за замовчуванням інтервал.</li> - <li>{{htmlelement("dl")}} елемент має верхню та нижню частини {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>), але не набір набивних покриттів.</li> - <li>{{htmlelement("dd")}} елементи мають {{cssxref("margin-left")}} від <code>40px</code> (<code>2.5em</code>.)</li> - <li>{{htmlelement("p")}} елементи, які ми включили для довідки, мають вершину та нижню частину {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>),так само, як і різні типи списку.</li> -</ul> - -<h2 id="Обробка_списку_інтервалів">Обробка списку інтервалів</h2> - -<p>При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">закінчений стиль приклад</a> в Github, і <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">знайти вихідний код</a> також.)</p> - -<p>CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:</p> - -<pre class="brush: css">/* General styles */ - -html { - font-family: Helvetica, Arial, sans-serif; - font-size: 10px; -} - -h2 { - font-size: 2rem; -} - -ul,ol,dl,p { - font-size: 1.5rem; -} - -li, p { - line-height: 1.5; -} - -/* Description list styles */ - - -dd, dt { - line-height: 1.5; -} - -dt { - font-weight: bold; -} - -dd { - margin-bottom: 1.5rem; -}</pre> - -<ul> - <li>Перше правило встановлює розмір шрифту на рівні сайту та розмір шрифту в базовому розмірі 10 пікселів. Вони успадковуються на всій сторінці.</li> - <li>Правила 2 та 3 встановлюють відносні розміри шрифтів для заголовків, різні типи списку (діти елементів списку успадковують їх) та абзаци. Це означає, що кожен параграф і список матимуть однаковий розмір шрифту та верхній та нижній інтервал, що допоможе зберегти вертикальний ритм узгоджено.</li> - <li>Правило 4 встановлює те ж саме {{cssxref("line-height")}} на абзаци та елементи списку - тому абзаци та окремий елемент списку матимуть однаковий інтервал між рядками. Це також допоможе зберегти вертикальний ритм узгоджено.</li> - <li>Правила 5 та 6 застосовуються до списку опису - ми встановили те ж саме <code>line-height</code> в термінах та описі списку опису, як ми робили з абзацами та елементами списку. Знову ж таки, послідовність хороша! Ми також робимо, що описові терміни мають жирний шрифт, тому вони виглядають простіше.<span id="cke_bm_126E" class="hidden"> </span></li> -</ul> - -<h2 id="List-specific_styles">List-specific styles</h2> - -<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p> - -<ul> - <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li> - <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li> - <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li> -</ul> - -<h3 id="Bullet_styles">Bullet styles</h3> - -<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p> - -<pre class="brush: css">ol { - list-style-type: upper-roman; -}</pre> - -<p>Це дає нам такий вигляд:</p> - -<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> - -<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p> - -<h3 id="Bullet_position">Bullet position</h3> - -<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p> - -<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p> - -<pre class="brush: css">ol { - list-style-type: upper-roman; - list-style-position: inside; -}</pre> - -<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> - -<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3> - -<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p> - -<pre class="brush: css">ul { - list-style-image: url(star.svg); -}</pre> - -<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p> - -<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p> - -<pre class="brush: css">ul { - padding-left: 2rem; - list-style-type: none; -} - -ul li { - padding-left: 2rem; - background-image: url(star.svg); - background-position: 0 0; - background-size: 1.6rem 1.6rem; - background-repeat: no-repeat; -}</pre> - -<p>Here we've done the following:</p> - -<ul> - <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li> - <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li> - <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows: - <ul> - <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li> - <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li> - <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li> - <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li> - </ul> - </li> -</ul> - -<p>This gives us the following result:</p> - -<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> - -<h3 id="list-style_shorthand">list-style shorthand</h3> - -<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p> - -<pre class="brush: css">ul { - list-style-type: square; - list-style-image: url(example.png); - list-style-position: inside; -}</pre> - -<p>Could be replaced by this:</p> - -<pre>ul { - list-style: square url(example.png) inside; -}</pre> - -<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p> - -<h2 id="Controlling_list_counting">Controlling list counting</h2> - -<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p> - -<h3 id="start">start</h3> - -<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p> - -<pre class="brush: html"><ol start="4"> - <li>Toast pitta, leave to cool, then slice down the edge.</li> - <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> - <li>Wash and chop the salad.</li> - <li>Fill pitta with salad, humous, and fried halloumi.</li> -</ol></pre> - -<p>Gives you this output:</p> - -<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> - -<h3 id="reversed">reversed</h3> - -<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p> - -<pre class="brush: html"><ol start="4" reversed> - <li>Toast pitta, leave to cool, then slice down the edge.</li> - <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> - <li>Wash and chop the salad.</li> - <li>Fill pitta with salad, humous, and fried halloumi.</li> -</ol></pre> - -<p>Gives you this output:</p> - -<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> - -<h3 id="value">value</h3> - -<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p> - -<pre class="brush: html"><ol> - <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> - <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> - <li value="6">Wash and chop the salad.</li> - <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> -</ol></pre> - -<p>Gives you this output:</p> - -<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> - -<div class="note"> -<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p> -</div> - -<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2> - -<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p> - -<ol> - <li>Give the unordered list square bullets.</li> - <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li> - <li>Give the ordered list lower alphabetical bullets.</li> - <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li> -</ol> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>HTML Input</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> - <li>First, light the candle.</li> - <li>Next, open the box.</li> - <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: - <ol> - <li>The book of spells</li> - <li>The shiny rod</li> - <li>The goblin statue</li> - </ol> - </li> -</ul></textarea> - - <h2>CSS Input</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> - - <h2>Output</h2> - <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> - <div class="controls"> - <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> - -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); -var cssInput = document.querySelector(".css-input"); -var reset = document.getElementById("reset"); -var htmlCode = htmlInput.value; -var cssCode = cssInput.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -var styleElem = document.createElement('style'); -var headElem = document.querySelector('head'); -headElem.appendChild(styleElem); - -function drawOutput() { - output.innerHTML = htmlInput.value; - styleElem.textContent = cssInput.value; -} - -reset.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = cssCode; - drawOutput(); -}); - -solution.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; - drawOutput(); -}); - -htmlInput.addEventListener("input", drawOutput); -cssInput.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> - -<h2 id="See_also">See also</h2> - -<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p> - -<ul> - <li>{{cssxref("@counter-style")}}</li> - <li>{{cssxref("counter-increment")}}</li> - <li>{{cssxref("counter-reset")}}</li> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> -</ul> - -<p> </p> diff --git a/files/uk/learn/forms/index.html b/files/uk/learn/forms/index.html deleted file mode 100644 index 9525484787..0000000000 --- a/files/uk/learn/forms/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Веб-форми -slug: Learn/Forms -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Цей модуль містить низку статей, що допоможуть Вам освоїти форми в HTML. HTML форми дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал. В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Перед початком цього модуля Вам необхідно щонайменше пройти <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> - -<div class="note"> -<p><strong>Нотатка</strong>: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Основні_інструкції">Основні інструкції</h2> - -<p>В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.</p> - -<p><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша перша HTML форма</a></p> - -<p>Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS і відправлення даних на сервер.</p> - -<p><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Як структурувати HTML форму</a></p> - -<p>Спираючись на основи, тепер ми більш детально поглянемо на елементи, які використовуються для забезпечення структури і значення різних частин форми.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Рідні віджети форми</a></dt> - <dt></dt> - <dt>Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.</dt> - <dd></dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Надсилання даних форми</a></dt> - <dd>В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? <span id="result_box" lang="uk"><span>Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.</span></span></dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Підтвердження даних форми</a></dt> - <dd>Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.</dd> -</dl> - -<h2 id="Розширені_інструкції">Розширені інструкції</h2> - -<p>Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Як створювати користувацькі віджети форм</a></dt> - <dd>Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Надсилання форми використовуючи JavaScript</a></dt> - <dd>Ця стання покаже Вам шляхиThis article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt> - <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML5_updates">HTML5 form updates</a></dt> - <dd>This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.</dd> -</dl> - -<h2 id="Form_styling_guides">Form styling guides</h2> - -<p>These guides to styling forms with CSS really belong in the <a href="/en-US/docs/Learn/CSS">CSS</a> Learning Area topic, but we are keeping them here for now until we find the time to move them.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt> - <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt> - <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd> - <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt> - <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>TBD</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> -</ul> diff --git a/files/uk/learn/forms/your_first_form/index.html b/files/uk/learn/forms/your_first_form/index.html deleted file mode 100644 index e5be790eff..0000000000 --- a/files/uk/learn/forms/your_first_form/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: Your first form -slug: Learn/Forms/Your_first_form -translation_of: Learn/Forms/Your_first_form -original_slug: Learn/HTML/Forms/Your_first_form ---- -<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> - -<p class="summary">Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Вимоги:</th> - <td>Загальна комп'ютерна грамотність, і базове <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">розуміння HTML</a>.</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках</td> - </tr> - </tbody> -</table> - -<h2 id="Що_таке_інтернет-форми">Що таке інтернет-форми?</h2> - -<p><strong>Web forms</strong> are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a> later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).</p> - -<p>A<strong> </strong>web form's HTML is made up of one or more <strong>form controls</strong> (sometimes called <strong>widgets</strong>), plus some additional elements to help structure the overall form — they are often referred to as <strong>HTML forms</strong>. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.</p> - -<p>Form controls can also be programmed to enforce specific formats or values to be entered (<strong>form validation</strong>), and paired with text labels that describe their purpose to both sighted and blind users.</p> - -<h2 id="Designing_your_form">Designing your form</h2> - -<p>Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.</p> - -<p>Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:</p> - -<ul> - <li>Smashing Magazine has some <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>, including an older but still relevant <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> article.</li> - <li>UXMatters is also a very thoughtful resource with good advice from <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> to complex concerns such as <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> -</ul> - -<p>In this article, we'll build a simple contact form. Let's make a rough sketch.</p> - -<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p> - -<p>Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.</p> - -<h2 id="Active_learning_Implementing_our_form_HTML">Active learning: Implementing our form HTML</h2> - -<p>Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.</p> - -<p>Before you go any further, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a> — you'll enter your form HTML into here.</p> - -<h3 id="The_HTMLelementform_element">The {{HTMLelement("form")}} element</h3> - -<p>All forms start with a {{HTMLelement("form")}} element, like this:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - -</form></pre> - -<p>This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes:</p> - -<ul> - <li>The <code>action</code> attribute defines the location (URL) where the form's collected data should be sent when it is submitted.</li> - <li>The <code>method</code> attribute defines which HTTP method to send the data with (usually <code>get</code> or <code>post</code>).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: We'll look at how those attributes work in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> article later on.</p> -</div> - -<p>For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.</p> - -<h3 id="The_HTMLelementlabel_HTMLelementinput_and_HTMLelementtextarea_elements">The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements</h3> - -<p>Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:</p> - -<ul> - <li>The input field for the name is a {{HTMLelement("input/text", "single-line text field")}}.</li> - <li>The input field for the e-mail is an {{HTMLelement("input/email", "input of type email")}}: a single-line text field that accepts only e-mail addresses.</li> - <li>The input field for the message is a {{HTMLelement("textarea")}}; a multiline text field.</li> -</ul> - -<p>In terms of HTML code we need something like the following to implement these form widgets:</p> - -<pre class="brush:html;" dir="rtl"><form action="/my-handling-form-page" method="post"> - <ul> - <li> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name"> - </li> - <li> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_mail"> - </li> - <li> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </li> - </ul> -</form></pre> - -<p>Update your form code to look like the above.</p> - -<p>The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the<a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a>attribute on all {{HTMLelement("label")}} elements, which takes as its value the <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> of the form control with which it is associated — this is how you associate a form with its label.</p> - -<p>There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in <a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a>.</p> - -<p>On the {{HTMLelement("input")}} element, the most important attribute is the <code>type</code> attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a> article later on.</p> - -<ul> - <li>In our simple example, we use the value {{HTMLelement("input/text")}} for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.</li> - <li>For the second input, we use the value {{HTMLelement("input/email")}}, which defines a single-line text field that only accepts a well-formed e-mail address. This turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. It also causes a more appropriate keyboard layout for entering email addresses (e.g. with an @ symbol by default) to appear on devices with dynamic keyboards, like smartphones. You'll find out more about form validation in the <a href="/en-US/docs/Learn/Forms/Form_validation">client-side form validation</a> article later on.</li> -</ul> - -<p>Last but not least, note the syntax of <code><input></code> vs. <code><textarea></textarea></code>. This is one of the oddities of HTML. The <code><input></code> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed it with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> attribute like this:</p> - -<pre class="brush:html;"><input type="text" value="by default this element is filled with this text"></pre> - -<p>On the other hand, if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:</p> - -<pre class="brush:html;"><textarea> -by default this element is filled with this text -</textarea></pre> - -<h3 id="The_HTMLelementbutton_element">The {{HTMLelement("button")}} element</h3> - -<p>The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing <code></form></code> tag:</p> - -<pre class="brush:html;"><li class="button"> - <button type="submit">Send your message</button> -</li></pre> - -<p>The {{htmlelement("button")}} element also accepts a <code>type</code> attribute — this accepts one of three values: <code>submit</code>, <code>reset</code>, or <code>button</code>.</p> - -<ul> - <li>A click on a <code>submit</code> button (the default value) sends the form's data to the web page defined by the <code>action</code> attribute of the {{HTMLelement("form")}} element.</li> - <li>A click on a <code>reset</code> button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include one.</li> - <li>A click on a <code>button</code> button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with JavaScript.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You can also use the {{HTMLElement("input")}} element with the corresponding <code>type</code> to produce a button, for example <code><input type="submit"></code>. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.</p> -</div> - -<h2 id="Basic_form_styling">Basic form styling</h2> - -<p>Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.</p> - -<div class="note"> -<p><strong>Note</strong>: If you don't think you've got the HTML code right, try comparing it with our finished example — see <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">also see it live</a>).</p> -</div> - -<p>Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.</p> - -<p>First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:</p> - -<pre class="brush: html"><style> - -</style></pre> - -<p>Inside the <code>style</code> tags, add the following CSS:</p> - -<pre class="brush:css;">form { - /* Center the form on the page */ - margin: 0 auto; - width: 400px; - /* Form outline */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; -} - -ul { - list-style: none; - padding: 0; - margin: 0; -} - -form li + li { - margin-top: 1em; -} - -label { - /* Uniform size & alignment */ - display: inline-block; - width: 90px; - text-align: right; -} - -input, -textarea { - /* To make sure that all text fields have the same font settings - By default, textareas have a monospace font */ - font: 1em sans-serif; - - /* Uniform text field size */ - width: 300px; - box-sizing: border-box; - - /* Match form field borders */ - border: 1px solid #999; -} - -input:focus, -textarea:focus { - /* Additional highlight for focused elements */ - border-color: #000; -} - -textarea { - /* Align multiline text fields with their labels */ - vertical-align: top; - - /* Provide space to type some text */ - height: 5em; -} - -.button { - /* Align buttons with the text fields */ - padding-left: 90px; /* same size as the label elements */ -} - -button { - /* This extra margin represent roughly the same space as the space - between the labels and their text fields */ - margin-left: .5em; -}</pre> - -<p>Save and reload, and you'll see that your form should look much less ugly.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find our version on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">also see it live</a>).</p> -</div> - -<h2 id="Sending_form_data_to_your_web_server">Sending form data to your web server</h2> - -<p>The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes.</p> - -<p>We provide a <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a> to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.</p> - -<p>To name the data in a form you need to use the <code>name</code> attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - <ul> - <li> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </li> - <li> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_email" /> - </li> - <li> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </li> - - ... -</pre> - -<p>In our example, the form will send 3 pieces of data named "<code>user_name</code>", "<code>user_email</code>", and "<code>user_message</code>". That data will be sent to the URL "<code>/my-handling-form-page</code>" using the <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> method.</p> - -<p>On the server side, the script at the URL "<code>/my-handling-form-page</code>" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending form data</span></a> article later on.</p> - -<h2 id="Summary">Summary</h2> - -<p>Congratulations, you've built your first web form. It looks like this live:</p> - -<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p> - -<p>That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.</p> - -<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li> - <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li> - <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li> - <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> - <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> - <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li> - <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li> - <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li> - <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> -</ul> - -<h3 id="Advanced_Topics">Advanced Topics</h3> - -<ul> - <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> - <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/uk/learn/front-end_web_developer/index.html b/files/uk/learn/front-end_web_developer/index.html deleted file mode 100644 index 599f33b249..0000000000 --- a/files/uk/learn/front-end_web_developer/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Фронтенд веб-розробник -slug: Learn/Front-end_web_developer -tags: - - CSS - - Front-end - - HTML - - JavaScript - - Web Standarts - - Інструментарій - - Навчання - - Початківець - - Стандарти - - Фронт-енд - - Фронтенд - - інструменти -translation_of: Learn/Front-end_web_developer -original_slug: Learn/Фронт-енд_веб-розробник ---- -<p>{{learnsidebar}}</p> - -<p>Ласкаво просимо до нашого навчального шляху веб-розробника!</p> - -<p>Ми представяємо вам структурований курс, який навчить вас усьому, що вам потрібно знати, аби стати передовим веб-розробником. Просто працюйте над кожним розділом, опановуючи нові або вдосконалюючи існуючі навички, рухаючись далі. Кожен розділ містить практичні завдання та оцінювання, щоб перевірити своє розуміння, перш ніж рухатися вперед.</p> - -<h2 id="Охоплена_тематика">Охоплена тематика</h2> - -<p>Досліджувані теми:</p> - -<ul> - <li>Основні налаштування та як правильно вчитися</li> - <li>Веб-стандарти та найкращі практики (наприклад, доступність та сумісність між браузерами)</li> - <li>HTML. Мова, що надає структуру та зміст веб-контенту</li> - <li>CSS. Мова, що використовується для стилізації веб-сторінок</li> - <li>JavaScript. Мова сценаріїв, що використовується для створення динамічної функціональності в Інтернеті.</li> - <li>Інструменти, які використовуються для сприяння сучасній розробці веб-сторінок на стороні клієнта.</li> -</ul> - -<p>Ви можете працювати з розділами по порядку, проте кожен з них також є самостійним. Наприклад, якщо ви вже знаєте HTML, ви можете перейти до розділу CSS.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Щоб почати цей курс, вам не потрібні попередні знання. Все, що вам потрібно, це комп’ютер, що може працювати із сучасними веб-браузерами, підключення до Інтернету та готовність вчитися.</p> - -<p>Якщо ви не впевнені, що фронтенд веб-розробка вам підходить та/чи ви хочете більш поступове ознайомлення перед початком довгого та повного курсу, спершу опрацюйте наш модуль <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a>.</p> - -<h2 id="Отримання_допомоги">Отримання допомоги</h2> - -<p>Ми намагалися зробити навчання фронт-енд веб-розробці якомога комфортним, але ви, ймовірно, все ж таки десь застрягнете, тому що чогось не розумієте або якийсь код просто не працює.</p> - -<p>Не панікуйте. Ми всі застрягаємо, не зважаючи на те - ми початківці чи ми професійні веб-розробники. Стаття <a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> пропонує вам низку порад щодо пошуку інформації та надання допомоги самому собі. Якщо ви все ще не зрушили з мертвої точки, сміливо розміщуйте питання на нашому <a href="https://discourse.mozilla.org/c/mdn/learn/">Дискурсному форумі</a>.</p> - -<p>Нумо починати. Щасти!</p> - -<h2 id="Шлях_навчання">Шлях навчання</h2> - -<h3 id="Початок">Початок</h3> - -<p>Час на виконання: 1,5–2 години</p> - -<h4 id="Передумови_2">Передумови</h4> - -<p>Нічого, крім базової комп'ютерної грамотності.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>В цій частині курсу немає оцінювання, проте не пропускайте її. Важливо, щоб ви налаштувались і були готові виконувати практичні завдання пізніше в процесі.</p> - -<h4 id="Посібники">Посібники</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> — базове налаштування інструментів (15 хвилин читання)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a> (45 хвилин читання)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> (45 хвилин читання)</li> -</ul> - -<h3 id="Семантика_та_структура_за_допомогою_HTML">Семантика та структура за допомогою HTML</h3> - -<p>Час на виконання: 35–50 годин</p> - -<h4 id="Передумови_3">Передумови</h4> - -<p>Нічого, крім базової комп'ютерної грамотності та базового середовища для веб-розробки.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_2">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p> - -<h4 id="Модулі">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> (15–20 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a> (15–20 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Tables">HTML-таблиці</a> (5-10 годин читання/виконання практичних завдань)</li> -</ul> - -<h3 id="Стилізація_та_розмітка_за_допомогою_CSS">Стилізація та розмітка за допомогою CSS</h3> - -<p>Час на виконання: 90–120 гоодин</p> - -<h4 id="Передумови_4">Передумови</h4> - -<p>Перед початком вивчення CSS рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_3">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p> - -<h4 id="Модулі_2">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/First_steps">Перші кроки у CSS</a> (10–15 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Building_blocks">Будівельні блоки CSS</a> (35–45 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Styling_text">Стилізація тексту</a> (15–20 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/CSS_%D1%80%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0">CSS розмітка</a> (30–40 годин читання/виконання практичних завдань)</li> -</ul> - -<h4 id="Додаткові_ресурси">Додаткові ресурси</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/CSS/%D0%A0%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0_%D0%BA%D1%83%D0%BB%D1%96%D0%BD%D0%B0%D1%80%D0%BD%D0%B0-%D0%BA%D0%BD%D0%B8%D0%B3%D0%B0">Кулінарна книга з CSS розмітки</a></li> -</ul> - -<h3 id="Інтерактивність_за_допомогою_JavaScript">Інтерактивність за допомогою JavaScript</h3> - -<p>Час на виконання: 135–185 годин</p> - -<h4 id="Передумови_5">Передумови</h4> - -<p>Перед початком вивчення JavaScript рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_4">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p> - -<h4 id="Модулі_3">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/First_steps">Перші кроки у JavaScript</a> (30–40 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%91%D1%83%D0%B4%D1%96%D0%B2%D0%B5%D0%BB%D1%8C%D0%BD%D1%96_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8">Будівельні блоки JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Client-side_web_APIs">Веб-APIs на стороні клієнта</a> (30–40 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%B8%D0%B9">Асинхронний JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li> -</ul> - -<h3 id="Веб-форми_—_Робота_з_даними_користувача">Веб-форми — Робота з даними користувача</h3> - -<p>Час на виконання: 40–50 годин</p> - -<h4 id="Передумови_6">Передумови</h4> - -<p>Вивчення форм вимагає знання з HTML, CSS та JavaScript. Враховуючи складність роботи з формами, це спеціальна тема.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_5">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p> - -<h4 id="Модулі_4">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Forms">Веб-форми</a> (40–50 годин)</li> -</ul> - -<h3 id="Роблячи_Інтернет_доступним_для_кожного">Роблячи Інтернет доступним для кожного</h3> - -<p>Час на виконання: 60–75 годин</p> - -<h4 id="Передумови_7">Передумови</h4> - -<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript. Багато методів та найкращих практик стосуються декількох технологій.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_6">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p> - -<h4 id="Модулі_5">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A2%D0%B5%D1%81%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BA%D1%80%D0%BE%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%96">Тестування кросбраузерності</a> (25–30 годин читання/виконання практичних завдань)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C">Доступність</a> (20–25 годин читання/виконання практичних завдань)</li> -</ul> - -<h3 id="Сучасний_інструментарій">Сучасний інструментарій</h3> - -<p>Час на виконання: 55–90 годин</p> - -<h4 id="Передумови_8">Передумови</h4> - -<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript, оскільки інструменти, що тут обговорюються, працюють вкупі із багатьма з цих технологій.</p> - -<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_7">Як мені дізнатися, що я можу рухатися далі?</h4> - -<p>У цьому наборі модулів немає конкретних статей з оцінюванням. Навчальні посібники з прикладами в кінці другого та третього модулів готують вас до розуміння основ сучасного інструментарію.</p> - -<h4 id="Модулі_6">Модулі</h4> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/Git_%D1%82%D0%B0_GitHub">Git та GitHub</a> (5 годин читання)</li> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_%D1%96%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2_%D0%B2%D0%B5%D0%B1-%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння інструментів веб-розробки на стороні клієнта</a> (20–25 годин читання)</li> - <li> - <p><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_JavaScript-%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D1%96%D0%B2_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння JavaScript-фреймворків на стороні клієнта</a> (30-60 годин читання/виконання практичних завдань)</p> - </li> -</ul> diff --git a/files/uk/learn/getting_started_with_the_web/css_basics/index.html b/files/uk/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index 61069ad322..0000000000 --- a/files/uk/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: Основи CSS -slug: Learn/Getting_started_with_the_web/CSS_basics -tags: - - CSS - - Веб - - Навчання - - Початківцям - - Стилізація -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код, що використовується для стилізації сайту. В <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основах CSS</a> надається інформація про стилізацію для початківців. Ми відповімо на такі питання: яким чином зробити текст чорним або червоним? Як розмістити контент саме у тому місці, де ми хочемо його бачити на сторінці? Як задавати фонові кольори та зображення?</p> -</div> - -<h2 id="Що_таке_CSS_насправді">Що таке CSS насправді?</h2> - -<p>Як і HTML, CSS не є справжньою мовою програмування. Це лише <em>мова таблиць стилів</em>, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати <strong>усі</strong> параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:</p> - -<pre class="brush: css">p { - color: red; -}</pre> - -<p>Давайте спробуємо: вставте ці три рядки CSS у новий файл у вашому редакторі коду, та збережіть файл як <code>style.css</code> у вашій теці <code>styles</code>.</p> - -<p>Окрім того, нам необхідно приєднати CSS до вашого HTML документу, інакше стилі CSS не вплинуть на те, як браузер відобразить HTML документ. (Якщо ви щойно приєдналися до нашого проекту, прочитайте <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Роботу з файлами</a> та <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML </a>щоб дізнатися, що необхідно зробити на початку.) Відкрийте ваш файл <code style="font-style: normal; font-weight: normal;">index.html</code> та вставте наступний рядок кудись у head, між тегами <code style="font-style: normal; font-weight: normal;"><head></code> і <code style="font-style: normal; font-weight: normal;"></head></code>:</p> - -<ol> - <li> - <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> - </li> - <li>Збережіть <code>index.html</code> та відкрийте його у вашому браузері. Ви побачите щось на зразок наведеного зображення:</li> -</ol> - -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Якщо текст ваших параграфів став червоним, вітаємо! Ви щойно написали ваш перший CSS!</p> - -<h3 id="Анатомія_правила_CSS">Анатомія правила CSS</h3> - -<p>Подивимось на попередній CSS більш детально:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> - -<p>Вся структура називається "<strong>rule set" — "набір правил" </strong>(частіше, скорочено, "правило"). Його частини також мають свої назви:</p> - -<dl> - <dt>Selector — Селектор</dt> - <dd>Назва елементу HTML на початку правила. Селектор вибирає елемент чи елементи, які будуть стилізовані (у нашому випадку, елементи p). Для стилізації інших елементів просто змініть селектор.</dd> - <dt>Declaration — Визначення (декларація)</dt> - <dd>Одне правило на зразок <code>color: red;</code> вказує, яку властивість елементу ви бажаєте стилізувати.</dd> - <dt>Properties — Властивості</dt> - <dd>Шляхи, якими ви можете стилізувати даний HTML елемент. (У цьому випадку, <code>color </code>— це властивість елементів <code>p</code>). У CSS ви обираєте властивості, які хочете змінити у вашому правилі.</dd> - <dt>Property value — Значення властивості</dt> - <dd>Праворуч від властивості, після двокрапки, ми вказуємо <strong>значення властивості, </strong>обираючи з багатьох можливих значень для наданої властивості (є багато інших значень властивості <code>color</code> окрім <code>red</code>).</dd> -</dl> - -<p>Зверніть увагу на інші важливі частини синтаксису:</p> - -<ul> - <li>Кожен набір правил (окрім селектора) повинен бути оточений фігурними дужками (<code>{}</code>).</li> - <li>У кожному визначенні використовується двокрапка для відокремлення властивостей від їх значення.</li> - <li>У кожному наборі правил використовується крапка з комою для відокремлення декларацій від наступних.</li> -</ul> - -<p>Отже, для того, щоб змінити декілька значень властивостей одночасно, їх достатньо записати, розділяючи крапкою з комою, наприклад:</p> - -<pre class="brush: css">p { - color: red; - width: 500px; - border: 1px solid black; -}</pre> - -<h3 id="Вибір_багатьох_елементів_одночасно">Вибір багатьох елементів одночасно</h3> - -<p>Ви також можете вибрати декілька типів елементів та застосувати один набір правил для них усіх. Додайте декілька селекторів, розділяючи їх комою, наприклад:</p> - -<pre class="brush: css">p,li,h1 { - color: red; -}</pre> - -<h3 id="Різні_типи_селекторів">Різні типи селекторів</h3> - -<p>Є велика кількість різних типів селекторів. Вище ми розглянули лише <strong>селектори елементів</strong>, які вибирають всі елементи заданого типу у наданих HTML документах. Але ми можемо застосовувати більш специфічні селектори. Подивіться на найбільш розповсюджені типи селекторів:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Назва селектору</th> - <th scope="col">Що він вибирає</th> - <th scope="col">Приклад</th> - </tr> - </thead> - <tbody> - <tr> - <td>Селектор елементу (іноді називають селектором тегу)</td> - <td>Всі HTML елементи даного типу</td> - <td><code>p</code><br> - Вибирає <code><p></code></td> - </tr> - <tr> - <td>Селектор по ID</td> - <td>Елемент на сторінці, який має заданий ID (на HTML сторінці не може бути декілька елементів з однаковими ID).</td> - <td><code>#my-id</code><br> - Вибирає <code><p id="my-id"></code> чи <code><a id="my-id"></code></td> - </tr> - <tr> - <td>Селектор по класу</td> - <td>Елементи на сторінці, які мають задані класи (на сторінці можуть бути елементи з однаковими класами).</td> - <td><code>.my-class</code><br> - Вибирає <code><p class="my-class"></code> та <code><a class="my-class"></code></td> - </tr> - <tr> - <td>Селектор по атрибуту</td> - <td>Елементи на сторінці із вказаним атрибутом</td> - <td><code>img[src]</code><br> - Вибирає <code><img src="myimage.png"></code> але не <code><img></code></td> - </tr> - <tr> - <td>Селектори псевдокласів</td> - <td>Вказані елементи, але тільки тоді, коли вони знаходяться у вказаному стані, наприклад, коли на них наводять курсор миші.</td> - <td><code>a:hover</code><br> - Вибирає <code><a></code>, але тільки коли курсор миші вказує на посилання.</td> - </tr> - </tbody> -</table> - -<p>Інші селектори ви можете побачити на сторінці <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p> - -<h2 id="Шрифти_та_текст">Шрифти та текст</h2> - -<p>Дослідивши деякі основи CSS, давайте додамо більше правил та інформації в файл <code>style.css,</code> щоб зробити наш приклад більш привабливим. Для початку покращимо вигляд наших шрифтів та тексту.</p> - -<ol> - <li>В першу чергу, знайдіть збережений вами <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">вивід з сайту Google Fonts</a>, який ви зберегли раніше. Додайте елемент <code><link ... ></code> у head файлу <code>index.html</code> (будь-куди між тегами <code><head></code> та <code></head></code>). Елемент буде виглядати приблизно так: - - <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> - </li> - <li>Видаліть правило, яке зараз знаходиться у вашому файлі <code>style.css</code>. Це був гарний приклад, але червоний текст виглядає не дуже гарно.</li> - <li>Додайте наступні строки до вашого файлу стилей, замінивши placeholder на рядок <code>font-family</code>, який ви отримали з сайту Google Fonts. (<code>font-family</code> означає шрифти, які ви застосуєте для вашого тексту). Це правило встановить глобальний базовий шрифт і його розмір для всієї сторінки (так як <code><html></code> — це батьківський елемент всієї сторінки, всі елементи у ньому успадкують однаковий <code>font-size та</code> <code>font-family</code>): - <pre class="brush: css">html { - font-size: 10px; /* px означає 'пікселі': базовий розмір шрифта встановлюється рівним 10 пікселів заввишки */ - font-family: placeholder: замініть цей плейсхолдер на строку із сайту Google fonts -}</pre> - - <div class="note"> - <p><strong>Примітка</strong>: Я додав коментар із поясненням, що означає "px". Все у CSS документі, що знаходиться між <code>/*</code> та <code>*/</code> — це <strong>коментар CSS</strong>, який ігнорується браузером. Коментарі застосовують для приміток та пояснень, що допоможуть вам в роботі.</p> - </div> - </li> - <li>Встановимо розміри шрифта для елементів, що містять у собі текст всередині HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, та {{htmlelement("p")}}). Також відцентруємо текст нашого заголовку та встановимо висоту строки і проміжок між літерами нашого контенту, щоб зробити його зручнішим для читання. - <pre class="brush: css">h1 { - font-size: 60px; - text-align: center; -} - -p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; -}</pre> - </li> -</ol> - -<p>Ви можете змінювати числа як завгодно, щоб ваш дизайн виглядав так, як ви хочете. Загалом він буде виглядати так:</p> - -<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> - -<h2 id="Блоки_блоки_і_ще_раз_про_блоки">Блоки, блоки, і ще раз про блоки</h2> - -<p><span id="result_box" lang="uk"><span>Одна річ, яку ви помітите при написанні CSS, полягає в тому, що багато використовуються блоки - встановлення їх розміру, кольору, позиції тощо. Більшість HTML-елементів на вашій сторінці можуть розглядатися як блоки, які розташовані один на одному.</span></span></p> - -<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> - -<p><span id="result_box" lang="uk"><span>Не дивно, що макет CSS заснований переважно на блочній моделі </span></span> <em>(box model)</em><span lang="uk"><span>.</span> <span>Кожен із блоків, що займає простір на вашій сторінці, має такі властивості</span></span>:</p> - -<ul> - <li><code>padding</code>, простір лише навколо контенту (наприклад, навколо параграфу тексту)</li> - <li><code>border</code>, суцільна лінія (межа), яка розташована ззовні від padding</li> - <li><code>margin</code>, простір навколо зовнішнього елемента</li> -</ul> - -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> - -<p>В цьому розділі ми також використовуємо:</p> - -<ul> - <li><code>width</code> (ширина елемента)</li> - <li><code>background-color</code>, колір за контентом і padding елемента</li> - <li><code>color</code>, колір змісту елементу (зазвичай тексту)</li> - <li><code>text-shadow</code>: встановлює тінь на тексті в середині елемента</li> - <li><code>display</code>: встановлює режим відображення елемента (не хвилюйтесь про це покищо)</li> -</ul> - -<p><span id="result_box" lang="uk"><span>Отже, давайте почнемо та додамо ще кілька CSS на нашу сторінку!</span> <span>Додайте ці нові правила до нижньої частини сторінки, і не бійтеся експериментувати зі зміною значень, щоб побачити, як це працює.</span></span></p> - -<h3 id="Зміна_кольору_сторінки"><span class="short_text" id="result_box" lang="uk"><span>Зміна кольору сторінки</span></span></h3> - -<pre class="brush: css">html { - background-color: #00539F; -}</pre> - -<p><span id="result_box" lang="uk"><span>Це правило встановлює фоновий колір для всієї сторінки</span></span> . Змініть код кольору на будь-який інший, <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">що ви обрали при плануванні свого сайту</a>.</p> - -<h3 id="Задання_стилів_для_body">Задання стилів для body</h3> - -<pre class="brush: css">body { - width: 600px; - margin: 0 auto; - background-color: #FF9500; - padding: 0 20px 20px 20px; - border: 5px solid black; -}</pre> - -<p>Тепер стилі для елемента <code>body</code>. Тут багато параметрів, тому давайте розглянемо по-одному:</p> - -<ul> - <li><code>width: 600px;</code> — цей параметр робить body шириною завжди 600 пікселів.</li> - <li><code>margin: 0 auto;</code> — Коли ви встановлюєте два значення у властивостях <code>margin</code> або <code>padding</code>, перше значення впливає на верхню <strong>та</strong> нижню сторони елемента (зроблено <code>0</code> в даному випадку), та друге значення лівої <strong>та</strong> правої сторони (тут <code>auto</code> - <span id="result_box" lang="uk"><span>це спеціальне значення, яке рівномірно розподіляє доступний горизонтальний простір між лівою і правою стороною</span></span>). Ви можете також використовувати один, три або чотири значення, як задокументовано <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">тут</a>.</li> - <li><code>background-color: #FF9500;</code> — <span id="result_box" lang="uk"><span>як і раніше, це встановлює фоновий колір елемента</span></span>. <span id="result_box" lang="uk"><span>Ми використали якийсь червоно-оранжевий для body, а не синій для елемента {{htmlelement ("html")}}, але не бійтеся експериментувати, підставляючи інші кольори.</span></span></li> - <li><code>padding: 0 20px 20px 20px;</code> — <span id="result_box" lang="uk"><span>ми маємо чотири значення, встановлені для padding, щоб зробити трохи простору навколо нашого вмісту.</span> <span>Цього разу ми не встановлюємо padding зверху від body (значення 0px), а встановлюємо 20 пікселів ліворуч, знизу та праворуч.</span> <span>Значення встановлено в такому порядку: вгорі, праворуч, внизу та ліворуч.</span></span></li> - <li><code>border: 5px solid black;</code> — встановлює безперервну чорну рамку border товщиною 5 пікселів з усіх боків body.</li> -</ul> - -<h3 id="Позиціонування_та_стиль_заголовка_головної_сторінки"><span id="result_box" lang="uk"><span>Позиціонування та стиль заголовка головної сторінки</span></span></h3> - -<pre class="brush: css">h1 { - margin: 0; - padding: 20px 0; - color: #00539F; - text-shadow: 3px 3px 1px black; -}</pre> - -<p><span id="result_box" lang="uk"><span>Ви, мабуть, помітили, що у верхній частині body є чималенький розрив</span></span>. <span id="result_box" lang="uk"><span>Це відбувається тому, що браузери застосовують деякий <strong>стиль за умовчанням</strong> до елемента</span></span> {{htmlelement("h1")}} (серед інших), <span id="result_box" lang="uk"><span>навіть якщо ви не застосували жодного CSS!</span> </span>Це може здаватись поганою ідеєю, але ми хочемо, щоб <span id="result_box" lang="uk"><span>навіть незавершена веб-сторінка мала базову читабельність.</span> <span>Щоб позбутися розриву, ми перекриваємо стандартний <strong>стиль за замовчуванням</strong>, встановлюючи</span></span> <code>margin: 0;</code>.</p> - -<p><span id="result_box" lang="uk"><span>Далі ми встановили верхній та нижній відступи (padding) заголовку до 20 пікселів і зробили заголовок текстом того ж кольору, що і колір фону (background) всієї сторінки html</span></span>.</p> - -<p><span id="result_box" lang="uk"><span>Одна досить цікава властивість, яку ми використовували тут,</span></span> це - <code>text-shadow</code>, <span id="result_box" lang="uk"><span>яка застосовує текстову тінь до текстового вмісту елемента.</span> <span>Її чотири значення означають наступне</span></span>:</p> - -<ul> - <li><span id="result_box" lang="uk"><span>Перше значення пікселя встановлює <strong>горизонтальне зміщення</strong> тіні від тексту - як далеко вона рухається: негативне значення має перемістити тінь вліво</span></span>.</li> - <li><span id="result_box" lang="uk"><span>Друге значення пікселя встановлює <strong>вертикальне зміщення</strong> тіні від тексту - як далеко вона рухається в такому випадку;</span> <span>негативне значення має рухати тінь вгору</span></span>.</li> - <li><span id="result_box" lang="uk"><span>Третє значення пікселя встановлює <strong>радіус розмивання</strong> тіні - більша величина означатиме більш розмиту тінь</span></span>.</li> - <li><span class="short_text" id="result_box" lang="uk"><span>Четверте значення встановлює базовий колір тіні</span></span>.</li> -</ul> - -<p><span id="result_box" lang="uk"><span>Знову ж таки, спробуйте експериментувати з різними значеннями, щоб побачити, що ви можете придумати</span></span>.</p> - -<h3 id="Центрування_зображення"><span class="short_text" id="result_box" lang="uk"><span>Центрування зображення</span></span></h3> - -<pre class="brush: css">img { - display: block; - margin: 0 auto; -}</pre> - -<p>Нарешті, ми будемо центрувати зображення, щоб воно виглядало краще. Ми могли б використати <code>margin: 0 auto</code> як і раніше для body, але ми також можемо зробити дещо інше. Елемент body є <strong>блочним рівнем</strong>, <span id="result_box" lang="uk"><span>тобто він займає місце на сторінці, і до нього можуть бути додані поля та інші значення відступів</span></span>. <span id="result_box" lang="uk"><span>Зображення, з іншого боку, є <strong>вбудованими елементами (inline)</strong>, тобто вони не можуть мати відступів.</span> <span>Таким чином, щоб застосувати поля до зображення, ми повинні надати поведінку блочного рівня зображенню за допомогою</span></span> <code>display: block;</code>.</p> - -<div class="note"> -<p><strong>Примітка</strong>: Не хвилюйтесь, якщо ще не зрозуміли <code>display: block;</code> <span id="result_box" lang="uk"><span>і відміну між блочним рівнем / вбудованим (inline) елементом.</span> Далі в<span>и будете вивчати CSS більш глибоко.</span> <span>Ви можете дізнатись більше про різні доступні значення відображення на нашому сайті</span></span> <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p> -</div> - -<h2 id="Висновок">Висновок</h2> - -<p><span id="result_box" lang="uk"><span>Якщо ви дотримувалися всіх інструкцій у цій статті, ви повинні отримати сторінку, яка виглядає приблизно так</span></span> (ви можете також <a href="http://mdn.github.io/beginner-html-site-styled/">переглянути нашу версію тут</a>):</p> - -<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> - -<p>Якщо ви застрягли, ви можете завжди порівняти свою роботу з нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">закінченим прикладом коду на Github</a>.</p> - -<p>Тут ми, дійсно, лише зачепили поверхневі знання із CSS. <span id="result_box" lang="uk"><span>Щоб дізнатись більше, перейдіть до </span></span><a href="https://developer.mozilla.org/en-US/Learn/CSS">Вивчення теми CSS</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 1cd1fa24d6..0000000000 --- a/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Робота з файлами -slug: Learn/Getting_started_with_the_web/Dealing_with_files -tags: - - HTML - - Веб-сайт - - Початківцям - - Теорія - - Файли -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Веб-сайт складається з багатьох файлів: текстового наповнення, коду, стилів, медіаконтенту тощо. Коли ви будуєте веб-сайт, ви маєте поєднати ці файли у єдину змістову структуру на своєму локальному комп'ютері, переконатися, що всі файли можуть "спілкуватися" один з одним і правильно відображати весь контент, до того, як ви <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">завантажите їх на сервер</a>. У статті <em>Робота з файлами </em>ми розглядаємо кілька питань, які допоможуть правильно налаштувати структуру файлів для вашого сайту. </p> -</div> - -<h2 id="Де_саме_має_зберігатися_сайт_на_вашому_комп'ютері">Де саме має зберігатися сайт на вашому комп'ютері?</h2> - -<p>Коли ви працюєте над своїм сайтом локально на комп'ютері, вам слід зберігати всі файли сайту в одній папці, структура якої має повністю відповідати структурі папки живого сайту, яка зберігається на сервері. Ваша локальна папка може зберігатися де завгодно, але найкраще тримати її там, де ви зможете її легко знайти, наприклад, на робочому столі чи в корені диска. </p> - -<ol> - <li>Виберіть місце для зберігання ваший веб-сайтів. Створіть нову папку і назвіть її <code>web-projects</code> (або схожим чином). У цій папці житимуть всі ваші веб-проекти. </li> - <li>Всередині папки, створіть ще одну папку для вашого першого веб-сайту. Назвіть її <code>test-site</code> (або більш вигадливо).</li> -</ol> - -<h2 id="Примітка_про_великі_й_малі_літери_і_пробіли">Примітка про великі й малі літери і пробіли</h2> - -<p>Читаючи цю статтю, ви помітите, що ми просимо вас називати папки і файли малими літерами і без пробілів. Це тому що:</p> - -<ol> - <li>Багато комп'ютерів, особливо веб-серверів, є чутливими до регістрів літер. Наприклад, якщо ви покладете зображення <code>MyImage.jpg </code>у ваш веб-проект <code>test-site</code>, а потім у якомусь файлі спробуєте вставити це зображення, вказавши шлях як <code>test-site/myimage.jpg</code>, це може не спрацювати.</li> - <li>Браузери, веб-сервери і мови програмування не завжди правильно опрацьовують пробіли. Наприклад, якщо ви використовуєте пробіли в назві файлу, деякі системи можуть вважати, що це дві окремі назви файлів. Деякі сервери замінять пробіли в назві файлів символом "%20" (код символу пробіл в URI), поламаючи при цьому ваші посилання. Краще розділяти слова дефісом, ніж нижнім підкресленням: <code>my-file.html</code> замість <code>my_file.html</code>.</li> -</ol> - -<p>Коротко кажучи, вам слід використовувати дефіс у назвах файлів. Google розуміє дефіс як спосіб розділення слів, але на нижнє підкреслення це не поширюється. З цих міркувань, найкраще звикати до написання назв папок і файлів малими літерами без пробілів, розділяючи слова дефісом, принаймні допоки у вас немає достатніх знань. Так ви матимете менше проблем згодом. </p> - -<h2 id="Яку_структуру_вибрати_для_вашого_сайту">Яку структуру вибрати для вашого сайту?</h2> - -<p>Давайте поглянемо, яку структуру повинен мати ваш сайт. Найбільш поширені компоненти, які мають практично всі проекти, які ми створюємо, — це HTML-файл з назвою index, а також кілька папок: із зображеннями, стилями і скриптами. Давайте створимо їх зараз:</p> - -<ol> - <li><code><strong>index.html</strong></code>: цей файл буде містити практично весь контент вашої головної сторінки — текст і зображення, які користувачі бачать, коли відвідують ваш сайт. У своєму текстовому редакторі створіть файл з назвою <code>index.html</code> і збережіть його в папці <code>test-site.</code></li> - <li><strong>Папка <code>images</code></strong>: у цій папці будуть зібрані всі зображення, які ви будете використовувати на сайті. Створіть папку з назвою <code>images</code> всередині папки <code>test-site</code>.</li> - <li><strong>Папка <code>styles</code></strong>: у цій папці зберігатимуться всі CSS-файли зі стилями, якими ви будете змінювати зовнішній вигляд вашого контенту (наприклад, шрифт тексту чи колір бекграунду). Створіть папку <code>styles<font face="Open Sans, arial, x-locale-body, sans-serif"> </font></code><font face="Open Sans, arial, x-locale-body, sans-serif">всередині папки </font><code>test-site</code>.</li> - <li><strong>Папка <code>scripts</code></strong>: у цій папці будуть зберігатися всі файли з JavaScript-кодом, яким ви додасте інтерактивності вашому сайту (наприклад, щоб кнопки при кліку відображали якісь дані). Створіть папку <code>scripts<font face="Open Sans, arial, x-locale-body, sans-serif"> </font></code><font face="Open Sans, arial, x-locale-body, sans-serif">всередині папки </font><code>test-site</code>.</li> -</ol> - -<div class="note"> -<p><strong>Примітка</strong>: на комп'ютерах Windows ви не завжди можете бачити повну назву файлу із розширенням, оскільки Windows за замовчанням приховує розширення файлів. Ви можете змінити налаштування так: у File Explorer вибрати вкладку View і поставити "галочку" в пункті File name extensions. Більш детальну інформацію про те, як змінити налаштування на вашій версії Windows, можна легко знайти в інтернеті.</p> -</div> - -<h2 id="Шляхи_файлів">Шляхи файлів</h2> - -<p>Щоб змусити файли "спілкуватися" між собою, ви маєте вказати їм шлях один до одного — по суті, маршрут, за яким один файл буде знати, де лежить інший файл. Щоб показати, як це працює, ми додамо трохи HTML у наш файл <code>index.html</code>, щоб вкласти на сторінку зображення, яке ви вибрали в статті <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?"</a>.</p> - -<ol> - <li>Скопіюйте вибране раніше зображення в папку <code>images</code>.</li> - <li>Відкрийте файл <code>index.html</code> і вставте туди цей код, точно так, як він поданий тут. Поки що не переймайтеся, що він означає, — пізніше ми розглянемо його в деталях. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <img src="" alt="My test image"> - </body> -</html> </pre> - </li> - <li>Рядок <code><img src="" alt="My test image"></code> є кодом HTML, який вставить зображення на нашу сторінку. Ми маємо сказати цьому коду, де саме шукати картинку, тобто вказати шлях файлу. Наше зображення зберігається в папці <code>images</code>, яка, в свою чергу, зберігається на тому ж рівні (в тій самій директорії), що і файл <code>index.html</code>. Щоб файл <code>index.html</code> зміг дістатися до нашого зображення, нам потрібно спочатку вказати назву папки із зображеннями, а потім ім'я конкретного зображення, отак: <code>images/ім'я-вашого-файлу</code>. Наприклад, якщо наше зображення називається <code>firefox-icon.png</code>, то наш шлях виглядатиме так: <code>images/firefox-icon.png</code>.</li> - <li>Вставте цей шлях у ваш код HTML між лапками коду <code>src=""</code>.</li> - <li>Збережіть файл HTML, потім відкрийте його в браузері (подвійний клік на файлі). Ви маєте побачити вашу нову веб-сторінку із зображенням! </li> -</ol> - -<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> - -<p>Загальні правила шляху файлу:</p> - -<ul> - <li>Якщо файл, який приєднується, зберігається у тій самій директорії (на тому ж рівні), що і файл, до якого приєднується, то у шляху можна вказати лише назву приєднуваного файла, наприклад, <code>src="my-image.jpg"</code>.</li> - <li>Якщо файл, який приєднується, лежить у піддиректорії (рівнем нижче), ніж файл, до якого приєднується, спочатку вкажіть ім'я піддиректорії, потім скісну риску, потім назву приєднуваного файлу, наприклад, <code>src="subdirectory/my-image.jpg"</code>.</li> - <li>Якщо файл, який приєднується, лежить в директорії вище (рівнем вище), ніж файл, до якого приєднується, додайте на початку шляху дві крапки. Наприклад, якщо файл <code>index.html</code> лежав би в підпапці основної папки <code>test-site</code>, а <code>my-image.jpg</code> лежав би в корені основної папки <code>test-site</code>, то шлях до <code>my-image.jpg</code> з файлу <code>index.html</code> був би <code>src="../my-image.jpg"</code>.</li> - <li>Шлях до файлу, який приєднується, може бути складним і поєднувати директорії різних рівнів, наприклад: <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> -</ul> - -<p>Поки що це все, що вам потрібно знати.</p> - -<div class="note"> -<p><strong>Примітка</strong>: файлова система Windows у своїх шляхах зазвичай використовує обернену скісну риску замість звичайної, наприклад, <code>C:\windows</code>. На ваш код HTML це не впливає— навіть якщо ви пишете сайт на Windows, вам все одно слід використовувати звичайну скісну риску. </p> -</div> - -<h2 id="Що_ще_потрібно_зробити">Що ще потрібно зробити?</h2> - -<p>Поки що це все. Структура вашої папки має виглядати приблизно так: </p> - -<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index d736cf3913..0000000000 --- a/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Як працює мережа -slug: Learn/Getting_started_with_the_web/How_the_Web_works -tags: - - IP-адреса - - Клієнт - - Початківцям - - Сервер - - протокол -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Стаття <em>Як працює мережа</em> спрощено пояснює, що саме відбувається, коли ви переглядаєте веб-сторінку у браузері на комп'ютері чи телефоні. </p> -</div> - -<p>Ця теорія не є обов'язковою на початку веб-розробки, але чим далі ви просуватиметеся, тим більш очевидними будуть переваги розуміння того, що саме відбувається за лаштунками. </p> - -<h2 id="Клієнти_та_сервери">Клієнти та сервери</h2> - -<p>Комп'ютери, приєднані до мережі, називаються <strong>клієнтами</strong> та <strong>серверами</strong>. Цей малюнок спрощено показує, як відбувається їхня взаємодія: </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> - -<ul> - <li>Клієнти — це звичайні користувацькі комп'ютери, під'єднані до інтернету (наприклад, ваш комп'ютер, під'єднаний до Wi-Fi, або ваш телефон, під'єднаний до мобільної мережі) і програмне забезпечення на цих комп'ютерах з веб-доступом (зазвичай, це браузери, такі як Firefox чи Chrome).</li> - <li>Сервери — це комп'ютери, які зберігають веб-сторінки, сайти чи додатки. Коли клієнт хочу отримати доступ до веб-сторінки, копія цієї сторінки завантажується із сервера на клієнт і відображається у веб-браузері клієнта. </li> -</ul> - -<h2 id="Інші_гравці_на_полі">Інші гравці на полі</h2> - -<p>Клієнт та сервер, про які йшлося вище, не єдині учасники процесу. Існує багато інших складових, про які ми зараз розкажемо. </p> - -<p>Для початку, уявимо мережу як дорогу. На одному кінці дороги — ваш будинок. Це наш клієнт. На протилежному кінці дороги — крамниця, у якій ви хочете щось придбати. Це наш сервер. </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> - -<p>На додачу до сервера і клієнта, ми також маємо: </p> - -<ul> - <li><strong>Ваше інтернет-з'єднання: </strong>дозволяє вам відсилати і отримувати дані в мережі. Це як вулиця між вашим будинком і магазином. </li> - <li><strong>TCP/IP</strong>: Transmission Control Protocol (протокол керування передачею) і Internet Protocol (інтернет-протокол) — комунікаційні протоколи, які визначають, як саме дані мають передаватися в мережі. Це як спосіб пересування, який дозволяє вам дістатися до магазину і купити товар. У нашому випадку, це як машина чи велосипед, чи будь-який інший спосіб пересування. </li> - <li><strong>DNS</strong>: Domain Name Servers (DNS-сервер) — це як адресний довідник для веб-сайтів. Коли ви вписуєте адресу веб-сторінки в браузер, браузер спочатку шукає її в DNS. Браузеру потрібно з'ясувати, на якому сервері живе потрібний вам сайт, щоб правильно надіслати HTTP-повідомлення (див. нижче). У нашому прикладі, це як подивитися в довіднику адресу магазину. </li> - <li><strong>HTTP</strong>: Hypertext Transfer Protocol — це протокол передачі даних ({{Glossary("Protocol" , "protocol")}}), що визначає мову, якою будуть спілкуватися клієнт і сервер. У нашому випадку, це мова, якою ви замовляєте своє товари. </li> - <li><strong>Складові файли</strong>: веб-сайт складається з багатьох різних файлів. У нашому прикладі, це як різні частини товарів, які ви купуєте в магазині. Ці файли бувають двох типів: - <ul> - <li><strong>Файли коду</strong>: веб-сайти зазвичай складаються з кодів HTML, CSS і JavaScript (пізніше ви познайомитеся з іншими технологіями).</li> - <li><strong>Матеріали</strong>: це загальна назва для всіх інших складових сайту, наприклад, зображення, музика, відео, документи Word чи PDF.</li> - </ul> - </li> -</ul> - -<h2 id="То_що_власне_відбувається">То що, власне, відбувається?</h2> - -<p>Коли ви вписуєте адресу в браузер, то:</p> - -<ol> - <li>Браузер іде на DNS-сервер і знаходить там справжню адресу серверу, на якому зберігається потрібний вам сайт (ви знаходите адресу магазину).</li> - <li>Браузер надсилає HTTP-запит до сервера з проханням вислати копію сайту на клієнт (ви йдете в магазин і замовляєте товар). Цей запит і всі інші дані, які пересилаються між клієнтом і сервером, передаються в мережі за допомогою TCP/IP.</li> - <li>Якщо сервер вирішує задовольнити запит, він відсилає клієнту повідомлення "200 OK", що означає "Звісно, ви можете подивитися цей веб-сайт! Ось він", і потім починає відсилати файли веб-сайту в браузер по шматочках, погрупованих в маленькі набори, які називаються пакетами даних (магазин видає вам ваш товар і ви несете його додому).</li> - <li>Браузер збирає докупи всі шматочки і показує їх вам у вигляді готової веб-сторінки (ваш товар вже вдома!).</li> -</ol> - -<h2 id="Пояснення_DNS">Пояснення DNS</h2> - -<p>Усі адреси ваших улюблених сайтів насправді є зовсім не такими, якими виглядають. Вони є спеціальними наборами цифр, як, наприклад, оцей: 63.245.215.20.</p> - -<p>Це {{Glossary("IP Address", "IP-адреса")}} сайту, вона представляє унікальне місце зберігання сайту в мережі. Її непросто запам'ятати, чи не так? Саме тому бути винайдені сервери доменних імен (Domain Name Servers), або DNS-сервери. Це спеціальні сервери, які зіставляють веб-адресу, яку ви вводите в браузер (наприклад, "mozilla.org") зі справжньою (IP) адресою сайту.</p> - -<p>Веб-сайти можна знайти напряму через їхні IP-адреси. Спробуйте зайти на сайт Mozilla website, увівши <code>63.245.215.20</code> в адресний рядок браузера.</p> - -<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> - -<h2 id="Пояснення_пакетів">Пояснення пакетів</h2> - -<p>Вище ми вживали термін "пакет", щоб описати формат, у якому дані пересилаються з сервера на клієнт. Що це означає? Дані пересилаються по мережі у вигляді серій пакетів, кожен з яких містить маленьких шматок інформації. Це робиться для того, щоб багато різних користувачів могли завантажувати одну й ту саму сторінку одночасно. Якщо б веб-сайти надсилалися одним великим шматком, тільки один користувач міг би завантажувати її в певний час, що значно ускладнило б користування мережею. </p> - -<h2 id="Також_дивися">Також дивися</h2> - -<ul> - <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li> - <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> - <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> - <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> -</ul> - -<h2 id="Автор_фото">Автор фото</h2> - -<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> - -<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/html_basics/index.html b/files/uk/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 71e66f6f1e..0000000000 --- a/files/uk/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Основи HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - HTML - - Початківець -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>HTML (мова гіпертекстової розмітки) — це код, який використовується для структурування і відображення веб-сторінки та її контенту. Наприклад, контент може бути розбитий на параграфи (абзаци), містити список, зображення чи таблицю. Ця стаття має дати базове розуміння мови HTML та її призначення. </p> -</div> - -<h2 id="Що_таке_HTML">Що таке HTML?</h2> - -<p>HTML — це не мова програмування, це <em>мова розмітки</em>, яка каже вашому браузеру, як відображати вміст веб-сторінки, яку ви переглядаєте. Вона може бути простою чи складною, залежно від бажання веб-дизайнера, який її створює. HTML складається з серії (<strong>{{Glossary("element", "елементів")}})</strong>, які використовуються для вміщення, або "загортання" в них різних частин контенту, щоб вони відображалися чи діяли в певний спосіб. Ці елементи за допомогою початкових і кінцевих ({{Glossary("tag", "тегів")}}) можуть зробити слово чи зображення посиланням на будь-яку іншу сторінку, можуть відображати текст курсивом, збільшити чи зменшити шрифт тощо. Для прикладу, візьмемо такий контент: </p> - -<pre class="notranslate">Мій кіт дуже сумний.</pre> - -<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), додавши до нього відповідні теги:</p> - -<pre class="brush: html notranslate"><p>Мій кіт дуже сумний.</p></pre> - -<h3 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h3> - -<p>Погляньмо на елемент "параграф" детальніше. </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Основні частини елементу такі:</p> - -<ol> - <li><strong>Початковий тег:</strong> містить назву елементу (в даному випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li> - <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у даному випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li> - <li><strong>Вміст:</strong> вміст елементу, у даному випадку — просто текст. </li> - <li><strong>Елемент:</strong> початковий тег плюс кінцевий тег плюс вміст між ними — дорівнює елемент.</li> -</ol> - -<p>Елементи також можуть мати атрибути, які виглядають так: </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє дати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль. </p> - -<p>Атрибут завжди повинен мати:</p> - -<ol> - <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li> - <li>Ім'я атрибута, за яким іде знак дорівнює.</li> - <li>Значення атрибута, загорнене в прямі лапки.</li> -</ol> - -<h3 id="Вкладені_елементи">Вкладені елементи</h3> - -<p>Ви можете додати елемент всередину іншого елементу. Це називається <strong>вкладенням.</strong> Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p> - -<pre class="brush: html notranslate"><p>Мій кіт <strong>дуже</strong> сумний.</p></pre> - -<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p> - -<pre class="example-bad brush: html notranslate"><p>Мій кіт <strong>дуже сумний.</p></strong></pre> - -<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим всім сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p> - -<h3 id="Порожні_елементи">Порожні елементи</h3> - -<p>Деякі елементи не містять жодного вмісту. Вони називаються <strong>порожніми елементами</strong>. Для прикладу візьмемо елемент {{htmlelement("img")}}:</p> - -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Моє тестове зображення"></pre> - -<p>Цей елемент має два атрибути, при цьому не має кінцевого тегу і жодного внутрішнього вмісту. Елементу image не потрібно загортати контент, його мета — вставити зображення на певне місце на веб-сторінці.</p> - -<h3 id="Анатомія_HTML-документу">Анатомія HTML-документу</h3> - -<p>Все зазначене вище є основами HTML-елементів, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку. Візьмемо для прикладу код з файлу <code>index.html</code> (який використовується в статті <em><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em>):</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Моя тестова сторінка</title> - </head> - <body> - <img src="images/firefox-icon.png" alt="Моє тестове зображення"> - </body> -</html></pre> - -<p>Тут ми маємо:</p> - -<ul> - <li><code><!DOCTYPE html></code> — тип документу. В сиву давнину, коли HTML був молодим (приблизно в 1991-92 роках), типи документів мали слугувати набором посилань на правила, яким HTML-сторінка мала слідувати, щоб вважатися правильним HTML (наприклад, автоматична перевірка помилок та інше). Однак, у наш час мало хто переймається типами документів, і вони є швидше історичним артефактом, який потрібно додавати, щоб все працювало правильно. Поки що це все, що вам потрібно знати про тип документу.</li> - <li><code><html></html></code> — елемент {{htmlelement("html")}}. Цей елемент загортає весь контент на всій сторінці. Також його називають кореневим елементом (root element).</li> - <li><code><head></head></code> — елемент {{htmlelement("head")}}. Цей елемент слугує контейнером для всієї інформації, яку ви хочете додати до своєї сторінки, але яка <em>не є власне контентом</em> сторінки, який будуть переглядати користувачі. Це, зокрема, {{Glossary("keyword", "ключові слова")}}, опис сторінки, який буде з'являтися в пошукових результатах, CSS для стилів контенту, набір символів (кодування) тощо.</li> - <li><code><body></body></code> — елемент {{htmlelement("body")}}. Цей елемент містить <em>увесь контент</em>, який ви хочете показати користувачам, коли вони відвідують вашу сторінку: текст, зображення, відео, ігри, аудіо тощо. </li> - <li><code><meta charset="utf-8"></code> — цей елемент визначає набір символів, які використовує сторінка. Зазвичай це UTF-8, який містить найбільше символів з більшості людських писемних мов. По суті, ваша сторінка зможе відобразити практично будь-який текстовий контент. Немає жодних причин пропускати цей елемент, він може допомогти уникнути певних проблем пізніше. </li> - <li><code><title></title></code> — елемент {{htmlelement("title")}}. Цей елемент містить заголовок вашої сторінки, який буде відображатися у вкладці браузера при завантаженні сторінки. Також текст у цьому елементі буде відображатися в закладках, якщо додати сторінку до закладок.</li> -</ul> - -<h2 id="Зображення">Зображення</h2> - -<p>Повернемося до елементу {{htmlelement("img")}}:</p> - -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Моє тестове зображення"></pre> - -<p>Як ми вже з'ясували раніше, цей елемент вставляє зображення на сторінку в тому місці, де воно має з'явитися. Це відбувається за допомогою атрибута <code>src</code> (source — джерело), який містить шлях до зображення.</p> - -<p>Також ми додали атрибут <code>alt</code> (alternative). У цьому атрибуті потрібно вказувати альтернативний текст-опис зображення для тих випадків, коли користувачі не зможуть побачити картинку, наприклад, через те, що:</p> - -<ol> - <li>Мають порушення зору. Користувачі з порушенням зору часто використовують скрін-рідери, які читають описи зображень.</li> - <li>Щось пішло не так при завантаженні зображення. Спробуйте навмисно змінити шлях до зображення в атрибуті <code>src</code>, щоб він став неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите, що на місці зображення буде текст:</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> - -<p>Основним при створенні атрибута alt має бути описовість тексту. Цей атрибут має дати користувачу достатньо інформації, щоб скласти уявлення про те, що є на зображенні. У нашому випадку, текст "Моє тестове зображення" нікуди не годиться. Набагато кращий варіант для логотипу Firefox був би "Логотип Firefox: палаюча лисиця навколо Земної кулі."</p> - -<p>Спробуйте придумати кращий альтернативний текст для свого зображення. </p> - -<div class="note"> -<p><strong>Примітка</strong>: дізнайтеся більше про доступність на сторінці <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility</a>.</p> -</div> - -<h2 id="Розмітка_тексту">Розмітка тексту</h2> - -<p>У цьому розділі ми розглянемо базові HTML-елементи, які використовуються для розмітки тексту.</p> - -<h3 id="Заголовки">Заголовки</h3> - -<p>Елементи "Heading" дозволяють вам вказати, що певні частини контенту вашої сторінки є заголовками або підзаголовками. Так само, як у книжці є назва книги, назви розділів і підзаголовки, у HTML-документі це також є. HTML має заголовки шістьох рівнів, {{htmlelement("h1")}}–{{htmlelement("h6")}}, хоча зазвичай використовуються перші 3-4.</p> - -<pre class="brush: html notranslate"><h1>Мій головний заголовок</h1> -<h2>Мій важливий заголовок</h2> -<h3>Мій підзаголовок</h3> -<h4>Мій менш важливий підзаголовок</h4></pre> - -<p>Спробуйте додати підзаголовки до вашої HTML-сторінки перед елементом {{htmlelement("img")}}.</p> - -<h3 id="Параграфи">Параграфи</h3> - -<p>Як пояснювалося вище, елемент {{htmlelement("p")}} містить частину тексту, яка становить один абзац. Параграфи використовуються дуже часто, особливо при розмітці звичайного текстового контенту:</p> - -<pre class="brush: html notranslate"><p>Це один параграф.</p></pre> - -<p>Додайте зразок тексту (він має бути готовий зі статті <em><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Як виглядатиме ваш сайт?</a></em>) в один чи два параграфи і розмістіть їх прямо під елементом {{htmlelement("img")}}.</p> - -<h3 id="Списки">Списки</h3> - -<p>Чимало контенту на веб-сторінках є списками, і в HTML є спеціальні елементи для них. Розмітка списків завжди має принаймні два елементи. Найпоширеніші типи списків - це нумерований і ненумерований списки:</p> - -<ol> - <li><strong>Ненумерований список</strong> — це перелік, у якому порядок пунктів не суттєвий, наприклад, список покупок. Такий список загортається в елемент {{htmlelement("ul")}}.</li> - <li><strong>Нумерований список</strong> — це перелік, у якому порядок пунктів має значення, наприклад, рецепт приготування. Такий список загортається в елемент {{htmlelement("ol")}}.</li> -</ol> - -<p>Кожен пункт всередині списку загортається в свій окремий елемент {{htmlelement("li")}} (list item).</p> - -<p>Наприклад, якщо ми хочемо перетворити такий параграф у список: </p> - -<pre class="brush: html notranslate"><p>Mozilla — це глобальна спільнота технологів, мислителів і творців, які працюють разом...</p></pre> - -<p>Ми можемо так змінити розмітку:</p> - -<pre class="brush: html notranslate"><p>Mozilla — це глобальна спільнота</p> - -<ul> - <li>технологів</li> - <li>мислителів</li> - <li>творців</li> -</ul> - -<p>які працюють разом... </p></pre> - -<p>Спробуйте додати нумерований чи ненумерований список до вашої сторінки.</p> - -<h2 id="Посилання">Посилання</h2> - -<p>Посилання дуже важливі — це те, що робить мережу мережею! Щоб додати посилання, потрібно використовувати елемент {{htmlelement("a")}} ("a" скорочено від "anchor" — якір). Щоб перетворити параграф на посилання, робіть так:</p> - -<ol> - <li>Виберіть текст. Ми вибрали "Mozilla Manifesto".</li> - <li>Загорніть цей текст в елемент {{htmlelement("a")}}, отак: - <pre class="brush: html notranslate"><a>Mozilla Manifesto</a></pre> - </li> - <li>Додайте до елементу {{htmlelement("a")}} атрибут <code>href</code>, отак: - <pre class="brush: html notranslate"><a href="">Mozilla Manifesto</a></pre> - </li> - <li>Додайте значення цьому атрибута — адресу посилання: - <pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> - </li> -</ol> - -<p>Не пропускайте частину <code>https://</code> чи <code>http:// на початку адреси</code>, так званий <em>протокол</em>, інакше результати можуть бути неочікуваними. Після того, як елемент доданий, клікніть на посилання і переконайтеся, що вас відправило туди, куди ви хотіли.</p> - -<div class="note"> -<p><code>href</code> може видаватися дивним ім'ям для атрибута, який складно запам'ятати. Він означає <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>— гіпертекстове посилання.</p> -</div> - -<p>Тепер додайте посилання до своєї сторінки.</p> - -<h2 id="Висновок">Висновок</h2> - -<p>Якщо ви слідували інструкціям у цій статті, у вас мала вийти сторінка, яка виглядає приблизно так (також можна переглянути <a href="http://mdn.github.io/beginner-html-site/">тут</a>):<br> - <br> - <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> - -<p>Якщо ви застрягли, ви завжди можете порівняти свій код із завершеним прикладом коду на <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">GitHub</a>.</p> - -<p>У цій статті ми розглянули тільки базові поняття HTML. Щоб дізнатися більше, зайдіть на сторінку <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/index.html b/files/uk/learn/getting_started_with_the_web/index.html deleted file mode 100644 index af137773c8..0000000000 --- a/files/uk/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Початок роботи з Інтернетом -slug: Learn/Getting_started_with_the_web -tags: - - CSS - - HTML - - 'l10n: пріоритет' - - Покажчик - - Посібник - - Початківцям - - Розробка - - Теорія -translation_of: Learn/Getting_started_with_the_web ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p><em>«</em><em>Початок роботи з Інтернетом»</em> — це серія стислих статей, що знайомить з практичними питаннями веб-розробки. Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного коду.</p> -</div> - -<h2 id="Історія_вашого_першого_сайту">Історія вашого першого сайту</h2> - -<p>Розробка професійного сайту - це кропітка робота. Радимо не поспішати, якщо ви початківець у веб-програмуванні. Ви не отримаєте відразу новий Facebook, але легко побудуєте свій перший сайт.</p> - -<p>Опрацьовуючи статті послідовно, ви розташуєте створену веб-сторінку в інтернеті. Почнемо!</p> - -<h3 id="Встановлення_необхідних_програм"><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a></h3> - -<p>Є чимало інструментів для побудови сайтів. Початківець може розгубитись, при виборі редакторів коду, фреймворків та засобів для тестів. <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> поступово допоможе встановити все, що потрібно для простої веб-розробки.</p> - -<h3 id="Який_вигляд_матиме_ваш_сайт"><a href="/uk/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Який вигляд матиме ваш сайт?</a></h3> - -<p>Перед тим, як почати писати код для сайту, треба мати план. Яку інформацію відобразити? Які кольори та шрифти використати? <a href="/uk/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Який вигляд матиме ваш сайт?</a> Пропонуємо вам простий спосіб планування змісту та зовнішнього вигляду вашого сайту.</p> - -<h3 id="Робота_з_файлами"><a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></h3> - -<p>Сайт складається з багатьох файлів: текстів, коду, таблиць стилів, медіа-контенту тощо. Коли створюється сайт, потрібно об'єднати ці файли в логічну структуру та впевнитися, що вони доступні одне одному. <a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> пояснює, як створити логічну структуру файлів для сайту й уникнути типових проблем.</p> - -<h3 id="Основи_HTML"><a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a></h3> - -<p>Hypertext Markup Language (HTML, мова розмітки гіпертексту) — це код, що структурує зміст веб-сторінок та надання йому значення і мети. Наприклад, чи є контент набором параграфів, чи списком із маркерами? Чи є на сторінці зображення, таблиці з даними? В <a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основах HTML </a>достатньо інформації для знайомства з HTML.</p> - -<h3 id="Основи_CSS"><a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основи CSS</a></h3> - -<p>Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код для стилізації сайту. Наприклад, який колір тексту, де розміщенно контент на екрані? Які фонові зображення та кольори взято для оздоблення сайту? З <a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основ CSS</a> ви дізнаєтесь про стилізацію для початківців.</p> - -<h3 id="Основи_JavaScript"><a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a></h3> - -<p>JavaScript — це мова програмування, яку використовують для можливості взаємодії з веб-сайтами. А саме: ігри, дії, що відбудутся після натиску на кнопоку або введення даних до форми, створення динамічних стилей, анімацій тощо. <a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a> описують можливості цієї захоплючої мови програмування та як почати нею користовуватись.</p> - -<h3 id="Публікація_вашого_сайту"><a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого сайту</a></h3> - -<p>Після написання коду та організації файлів вашого сайту, необхідно розмістити його в інтернеті, щоб люди могли побачити результати вашої праці. <a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого коду</a> допоможе як найлегше розмістити ваш код в інтернеті.</p> - -<h3 id="Як_працює_Інтернет"><a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет </a></h3> - -<p>Коли ви заходите на улюблений сайт, виконується безліч фонових завдань, можливо непомітних для вас. <a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет</a> описує процеси, які відбуваються, коли ви переглядаєте веб-сторінку на компьютері.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Веб Демістифікований</a>: Велика серія відеороликів, яка пояснює веб-основи, спрямована на початківця у веб-розробці. Створена <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li> - <li><a href="/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a>: Ця стаття надає корисну загальну інофрмацію про Інтернет - як він виник, які існують веб-технології, як вони співпрацюють, чому стати веб-програмістом - хороший вибір кар'єри, які підходи до вивчення є найкращими в цьому курсі.</li> -</ul> diff --git a/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index 22e6bfadf6..0000000000 --- a/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Встановлення необхідних програм -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Браузер - - Початківцям - - текстовий редактор - - інструменти -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>В статті <em>"Встановлення необхідних програм"</em> ми з'ясуємо, які інструменти потрібні для веб-розробки та як їх правильно встановити.</p> -</div> - -<h2 id="Які_інструменти_використовують_професіонали">Які інструменти використовують професіонали?</h2> - -<ul> - <li><strong>Комп'ютер</strong>. Це надто очевидно, проте хтось може читати статтю з телефону чи комп'ютера в бібліотеці. Для серйозної веб-розробки краще мати власний комп'ютер чи ноутбук з операційною системою Windows, Mac або Linux.</li> - <li><strong>Текстовий редактор</strong> для написання коду. Це такі текстові редактори, як: <a href="https://www.sublimetext.com/">SublimeText</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> або <a href="https://code.visualstudio.com/">Visual Studio Code</a> чи гібридні, як-от: <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> або <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Офісні програми (наприклад, MS Office) не відповідають вимогам, тому що вставляють в документ приховані елементи, які можуть вплинути на зчитування документу браузером.</li> - <li><strong>Веб-браузер</strong> для тестування коду. Наразі, найвживанішими є <a href="https://www.mozilla.org/uk/">Firefox</a>, <a href="https://www.google.com/intl/uk_ua/chrome/">Chrome</a>, <a href="https://www.opera.com/uk">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> та <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Ви повинні тестувати, як сайт відображається на мобільних пристроях та старих браузерах, які ваша цільова аудиторія може використовувати (як-от IE 8–10).</li> - <li><strong>Графічний редактор</strong>, як-от: <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> чи <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> щоб створити зображення для сайту.</li> - <li><strong>Система контролю версій</strong> для управління файлами на серверах, співпраці з командою, поширення коду і уникнення розбіжностей при редагуванні. Наразі <a href="http://git-scm.com/">Git</a> є найбільш визнаним інструментом контролю версій так само хостинг кодів <a href="https://github.com/">GitHub</a>, що базується на <a href="http://git-scm.com/">Git</a>.</li> - <li><strong>Програма FTP</strong>, якою користуються на старих веб-хостингах для управління файлами на серверах (<a href="http://git-scm.com/">Git</a> в цьому поступово витісняє FTP). Існує багато (S)FTP-програм, як-от <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> і <a href="https://filezilla-project.org/">FileZilla</a>.</li> - <li><strong>Система автоматизації, </strong>наприклад, <a href="http://gruntjs.com/">Grunt</a> чи <a href="http://gulpjs.com/">Gulp</a> для автоматичного виконання повторюваних завдань, таких як зменшення коду чи виконання тестів. </li> - <li>Шаблони, бібліотеки, фреймворки для швидшого написання поширених частин коду.</li> - <li>А також багато іншого!</li> -</ul> - -<h2 id="Які_інструменти_мені_потрібні_зараз">Які інструменти мені потрібні зараз?</h2> - -<p>Список виглядає страшно, але на щастя ви можете починати веб-розробку без знань більшості з них. У статті розглянемо базовий мінімум — текстовий редактор і кілька сучасних браузерів. </p> - -<h3 id="Встановлення_текстового_редактора">Встановлення текстового редактора</h3> - -<p>Напевно, у вас вже є простий текстовий редактор на комп'ютері. Windows зазвичай має <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a>, а macOS — <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux пропонує різні варіанти, зокрема Ubuntu має <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>.</p> - -<p>Для веб-розробки доступні кращі редактори, ніж Notepad чи TextEdit. Пропонуємо <a href="http://brackets.io">Brackets</a> —безкоштовний редактор з підказками та попереднім переглядом. </p> - -<h3 id="Встановлення_сучасного_браузера">Встановлення сучасного браузера</h3> - -<p>Встановимо кілька браузерів, щоб тестувати наш код. Оберіть операційну систему, клацніть відповідне посилання та завантажте улюблені браузери:</p> - -<ul> - <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> - <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> (Windows 10 зазвичай має Edge; в Windows 7 і вище можете встановити Internet Explorer 11; для решти — інший браузер).</li> - <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari зазвичай є в iOS і macOS)</li> -</ul> - -<p>Перед тим, як продовжити, встановіть принаймні два з цих браузерів і запустіть їх.</p> - -<div class="blockIndicator note"> -<p>Internet Explorer не сумісний з деякими сучасними функціями вебу та, вірогідно, не зможе запустити ваш проект. Зазвичай вам не потрібно турбуватися про те, щоб зробити свої веб-проекти сумісними з ним, оскільки дуже мало людей все ще користуються ним - тож, не надто переймайтеся про це, поки ви навчаєтесь. Іноді ви можете зіткнутися з проектом, який потребує його підтримки.</p> -</div> - -<h3 id="Встановлення_локального_веб-сервера">Встановлення локального веб-сервера</h3> - -<p>Деякі приклади потрібно буде тестувати на локальному веб-сервері. Ви можете дізнатися, як його встановити, у статті <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Як ти налаштуєш локальний тестовий сервер?</a></p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html b/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 50ffb7a580..0000000000 --- a/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,401 +0,0 @@ ---- -title: Основи JavaScript -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - Інтернет - - Мова - - Основи - - Українська - - вивчення -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>JavaScript — це мова програмування, яка приносить інтерактивність до вашого веб-сайту (наприклад: ігри, реакція на натиски кнопок, введеня даних через форми, динамічна зміна стилів, анімація). Ця стаття допоможе розпочати вивчення цієї захоплюючої мови і дасть вам уяву про її можливості.</p> -</div> - -<h2 id="Що_ж_являє_собою_JavaScript_насправді">Що ж являє собою JavaScript насправді?</h2> - -<p>{{Glossary("JavaScript")}} ("JS" скорочено) це повноцінна {{Glossary("Динамічна мова програмування", "динамічна мова програмування")}}, яка, у застосуванні до {{Glossary("HTML")}} документу, може надати динамічну інтерактивність на веб-сайтах. Вона була винайдена Бренданом Eйхом, співзасновником проекту Mozilla, the Mozilla Foundation, та Mozilla Corporation.</p> - -<p>JavaScript має надзвичайно багато застосувань. Ви можете розпочати з малого: створити "каруселі", галереї зображень, динамічні макети сторінок, відповіді на натиски кнопок, тощо. Із досвідом, ви зможете створювати ігри, 2D та 3D графіку, складні застосунки з використанням баз даних та багато іншого!</p> - -<p>JavaScript доволі компактна та гнучка мова. Розробники забезпечили велике розмаїття інструментів, що доповнюють основу мови JavaScript, які відкривають величезну кількість додаткового функціоналу з мінімальними зусиллями. Серед них:</p> - -<ul> - <li>Програмні інтерфейси ({{Glossary("API","APIs")}}) для браузерів — API, які вбудовані у браузери, що надають функціонал на зразок динамічного створення HTML та застосування CSS-стилів, збір та обробка відео-потоків з вебкамери користувача, генерація 3D-графіки та аудіо-семплів.</li> - <li>API третіх осіб, що дозволяють розробникам інтегрувати у власні сайти функціонал інших провайдерів, таких як Twitter або Facebook.</li> - <li>Фреймворки та бібліотеки третіх осіб, які ви можете застосувати до вашого HTML, щоб прискорити створення сайтів та застосунків.</li> -</ul> - -<p>Тому що ця стаття повинна бути легким введенням до JavaScript, на цьому етапі ми не будемо займати вашу увагу детальними розмовами про різницю основної мови JavaScript та різними інструментами, що наведені вище. Ви можете вивчити це у деталях пізніше, у нашій <a href="/en-US/docs/Learn/JavaScript">JavaScript learning area</a>, та решті MDN.</p> - -<p>Нижче ми представимо вам деякі аспекти основної мови, а також ви ознайомитесь з деякими можливостями API браузера. Розважайтесь!</p> - -<h2 id="Приклад_hello_world">Приклад "hello world"</h2> - -<p>Попередній розділ звучить неймовірно, і це дійсно так — JavaScript є одним із найперспекнивніших Веб-технологій, і коли ви проникнитесь та почнете використовувати його, ваші веб-сайти перейдуть у нові виміри продуктивності та креативності.</p> - -<p>Тим не менш, відчувати себе комфортно з JavaScript складніше ніж з HTML та CSS. Вам потрібно починати з малого та продовжувати працювати малими послідовними кроками. Для початку, ми розглянемо як додати деякі прості JS-елементи на вашу сторінку, створюючи <em>"hello world!"</em> зразок (<a href="https://uk.wikipedia.org/wiki/Hello_world!">стандартний приклад з програмування</a>).</p> - -<div class="warning"> -<p><strong>Важливо</strong>: Якщо ви не проходили пепередні частини курсу, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">завантажте цей зразок коду</a>(архів) і використовуйте його як точку початку.</p> -</div> - -<ol> - <li>Перш за все, перейдіть до вашого тестового сайту та створіть нову папку з іменем "scripts"(без лапок). Тоді, всередині нової папки для скриптів, що ви щойно створили, створіть новий файл з назвою <code>main.js</code>. Збережіть його в папці <code>scripts</code> .</li> - <li>Далі, у вашому файлі <code>index.html</code> введіть наступний елемент в новому рядку просто перед закриваючим тегом <code></body></code> : - <pre class="brush: html"><script src="scripts/main.js"></script></pre> - </li> - <li>Загалом, це те ж саме, що і {{htmlelement("link")}} елемент для CSS — він додає JavaScript до сторінки, тож це може впливати на HTML (також на CSS, та будь що інше на сторінці).</li> - <li>Тепер додайте цей код до файлу <code>main.js</code> : - <pre class="brush: js">var myHeading = document.querySelector('h1'); -myHeading.textContent = 'Hello world!';</pre> - </li> - <li>Наприкінці, переконайтесь, що файли HTML та JavaScript збережені та приєднані до <code>index.html</code> в браузері. Ви маєте побачити щось на кшталт цього:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> -</ol> - -<div class="note"> -<p><strong>Зауважте</strong>: Причиною, чому ми ставимо {{htmlelement("script")}} елемент ближче до низу HTML файлу, є те, що HTML завантажується браузером в порядку того, як він прописаний в файлі. Якщо JavaScript завантажено першим, а очікується, що він має впливати на HTML під ним, він може не працювати, якщо JavaScript завантажується раніше, ніж HTML, над яким він має здійснювати якісь маніпуляції. Тож, писати підключення JavaScript наприкінці коду HTML це, зачасту, найкраща стратегія.</p> -</div> - -<h3 id="Що_сталось">Що сталось?</h3> - -<p>Текст вашого заголовка було замінено на "Hello world!", використовуючи JavaScript. Ви зробили це за допомогою першої функції яку використали, яка має назву <code>{{domxref("Document.querySelector", "querySelector()")}}</code> щоб отримати посилання на ваш заголовок та зберегти його у змінній <code>myHeading</code>. Дуже схоже до того, що ми робили, використовуючи CSS селектори. Коли є потреба щось зробити з елементом, ви маєте спочатку його вибрати.</p> - -<p>Після цього, ви присвоюєте значення змінної <code>myHeading</code> властивості <code>{{domxref("Node.textContent", "textContent")}}</code> (яка містить контекст заголовка), а саме "Hello world!".</p> - -<div class="note"> -<p><strong>Зауважте</strong>: Обидві можливості, що ви використовували перед цим, є частиною <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, що дозволяє вам маніпулювати документами.</p> -</div> - -<h2 id="Прискорений_курс_основ">Прискорений курс основ</h2> - -<p>Розгляньмо кілька основних можливостей мови JavaScript, щоб дати вам краще розуміння того, як це все працює. Варто зазначити, що ці речі притаманні всім мовам програмування, тож якщо ви засвоїте цей базис, ви на шляху до того, щоб могти програмувати будь-що!</p> - -<div class="warning"> -<p><strong>Важливо</strong>: У цій статті, намагайтесь перевіряти приклади коду на своєму ПК у JavaScript консолі. <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools$translate?tolocale=uk">Детальніша інформація</a> про JS-консоль та інші засоби розробника у браузері.</p> -</div> - -<h3 id="Змінні">Змінні</h3> - -<p>{{Glossary("Змінна", "Змінні")}} - контейнери, у яких ви можете зберігати значення. Ви можете розпочати з оголошення змінної за допомогою ключового слова <code>var</code> , після якого вказавши ім'я, яким ви хочете назвати змінну:</p> - -<pre class="brush: js">var myVariable;</pre> - -<div class="note"> -<p><strong>Зауважте</strong>: Крапка з комою(англ. semicolon) в кінці рядка вказує на кінець виразу; ставити крапку з комою обов'язково, коли вам потрібно розділити вирази в одному рядку. Однак, деякі люди вважають гарною практикою ставити в кінці кожного виразу. Є інші правила, коли ви маєте чи не маєте ставити крапку з комою - дивіться <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a>, щоб дізнатись більше.</p> -</div> - -<div class="note"> -<p><strong>Зауважте</strong>: Ви можете називати змінні майже будь-як, проте є певні обмеження (читайте <a href="http://www.codelifter.com/main/tips/tip_020.shtml">статтю про правила іменування змінних</a>.) Якщо вагаєтесь, можна <a href="https://mothereff.in/js-variables">перевірити ім'я вашої змінної</a>, щоб дізнатись, чи є воно коректним.</p> -</div> - -<div class="note"> -<p><strong>Зауважте</strong>: JavaScript це мова чутлива до регістру — <code>myVariable</code> , це не те саме, що <code>myvariable</code> чи <code>MYvariable</code>. Якщо ви маєте проблеми з кодом, можливо, варто перевірити регістр.</p> -</div> - -<p>Після оголошення змінної, ви можете просвоїти їй значення:</p> - -<pre class="brush: js">myVariable = 'Bob';</pre> - -<p>Ви можете виконувати обидві операції в одному рядку:</p> - -<pre class="brush: js">var myVariable = 'Bob';</pre> - -<p>Ви можете звертатись до змінної, просто вказавши її ім'я:</p> - -<pre class="brush: js">myVariable;</pre> - -<p>Після надання змінній значення, ви можете пізніше змінити його:</p> - -<pre>var myVariable = 'Bob'; -myVariable = 'Steve';</pre> - -<p>Зауважте, що змінні можуть містити значення <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">різних типів</a>:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Тип</th> - <th scope="col">Пояснення</th> - <th scope="col">Приклад</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td>Послідовність символів, відома як рядок. Щоб визначити, що значенням є рядок, ви мусите занести його в лапки.</td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Number")}}</th> - <td>Число. Без лапок.</td> - <td><code>var myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td>Значення True/False. Слова <code>true</code> та <code>false</code> є спеціальними словами в JS, та не потребують лапок.</td> - <td><code>var myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td>Масив. Дозволяє зберігати багато значень за одним посиланням.</td> - <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> - Виклик значень елементів здійснюється так:<br> - <code>myVariable[0]</code>, <code>myVariable[1]</code>, і т. д.</td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td>Загалом, будь-що. Все у JS є об'єктом і може міститись у змінній. Пам'ятайте це.</td> - <td><code>var myVariable = document.querySelector('h1');</code><br> - Всі попередні приклади теж.</td> - </tr> - </tbody> -</table> - -<p>То навіщо нам потрібні змінні? Щож, змінні потрібні для всіх цікавих у програмуванні речей. Якби змінні не могли змінюватись, то ви не могли б робити ніяких динамічних речей, як то персоналізовані вітальні повідомлення чи зміна відображуваних в галереї зображень.</p> - -<h3 id="Коментарі">Коментарі</h3> - -<p>Ви можете залишати коментарі у JavaScript коді, так само як у CSS:</p> - -<pre class="brush: js">/* -Все, що всередині, є коментарем. -*/</pre> - -<p>Якщо коментар однорядковий, то простіше виділити його двома слешами:</p> - -<pre class="brush: js" style="font-size: 14px;">// Це коментар. Малозмістовний, та все ж. -</pre> - -<h3 id="Оператори">Оператори</h3> - -<p><code>{{Glossary("Оператор")}}</code> , це математичний символ, що видає результат, оснований на двох значення(чи змінних). В таблиці нижче ви можете побачити деякі з напростіших операторів з деякими прикладами, які можете перевірити у JavaScript консолі.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Оператор</th> - <th scope="col">Пояснення</th> - <th scope="col">Символ</th> - <th scope="col">Приклад</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Додавання/конкатинація</th> - <td>Вживається для додавання двох чисел чи злиття двох рядків разом.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hello " + "world!";</code></td> - </tr> - <tr> - <th scope="row">Віднімання, множення, ділення</th> - <td>Те ж, що і в простій математиці.</td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td> - <p><code>9 - 3;<br> - 8 * 2; //Множення у JS позначається зірочкою<br> - 9 / 3;</code></p> - </td> - </tr> - <tr> - <th scope="row">Присвоєння</th> - <td>Ви вже це бачили; присвоєння змінній значення.</td> - <td><code>=</code></td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">Порівняння</th> - <td>Перевіряє чи дві змінні рівні та повертає <code>true</code>/<code>false</code> (Boolean) .</td> - <td><code>===</code></td> - <td><code>var myVariable = 3;<br> - myVariable === 4;//false</code></td> - </tr> - <tr> - <th scope="row">Заперечення (обернений до порівняння)</th> - <td>Повертає логічний вираз, протилежний значенню операнда; <code>true</code> стає <code>false</code> і т.п. Повертає <code>true</code>, якщо значення не рівні.</td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>Початковий вираз <code>true</code>, але повертається <code>false</code> , оскільки це заперечене порівняння :</p> - - <p><code>var myVariable = 3;<br> - !(myVariable === 3);</code></p> - - <p>Ми перевіряємо "чи <code>myVariable</code> НЕ рівне 3". Повертає <code>false</code>, оскільки <code>myVariable</code> РІВНЕ 3.</p> - - <p><code><code>var myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p>Існує ще багато операторів, які ви можете використовувати, та цих поки достатньо. Відвідайте <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a>, щоб побачити повний список.</p> - -<div class="note"> -<p><strong>Зауважте</strong>: Змішування типів даних може привести до дивних результатів при виконанні обрахунків, тож будьте обережні. Наприклад, введіть <code>"35" + "25"</code> в своїй консолі. Чому ви отримали не той результат, на який ви очікували? Тому, що лапки перетворили числа в рядки, тож виконалось не додавання, а злиття рядків. Якщо ввести <code>35 + 25</code> , то результат буде таким, який ви, можливо, очікували у попередньому випадку.</p> -</div> - -<h3 id="Умови">Умови</h3> - -<p>Умовами називають структури коду, що дозволяють вам перевіряти, повертає вираз <code>true</code>, чи ні, виконуючи певні частини коду, залежно від результату. Поширеною формою умовної конструкції є <code>if ... else</code>. Наприклад:</p> - -<pre class="brush: js">var iceCream = 'chocolate'; -if (iceCream === 'chocolate') { - alert('Yay, I love chocolate ice cream!'); -} else { - alert('Awwww, but chocolate is my favorite...'); -}</pre> - -<p>Вираз всередині <code>if ( ... )</code>, це порівняння — використовує оператор порівняння щоб співставити значення змінної <code>iceCream</code> з рядком <code>'chocolate'</code>,щоб визначити, чи рівні вони. Якщо <code>true</code>, то запускається перший блок коду. Якщо порівняння не повертає <code>true</code>, то перший блок пропускається, а другий блок, після виразу <code>else</code>, запускається замість нього.</p> - -<h3 id="Функції">Функції</h3> - -<p>{{Glossary("Функція", "Функції")}}, це шлях до збереження функціоналу, який ви плануєте використовувати знову. В такому разі, коли вам потрібна певна процедура, ви можете просто викликати відповідну функцію. Ви вже бачили деякі використання функцій, наприклад:</p> - -<ol> - <li> - <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js">alert('hello!');</pre> - </li> -</ol> - -<p>Ці функції, <code>document.querySelector</code> та <code>alert</code>, є вбудованими у браузер, тож ви можете викликати їх коли вам заманеться.</p> - -<p>Якщо ви бачите щось, що виглядає, як ім'я змінної, проте має дужки до — <code>()</code> — та після, це функція. Функції зазвичай приймають {{Glossary("Арґумент", "аргументи")}} — дані, що необхідні їм для роботи. Їх записують між дужками, розділяючи комами, якщо є більше одного.</p> - -<p>Наприклад, функція <code>alert()</code> створює випадаюче вікно в вікні браузера, але ми маємо задати аргументом рядок, щоб повідомити функції, що саме потрібно написати у випадаючому вікні.</p> - -<p>Звісно ж, ви можете описувати власні функції — у цьому прикладі ми напишемо просту функцію, що приймає два числа аргументами та множить їх:</p> - -<pre class="brush: js">function multiply(num1,num2) { - var result = num1 * num2; - return result; -}</pre> - -<p>Спробуйте запустити функцію в консолі та протестувати з різними аргументами. Наприклад:</p> - -<pre class="brush: js">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> - -<div class="note"> -<p><strong>Зауважте</strong>: Вираз <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> вказує браузеру, що потрібно повернути змінну <code>result</code> наприкінці роботи функції, щоб вона була доступна до використання. Це необхідно, тому що змінні, що визначені всередині функції, видимі лише в цій же функції. Це називається {{Glossary("Scope", "зоною видимості")}} змінної. (<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">more on variable scoping</a>.)</p> -</div> - -<h3 id="Події">Події</h3> - -<p>Справжня інтерактивність на сайті вимагає подій. Це структури коду, що стежать за тим, що стається у браузері та запускають певні блоки коду у відповідь. Найпоширеніша подія, це <a href="/en-US/docs/Web/Events/click">click</a>, що виконується браузером, коли ви клікаєте на щось своєю мишкою. Щоб побачити це, пропишіть наступний код у консолі а потім клацніть на цій сторінці:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() { - alert('Ouch! Stop poking me!'); -}</pre> - -<p>Є багато шляхів прив'язати подію до елемента. Тут ми обираємо {{htmlelement("HTML")}} елемент, виставляючи для події <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> на виконання безіменну функцію, яку ми хочемо запустити при натисканні.</p> - -<p>Зауважте, що це:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> - -<p>еквівалентне цьому:</p> - -<pre class="brush: js">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p>Просто коротше.</p> - -<h2 id="Прокачаємо_наш_зразок_сайту">Прокачаємо наш зразок сайту</h2> - -<p>Тепер, коли ми розглянули кілька принципів JavaScript, давайте додамо трохи нових крутих фішок до нашого сайту, щоб подивитись, що ми можемо з ним робити.</p> - -<h3 id="Додамо_зміну_картинок">Додамо зміну картинок</h3> - -<p>У цій частині, ми додамо ще зображень засобами DOM API, викорстовуючи JavaScript, щоб переключатись між ними, коли хтось клікне на зображення.</p> - -<ol> - <li>Перш за все, знайдіть ще одне зображення, яке б ви хотіли бачити на своєму сайті. Переконайтесь, що воно має такий же розмір, як і попереднє, або максимально близько до нього за розміром.</li> - <li>Збережіть його у папку <code>images</code> .</li> - <li>Перейменуйте його на 'firefox2.png' (без лапок, звичайно).</li> - <li>Перейдіть до файлу <code>main.js</code>, та введіть цей шматок коду JavaScript. (Якщо ваш зразок "hello world" досі там, видаліть його.) - <pre class="brush: js">var myImage = document.querySelector('img'); - -myImage.onclick = function() { - var mySrc = myImage.getAttribute('src'); - if(mySrc === 'images/firefox-icon.png') { - myImage.setAttribute ('src','images/firefox2.png'); - } else { - myImage.setAttribute ('src','images/firefox-icon.png'); - } -}</pre> - </li> - <li>Збережіть всі файли та відкрийте <code>index.html</code> у браузері. Тепер, коли ви клікатимете на зображення, воно буде замінюватись іншим.</li> -</ol> - -<p>Ви зберігаєте посилання на ваше зображення у змінній <code>myImage</code>. Далі, ви прив'язуєте подію <code>onclick</code> для цієї змінної до функції, що не має імені(анонімної). Зараз, щоразу, коли ви клікнете на цей елемент:</p> - -<ol> - <li>Ви поновлюєте значення атрубуту зображення <code>src</code> .</li> - <li>Використовуєте умову для перевірки, чи значення <code>src</code> рівне шляху до першого зображення: - <ol> - <li>Якщо так, ви змінюєте значення <code>src</code> на шлях до другого зображення, змушуючи вже друге зображення завантажитись до елемента {{htmlelement("image")}}.</li> - <li>Якщо ні (значить зміни вже відбувались), значення <code>src</code> замінюється назад до оригінального зображення, в первинний стан.</li> - </ol> - </li> -</ol> - -<h3 id="Персоналізоване_привітання">Персоналізоване привітання</h3> - -<p>Далі ми допишемо шматок коду, що змінить заголовок сторінки на особисте привітання, коли користувач вперше відвідує сторінку. Це повідомлення залишиться, якщо користувач покине сайт та повернеться знову - ми збережемо його засобами <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Ми також додамо можливість змінити користувача і, відповідно, привітання, як тільки буде потрібно.</p> - -<ol> - <li>До <code>index.html</code> додамо наступний код, прямо перед елементом {{htmlelement("script")}}: - - <pre class="brush: html"><button>Change user</button></pre> - </li> - <li>У файлі <code>main.js</code>, в кінці вставте наступний код . Він отримує посилання на нову кнопку та заголовок і зберігає їх до нових відповідних змінних: - <pre class="brush: js">var myButton = document.querySelector('button'); -var myHeading = document.querySelector('h1');</pre> - </li> - <li>Тепер додамо наступні функції, щоб налаштувати персоналізоване привітання - воно в такому стані не працюватиме, та скоро ми це виправимо: - <pre class="brush: js">function setUserName() { - var myName = prompt('Please enter your name.'); - localStorage.setItem('name', myName); - myHeading.textContent = 'Mozilla is cool, ' + myName; -}</pre> - Ця функція містить функцію <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, яка викликає діалогове вікно, подібно до <code>alert()</code>. Функція <code>prompt()</code>, однак, запитує в користувача дані, зберігаючи їх у відповідній змінній одразу після того як буде натиснута кнопка <strong>OK</strong><em>.</em> В цьому випадку, ми питаємо в користувача його ім'я. Далі, ми звертаємось до API, що має назву <code>localStorage</code>, що дозволяє нам зберігати дані у браузері, а потім звертатись до них. Ми використовуємо з localStorage функцію <code>setItem()</code>, щоб створити та зберегти дані в <code>'name'</code>, та присвоїти це значення змінній <code>myName</code>, що міститиме дані, введені користувачем. Наприкінці, присвоюємо <code>textContent</code> заголовка рядок, додаючи щойно збережене користувачем ім'я.</li> - <li>Після цього, допишемо цей блок <code>if ... else</code> — ми можемо назвати його ініціалізацією, оскільки він структуруватиме логіку сторінки при запуску: - <pre class="brush: js">if(!localStorage.getItem('name')) { - setUserName(); -} else { - var storedName = localStorage.getItem('name'); - myHeading.textContent = 'Mozilla is cool, ' + storedName; -}</pre> - Блок спочатку використовує оператор заперечення (логічне NOT, представлене "!") щоб перевірити, чи існують дані <code>name</code>. Якщо ні, функція <code>setUserName()</code> запуститься, щоб створити їх. Якщо існують (означає, що вони були створені, коли користувач минулого разу відвідував сайт), ми поновлюємо збережене ім'я за допомогою <code>getItem()</code> та присвоюємо заголовку <code>textContent</code> рядок, додаючи ім'я користувача, так само, як і у <code>setUserName()</code>.</li> - <li>Для завершення, прив'яжемо подію <code>onclick</code> до кнопки. Коли відбудеться клік, функція <code>setUserName()</code> запуститься. Це дозволить змінювати ім'я користувача, коли виникне в цьому потреба, натиснувши на кнопку: - <pre class="brush: js">myButton.onclick = function() { - setUserName(); -} -</pre> - </li> -</ol> - -<p>Тепер при, першому відвідуванні сайту, він запитає ваше ім'я, а потім відобразить персоналізоване привітання. Ви в будь-який момент можете змінити ім'я, натиснувши на кнопку. Як бонус, через те, що ім'я зберігається у localStorage, воно залишиться навіть, якщо закрити сторінку, зберігаючи персоналізоване привітання з вашим іменем!</p> - -<h2 id="Висновок">Висновок</h2> - -<p>Якщо ви слідували всім інструкціям, під кінець у вас мало б вийти щось накшталт цього (якщо ні, то можете <a href="https://mdn.github.io/beginner-html-site-scripted/">подивитись нашу версію тут</a>):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> - -<p>Якщо ви десь застрягли, можете порівняти свою роботу з нашим завершеним зразком коду на <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github</a>.</p> - -<p>Тут ми ледь пошкрябали велику глибу можливостей JavaScript. Якщо вам сподобалось і ви бажаєте продовжити, перейдіть на наш <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">план вивчення JavaScript</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index a0d1a5e00f..0000000000 --- a/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Публікація вашого сайту -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - Веб-сервер - - Доменне ім'я - - Мова - - Початківцям - - Публікація - - Українська - - Хостинг -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Коли ви закінчили писати код і організували всі файли, які складають ваш проект, ви маєте викласти все це онлайн, щоб ваш веб-сайт можна було побачити. У цій статті пояснюється, як без особливих зусиль викласти простий веб-сайт онлайн. </p> -</div> - -<h2 id="Які_варіанти">Які варіанти?</h2> - -<p>Публікація сайту є складною темою, переважно тому, що існує дуже багато шляхів як це зробити. У цій статті ми не ставимо за мету розказати про всі можливі варіанти. Натомість ми поговоримо про "плюси" і "мінуси" трьох найбільш популярних стратегій виходу в онлайн з точки зору початківців, а потім розкажемо про один із способів, який нам найбільше підходить на даному етапі. </p> - -<h3 id="Хостинг_і_доменне_ім'я">Хостинг і доменне ім'я</h3> - -<p>Якщо ви хочете повністю контролювати ваш опублікований веб-сайт, то вам потрібно купити:</p> - -<ul> - <li>Хостинг — оренда місця для зберігання файлів на <a href="/en-US/Learn/What_is_a_web_server">веб-сервері</a> хостингової компанії. Ви можете викласти свої файли в орендоване місце, і веб-сервер буде надавати вміст вашого сайту користувачам.</li> - <li><a href="/en-US/Learn/Understanding_domain_names">Доменне ім'я</a> — унікальна адреса, за якою користувачі будуть знаходити ваш сайт, наприклад, <code>http://www.mozilla.org чи</code> <code>http://www.bbc.co.uk</code>. Ви можете орендувати доменне ім'я у <strong>реєстратора доменних імен</strong>.</li> -</ul> - -<p>Багато професійних веб-сайтів виходять онлайн таким способом. </p> - -<p>На додачу, вам знадобиться програма {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (див. <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a>), щоб передавати ваші файли на сервер. Є багато різних програм FTP, але загалом для користування вам потрібно залогінитися на ваш веб-сервер (реєстраційні данні, наприклад, ім'я користувача, пароль, ім'я хоста, надаються хостинговою компанією). Потім програма покаже ваші локальні файли і файли на веб-сервері у двох вікнах, так що ви зможете переносити файли туди і назад:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Поради_з_пошуку_хостингу_і_доменів">Поради з пошуку хостингу і доменів</h4> - -<ul> - <li>Ми не рекламуємо окремі комерційні хостингові компанії чи реєстратори доменних імен. Щоб знайти хостингові компанії і реєстратори, просто введіть "web hosting" і "domain names" в пошуковику. У всіх реєстраторах можна перевірити, чи потрібне вам доменне ім'я вільне, чи вже зареєстроване.</li> - <li>Ваш домашній чи робочий інтернет-провайдер ({{Glossary("ISP", "internet service provider")}}) може пропонувати обмежений хостинг для малих веб-сайтів. Кількість доступних опцій буде невелика, але їх може бути достатньо для ваших перших пробних сайтів — запитайте вашого провайдера!</li> - <li>Є кілька безкоштовних сервісів, таких як <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a> та <a href="https://wordpress.com/">WordPress</a>. Їх може бути цілком достатньо для перших експериментів. Безкоштовні сервіси не вимагають програм FTP — ви можете просто перетягувати файли на сайт сервісу. </li> - <li>Іноді компанії пропонують і хостинг, і реєстрацію імені одним пакетом.</li> -</ul> - -<h3 id="Онлайн-інструменти_GitHub_і_Google_App_Engine">Онлайн-інструменти GitHub і Google App Engine</h3> - -<p>Деякі інструменти дозволяють вам публікувати ваш сайт онлайн:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> — це сайт "суспільного кодингу". Він дозволяє вам завантажити свій код для зберігання в системі контролю версій <a href="http://git-scm.com/">Git</a><strong>. </strong>Також ви можете долучатися до створення різних проектів. Це система open-source, тобто будь-хто будь-де може знайти ваш код, використати його, вчитися по ньому чи покращити його. GitHub має дуже корисну функцію <a href="https://pages.github.com/">GitHub Pages</a>, яка дозволяє переглядати код онлайн.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> — це потужна платформа, яка дозволяє вам будувати і запускати додатки, використовуючи інфраструктуру Google. Цей сервіс підходить і для створення складних веб-додатків, і для хостингу статичного веб-сайту. Дивіться статтю <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> для детальнішої інформації.</li> -</ul> - -<p>На відміну від більшості хостингів, такі інструменти переважно безкоштовні, але з обмеженою кількістю функцій. </p> - -<h3 id="Веб-середовища_розробки_(IDE)_такі_як_Thimble">Веб-середовища розробки (IDE), такі як Thimble</h3> - -<p>Є кілька веб-додатків, які відтворюють середовище веб-розробки онлайн, дозволяючи писати HTML, CSS і JavaScript і відображаючи оброблений результат — і все це у вкладці браузера. Ці інструменти прості у користуванні, чудово підходять для навчання і є безкоштовними (принаймні базові функції), крім того, вони хостять вашу сторінку за її унікальною адресою. Однак, базові функції доволі обмежені, і такі сервіси зазвичай не надають місця для зберігання матеріалів сайту (наприклад, зображень).</p> - -<p>Спробуйте покористуватися сервісами нижче і виберіть, який підходить вам найбільше:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://thimble.mozilla.org">Thimble</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="Публікація_через_GitHub">Публікація через GitHub</h2> - -<p>Тепер поговоримо про те, як легко опублікувати ваш сайт за допомогою GitHub Pages.</p> - -<ol> - <li>По-перше, зареєструйтеся на <a href="https://github.com/">GitHub</a> і підтвердіть вашу електронну адресу.</li> - <li>Далі, <a href="https://github.com/new">створіть репозиторій</a>, у якому будуть зберігатися фаші файли.</li> - <li>На цій сторінці, у полі <em>Repository name </em>введіть <em>username</em>.github.io, де <em>username</em> це ваше ім'я користувача. Наприклад, наш друг bobsmith ввів би <em>bobsmith.github.io</em>.<br> - Також поставте "галочку" в полі <em>Initialize this repository with a README</em> і потім клікніть <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Після цього, перетягніть файли вашого сайту в репозиторій і клікніть <em>Commit changes</em>.<br> - - <div class="note"> - <p><strong>Примітка</strong>: переконайтеся, що ваша папка має файл <em>index.html</em>.</p> - </div> - </li> - <li> - <p>Тепер у браузері перейдіть за адресою <em>username</em>.github.io, щоб побачити ваш сайт онлайн. Наприклад, користувач з іменем <em>chrisdavidmills</em> має перейти на <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> - - <div class="note"> - <p><strong>Примітка</strong>: публікація вашого сайту онлайн може зайняти кілька хвилин. Якщо ви не побачите його відразу, почекайте кілька хвилин і спробуйте знову. </p> - </div> - </li> -</ol> - -<p>Щоб дізнатися більше, дивіться <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="Додаткові_матеріали">Додаткові матеріали</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: гарний туторіал Codecademy, який показує деякі додаткові техніки. </li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> від Scott Murray пропонує кілька корисних ідей щодо доступних сервісів. </li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html deleted file mode 100644 index 9f2b50ed36..0000000000 --- a/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Інтернет та веб-стандарти -slug: Learn/Getting_started_with_the_web/The_web_and_web_standards -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards -original_slug: Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти ---- -<p dir="ltr">{{learnsidebar}}</p> - -<p dir="ltr">This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.</p> - -<h2 dir="ltr" id="Brief_history_of_the_web">Brief history of the web</h2> - -<p dir="ltr">We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)</p> - -<p dir="ltr">In the late 1960s, the US military developed a communication network called <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. This can be considered a forerunner of the Web, as it worked on <a href="https://en.wikipedia.org/wiki/Packet_switching">packet switching</a>, and featured the first implementation of the <a href="https://en.wikipedia.org/wiki/Internet_protocol_suite">TCP/IP</a> protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.</p> - -<p dir="ltr">In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?</p> - -<p dir="ltr">Fast forward to 1989, and TimBL wrote <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> and HyperText and CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.</p> - -<p dir="ltr">By late 1990, TimBL had created all the things needed to run the first version of the web — <a href="/en-US/docs/Web/HTTP">HTTP</a>, <a href="/en-US/docs/Web/HTML">HTML</a>, the first web browser, which was called <a href="https://en.wikipedia.org/wiki/WorldWideWeb">WorldWideWeb</a>, an HTTP server, and some web pages to look at.</p> - -<p dir="ltr">In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but I did promise you a brief summary.</p> - -<p dir="ltr">One last significant data point to share is that in 1994, TimBL founded the <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as <a href="/en-US/docs/Web/CSS">CSS</a> and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, and the web started to look more like the web we know today.</p> - -<h2 dir="ltr" id="Web_standards">Web standards</h2> - -<p dir="ltr"><strong>Web standards</strong> are the technologies we use to build web sites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).</p> - -<p dir="ltr">For example, the <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.</p> - -<p dir="ltr">Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the <a href="https://whatwg.org/">WHATWG</a> (who were responsible for the modernization of the HTML language), <a href="https://www.ecma-international.org/">ECMA</a> (who publish the standard for ECMAScript, which JavaScript is based on), <a href="https://www.khronos.org/">Khronos</a> (who publish technologies for 3D graphics, such as WebGL), and others.</p> - -<h3 dir="ltr" id="Open_standards">"Open" standards</h3> - -<p dir="ltr">One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.</p> - -<p dir="ltr">Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.</p> - -<p dir="ltr">This allows the web to remain a freely-available public resource.</p> - -<h3 dir="ltr" id="Dont_break_the_web">Don't break the web</h3> - -<p dir="ltr">Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.</p> - -<h2 id="Being_a_web_developer_is_good">Being a web developer is good</h2> - -<p>The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?</p> - -<p>It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.</p> - -<p><em>The only constant is change.</em></p> - -<p>Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.</p> - -<p>You're a digital creative now. Enjoy the experience, and the potential for earning a living.</p> - -<h2 id="Overview_of_modern_web_technologies">Overview of modern web technologies</h2> - -<p>There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a>.</p> - -<h3 id="Browsers">Browsers</h3> - -<p>You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p> - -<h3 id="HTTP">HTTP</h3> - -<p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p> - -<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"? - -"Sure thing web browser — here you go" - -[Downloads files and renders web page]</pre> - -<p>The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.</p> - -<h3 id="HTML_CSS_and_JavaScript">HTML, CSS, and JavaScript</h3> - -<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> are the main three technologies you'll use to build a website:</p> - -<ul> - <li> - <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p> - - <pre class="brush: html notranslate"><h1>This is a top-level heading</h1> - -<p>This is a paragraph of text.</p> - -<img src="cat.jpg" alt="A picture of my cat"></pre> - - <p>If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.</p> - </li> - <li> - <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p> - - <pre class="brush: css notranslate">p { - color: red; -}</pre> - - <p>In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.</p> - </li> - <li> - <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p> - - <pre class="brush: js notranslate">let pElem = document.querySelector('p'); -pElem.textContent = 'We changed the text!';</pre> - - <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p> - </li> -</ul> - -<h3 id="Tooling">Tooling</h3> - -<p>Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:</p> - -<ul> - <li>The <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> inside modern browsers that can be used to debug your code.</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testing tools</a> that can be used to run tests to show whether your code is behaving as you intended it to.</li> - <li>Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.</li> - <li>So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.</li> - <li>Minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly.</li> -</ul> - -<h3 id="Server-side_languages_and_frameworks">Server-side languages and frameworks</h3> - -<p>HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.</p> - -<p>There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.</p> - -<p>Example server-side languages include ASP.NET, Python, PHP, and NodeJS.</p> - -<h2 id="Web_best_practices">Web best practices</h2> - -<p>We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.</p> - -<p>When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:</p> - -<ul> - <li>User 1 might be looking at it on an iPhone, with a small, narrow screen.</li> - <li>User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.</li> - <li>User 3 might be blind, and using a screenreader to read the web page out to them.</li> - <li>User 4 might be using a really old desktop machine that can't run modern browsers.</li> -</ul> - -<p>Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.</p> - -<p>You'll come across the below concepts at some point in your studies.</p> - -<ul> - <li><strong>Cross-browser compatibility</strong> is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.</li> - <li><strong>Responsive web design</strong> is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.</li> - <li><strong>Performance</strong> means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.</li> - <li><strong>Accessibility</strong> means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?</li> - <li><strong>Internationalization</strong> means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).</li> - <li><strong>Privacy & Security</strong>. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.</li> -</ul> - -<h2 dir="ltr" id="See_also">See also</h2> - -<ul dir="ltr"> - <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web">History of the World Wide Web</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the internet work?</a></li> -</ul> diff --git a/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 3a64823681..0000000000 --- a/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Який вигляд матиме ваш сайт? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Вміст - - Дизайн - - Навчання - - Початківець - - матеріали - - планування - - шрифти -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>В <em>Який вигляд матиме ваш сайт?</em> ми розглянемо, яку попередню планувальну та дизайнерську роботу потрібно зробити до того, як ви почнете писати код. Яку інформацію надаватиме сайт, які шрифти та кольори використати та що фактично робитиме веб-сторінка. </p> -</div> - -<h2 id="Спершу_планування">Спершу планування</h2> - -<p>Перш, ніж щось робити, потрібні ідеї. Що саме ваш сайт має робити? Він може що завгодно, але для першого разу краще обрати щось простіше. Почнемо з простої веб-сторінки зі заголовком, зображенням і кількома абзацами. </p> - -<p>Для початку дайте відповідь на запитання:</p> - -<ol> - <li><strong>Про що ваш сайт? </strong>Ви любите собак, Нью-Йорк, Пекмена?</li> - <li><strong>Яку інформацію по темі ви маєте надати? </strong>Напишіть заголовок і кілька абзаців і подумайте щодо зображення для них. </li> - <li><strong>Який вигляд матиме ваш сайт</strong> у загальних простих термінах? Який колір тла? Які шрифти підійдуть: ділові, коміксні, грубі та крикливі, прості?</li> -</ol> - -<div class="note"> -<p><strong>Примітка</strong>: складні проекти вимагають детальної документації, включно з вказаними конкретно кольорами, шрифтами, відстанями між частинами контенту, стилем тексту тощо. Іноді це називається посібником зі стилю чи бренд-буком.</p> -</div> - -<h2 id="Ескіз_вашого_дизайну">Ескіз вашого дизайну</h2> - -<p>Візьміть олівець і папір та приблизно замалюйте вигляд вашого сайту. Для простої сторінки не варто малювати багато, але вам потрібно виробити звичку це робити. Це справді допомагає — вам не потрібно бути Ван Гогом!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> - -<div class="note"> -<p><strong>Примітка</strong>: навіть у випадку справжніх складних сайтів команда дизайнерів починає з попередніх ескізів на папері, а вже потім робить цифрові макети у графічному редакторі чи онлайн-сервісах. </p> - -<p>Команди веб-розробників зазвичають мають графічного дизайнера і дизайнера по {{Glossary("ДК", "досвіду користування")}}. Графічні дизайнери відповідають за візуальну складову сайту. Дизайнери по досвіду користування — за те, як відвідувачі будуть користовуватись сайтом та взаємодіяти з ним. </p> -</div> - -<h2 id="Вибір_матеріалів">Вибір матеріалів</h2> - -<p>На цьому етапі починіть працювати над вмістом, який потім з'явиться на вашій веб-сторінці.</p> - -<h3 id="Текст">Текст</h3> - -<p>Попередньо ви вже маєте свої тексти та назви. Тримайте їх напоготові. </p> - -<h3 id="Кольорова_тема">Кольорова тема</h3> - -<p>Щоб вибрати колір, який вам подобається, скористайтеся <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Color Picker</a>. Коли ви клацнете по кольору, ви побачите незвичну комбінацію з шести символів, на зразок <code>#660066</code>. Це — <em>hex-код </em>(від hexadecimal — шістнадцяткова системи числення), що відповідає вибраному кольору. Збережіть десь.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> - -<h3 id="Зображення">Зображення</h3> - -<p>Щоб вибрати зображення, пошукайте щось на <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a>.</p> - -<ol> - <li>Коли ви знайдете потрібне, то кляцніть по зображенню. </li> - <li>Натисніть кнопку «<em>Переглянути зображення»</em>.</li> - <li>На наступній сторінці, правою кнопкою миші кляцніть по зображенню, виберіть «Зберегти як...» і десь його збережіть. Або скопіюйте веб-адресу зображення, щоб скористатись потім.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> - -<div class="note"> -<p><strong>Примітка</strong>: більшість зображень у мережі, включно з Google Images, захищені авторським правом. Щоб не порушити його, скористайтеся фільтром прав: 1) клацніть по <strong>Інструменти</strong>, а потім по 2) <strong>Права на використання</strong>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> -</div> - -<h3 id="Шрифт">Шрифт</h3> - -<p>Вибір шрифту:</p> - -<ol> - <li>Щоб знайти шрифт, який вам подобається, зайдіть на <a href="https://fonts.google.com/">Google Fonts</a> і погортайте сторінку. Також можете скористатися фільтром справа.</li> - <li>Натисніть значок "плюс" (Select this font) поруч із потрібним шрифтом.</li> - <li>Натисніть кнопку «* Family Selected» на панелі в низу сторінки («*» залежить від кількості вибраних шрифтів).</li> - <li>У спливаючому вікні побачите рядки коду. Можете скопіювати їх, щоб зберегти на потім. </li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> - -<p> </p> - -<h2 id="У_цьому_розділі">У цьому розділі</h2> - -<ul> - <li id="Installing_basic_software"><a href="/uk/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a></li> - <li id="What_will_your_website_look_like"><a href="/uk/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Який вигляд матиме ваш сайт?</a></li> - <li id="Dealing_with_files"><a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></li> - <li id="HTML_basics"><a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a></li> - <li id="CSS_basics"><a href="/uk/Learn/Getting_started_with_the_web/CSS_basics">Основи CSS</a></li> - <li id="JavaScript_basics"><a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a></li> - <li id="Publishing_your_website"><a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Оприлюднення сайту</a></li> - <li id="How_the_web_works"><a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює мережа</a></li> -</ul> - -<p> </p> diff --git a/files/uk/learn/html/index.html b/files/uk/learn/html/index.html deleted file mode 100644 index 708f04d792..0000000000 --- a/files/uk/learn/html/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -translation_of: Learn/HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Щоб створювати сайти, спершу слід вивчити {{Glossary('HTML')}} — це фундаментальна технологія, за допомогою якої створюється структура веб-сторінки. HTML використовується, щоб вказати тип вмісту на сторінці: абзац, список, заголовок, посилання, зображення, мультимедіа-плеєр, формуляр або один з багатьох інших елементів.</p> - -<h2 id="Шлях_навчання">Шлях навчання</h2> - -<p>Найкраще розпочати вивчення веб-розробки з HTML. Почніть зі <a href="/en-US/docs/Web/Guide/HTML/Introduction">Вступу до HTML</a>. Після цього можна розпочати вивчення більш складних тем, наприклад:</p> - -<ul> - <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> - <li><a href="/en-US/docs/Learn/CSS">CSS</a> і його використання для стилізації HTML (наприклад, зміна шрифту та його розміру, додавання рамок та тіней, розбиття сторінки на декілька колонок, додавання анімації та інших візуальних ефектів.)</li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> та його викорристання для додавання динамічних функцій веб-сторінкам (наприклад, визначити місце перебування користувача та відмітити його на мапі, додати до інтерфейсу елементи, які з'являються/зникають при натисненні на них, або ж зберегти дані користувача на його комп'ютері та багато іншого.)</li> -</ul> - -<p>Для початку навчання необхідно мати щонайменше базові знання комп'ютера та досвід в користуванні інтернетом (перегляд сайтів, відео та аудіо). Також потрібно мати основні робочі інструменти описані в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a> та знати, як створювати та керувати файлами, це описано в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a>. Ці два розділи знаходяться в модулі для початківців <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>.</p> - -<p>Перед вивченням рекомендується ознайомится зі статтею <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>, але це необов'язково. Багато матеріалу зі статті <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a> більш детально охоплює модуль <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> - -<h2 id="Модулі">Модулі</h2> - -<p>Ця тема містить модулі, які рознашовані в порядку вивчення. Слід розпочати навчання від першого з них:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a></dt> - <dd>Цей модуль надає базові знання для подальщої роботи. Він знайомить з важливими поняттями синтаксису та вчить застосовувати код HTML до тексту, створювати посилання, та створювати структуру сторінки за допомогою HTML.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a></dt> - <dd>Цей модуль навчить використовувати HTML для вставки мультимедіа-файлів на вашу сторінку. Ви навчитеся вставляти на вашу сторінку зображення, відео, аудіо та навіть цілі сторінки.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">Таблиці HTML</a></dt> - <dd>Відображення табличних даних на сторінці зрозумілим, {{glossary("Accessibility", "доступним")}} шляхом, може стати викликом. Цей модуль охоплює основи розмітки таблиць, а також більш складні понняття, наприклад, додавання заголовків колонок.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">Формуляри HTML</a></dt> - <dd>Формуляри є дуже важливою частиною Web — вони забезпечують переважну частину функціональності для взаємодії з веб-сайтом, наприклад, реєстрація чи вхід, залишення коментаря, покупка продуктів та інше. Цей модуль навчить вас створювати формуляри, якими користується клієнт.</dd> -</dl> - -<h2 id="Вирішення_основних_проблем_HTML">Вирішення основних проблем HTML</h2> - -<p><a href="/en-US/docs/Learn/HTML/Howto">Вирішення основних проблем HTML</a> містить посилання на секції, в яких пояснюється як використовувати HTML для вирішення основних проблем пристворенні веб-сторінки: робота з заголовками, додавання зображень чи відео, підкреслення вмісту, ствонення простого формуляру тощо.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<div class="document-head" id="wiki-document-head"> -<dl> - <dt> </dt> - <dt> <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Веб форми</a></dt> - <dd>Цей модуль містить низку статей, які допоможуть вам засвоїти основи веб-форм. Веб-форми - це дуже потужний інструмент для взаємодії з користувачами - найчастіше вони використовуються для збору даних від користувачів або дозволяють їм контролювати користувальницький інтерфейс. Однак з історичних та технічних причин не завжди очевидно, як використати їх на повний потенціал. Ми охопимо всі основні аспекти веб-форм, включаючи розміщення їх структури HTML, стилі управління формами, перевірку даних форми та подання даних на сервер.</dd> - <dt></dt> - <dt> <a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> на MDN</dt> - <dd>Основа документації HTML на MDN. Вона містить детальні описи елементу (тега) та його атрибути — якщо ви хочете знати, які атрибути та значення може мати елемент, вам варто ознайомитися з цим розділом.</dd> -</dl> -</div> diff --git a/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index 4d333ac64a..0000000000 --- a/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,322 +0,0 @@ ---- -title: Створення гіперпосилань -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Гіперпосилання дійсно важливі — це те що робить Інтернет <em>інтернетом</em>. Ця стаття показує необхідний синтаксис для створення гіперпосилання а також практику їхнього використання. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Базове знання HTML (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>). Форматування тексту (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>).</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Вивчити як користуватись гіперпосиланнями ефективно і з'єднювати декілька файлів разом.</td> - </tr> - </tbody> -</table> - -<h2 id="Що_таке_гіперпосилання">Що таке гіперпосилання?</h2> - -<p>Гіперпосилання це одне з найбільш вражаючих інновацій, що Інтернет може нам запропонувати. Хоча, вони були ще з самогу початку Інтернету, але вони це те що робить Інтернет <em>Інтернетом</em> — вони дозволяють зв'язати наші документи з будь-яким іншим документом (або іншим ресурсом), ми також можем зробити посилання на конкретні частини документу, і можемо зробити наші документи, (сайти, ресурси) доступними використовуючи просту адресу (на відміну від звичайних програм, які повинні буди встановлені і налаштовані). Практично будь-який контент може бути перетворений в посилання. Клік на таке посилання переведе користувача на іншу веб-адресу ({{glossary("URL")}}).</p> - -<div class="note"> -<p><strong>Примітка</strong>: URL може посилатись на HTML файли, текстові файли, зображення, текстові документи, відео і аудіо файли, та будь-які інші ресурси які можуть знаходитись в Інтернеті. Якщо браузер не знає як відобразити або опрацювати файл, він запитає у користувача чи він хоче відкрити файл (в такому випадку процес відкриття і обробки файлу передається до відповідної програми) або завантажити файл (в такому випадку користувач може повернутись до завантаженого файлу пізніше.)</p> -</div> - -<p>Домашня сторінка BBC, для прикладу, містить велику кількість посилань нетільки на новини, але також на різні розділи сайту (навігація), сторінки логіну та реєстрації (інструменти користувача) та інші.</p> - -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="Anatomy_of_a_link">Anatomy of a link</h2> - -<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p> - -<pre class="brush: html"><p>I'm creating a link to -<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. -</p></pre> - -<p>This gives us the following result:</p> - -<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> - -<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3> - -<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p> - -<pre class="brush: html"><p>I'm creating a link to -<a href="https://www.mozilla.org/en-US/" - title="The best place to find more information about Mozilla's - mission and how to contribute">the Mozilla homepage</a>. -</p></pre> - -<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p> - -<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p> -</div> - -<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3> - -<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p> - -<ul> - <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li> - <li>Turn some of the content into links.</li> - <li>Include title attributes.</li> -</ul> - -<h3 id="Block_level_links">Block level links</h3> - -<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code><a></a></code> tags.</p> - -<pre class="brush: html"><a href="https://www.mozilla.org/en-US/"> - <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> -</a></pre> - -<div class="note"> -<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p> -</div> - -<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2> - -<p>To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.</p> - -<p>A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. For example Mozilla's English homepage is located at <code>https://www.mozilla.org/en-US/</code>.</p> - -<p>URLs use paths to find files. Paths specify where in the filesystem the file you are interested in is located. Let's look at a simple example of a directory structure (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p> - -<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> - -<p>The <strong>root</strong> of this directory structure is called <code>creating-hyperlinks</code>. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an <code>index.html</code> file and a <code>contacts.html</code>. In a real website, <code>index.html</code> would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).</p> - -<p>There are also two directories inside our root — <code>pdfs</code> and <code>projects</code>. These each have a single file inside them — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p> - -<ul> - <li> - <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p> - - <pre class="brush: html"><p>Want to contact a specific staff member? -Find details on our <a href="contacts.html">contacts page</a>.</p></pre> - </li> - <li> - <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p> - - <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> - </li> - <li> - <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p> - - <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> - </li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p> -</div> - -<h3 id="Document_fragments">Document fragments</h3> - -<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p> - -<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> - -<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p> - -<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> - -<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p> - -<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> - -<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3> - -<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p> - -<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p> - -<p>An absolute URL will always point to the same location, no matter where it is used.</p> - -<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> - -<p>A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> - -<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p> - -<h2 id="Link_best_practices">Link best practices</h2> - -<p>There are some best practices to follow when writing links. Let's look at these now.</p> - -<ul> -</ul> - -<h3 id="Use_clear_link_wording">Use clear link wording</h3> - -<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p> - -<ul> - <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li> - <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li> - <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li> -</ul> - -<p>Let's look at a specific example:</p> - -<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Download Firefox -</a></p></pre> - -<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Click here -</a> -to download Firefox</p> -</pre> - -<p>Other tips:</p> - -<ul> - <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li> - <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li> - <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li> - <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li> -</ul> - -<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3> - -<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p> - -<ul> - <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li> - <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li> -</ul> - -<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3> - -<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p> - -<ul> - <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li> - <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li> -</ul> - -<p>Let's look at some examples, to see what kind of text can be used here:</p> - -<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> - Download the sales report (PDF, 10MB) -</a></p> - -<p><a href="http://www.example.com/video-stream/" target="_blank"> - Watch the video (stream opens in separate tab, HD quality) -</a></p> - -<p><a href="http://www.example.com/car-game"> - Play the car game (requires Flash) -</a></p></pre> - -<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3> - -<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p> - -<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" - download="firefox-latest-64bit-installer.exe"> - Download Latest Firefox for Windows (64-bit) (English, US) -</a></pre> - -<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2> - -<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p> - -<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> -</ul> - -<p>You should:</p> - -<ol> - <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li> - <li>Turn each page name into a link to that page.</li> - <li>Copy the navigation menu across to each page.</li> - <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li> -</ol> - -<p>The finished example should end up looking something like this:</p> - -<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> - -<div class="note"> -<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p> -</div> - -<h2 id="E-mail_links">E-mail links</h2> - -<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p> - -<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> -</pre> - -<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> - -<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p> - -<h3 id="Specifying_details">Specifying details</h3> - -<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p> - -<p>Here's an example that includes a cc, bcc, subject and body:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> - Send mail with cc, bcc, subject and body -</a></pre> - -<div class="note"> -<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p> -</div> - -<p>Here are a few other sample <code>mailto</code> URLs:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> diff --git a/files/uk/learn/html/introduction_to_html/debugging_html/index.html b/files/uk/learn/html/introduction_to_html/debugging_html/index.html deleted file mode 100644 index 1c6e107e7b..0000000000 --- a/files/uk/learn/html/introduction_to_html/debugging_html/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Дебаґінг HTML -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML -tags: - - HTML - - Розмітка - - валідатор - - веб-сторінок - - виправлення - - дебаґінг - - для початківців - - кодинг - - перевірка - - помилок - - уроки - - як перевірити -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary"><span id="result_box" lang="uk"><span>Написати HTML добре, але що, якщо щось піде не так, і ви не можете з'ясувати, де помилка в коді?</span> <span>Ця стаття представить вам деякі інструменти, які допоможуть вам знайти та виправити помилки в HTML.</span></span></p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Знайомство з HTML, як наведено в прикладі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML</a> та <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a>.</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td><span id="result_box" lang="uk"><span>Дізнатись основи використання інструментів налагодження (дебаґінга), щоб знайти проблеми в HTML.</span></span></td> - </tr> - </tbody> -</table> - -<h2 id="Дебаґінг_не_страшний">Дебаґінг не страшний</h2> - -<p><span id="result_box" lang="uk"><span>Коли ви пишете код певного виду, все, як правило, добре, доки не настає страшний момент, коли виникла помилка - ви зробили щось не так, тому ваш код не працює - або взагалі, або не зовсім так, як ви хотіли.</span> <span>Наприклад, наведене нижче показує помилку при спробі </span></span> {{glossary("compile")}} <span lang="uk"><span> просту програму, написану на мові "Rust".</span></span></p> - -<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> <span id="result_box" lang="uk"><span>Тут повідомлення про помилку досить легко зрозуміти</span></span> — "неузгоджений подвійний ланцюг кодування". <span id="result_box" lang="uk"><span>Якщо ви подивитеся на цей список, можливо, ви побачите, як це зробити</span></span> <code>println!(Hello, world!");</code> <span id="result_box" lang="uk"><span>може логічно не вистачати подвійної цитати.</span> <span>Проте повідомлення про помилку можуть швидко ускладнюватися і менш легко інтерпретуватися, коли програми стають більшими, і навіть прості випадки можуть трохи налякати того, хто не знає про Руст.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Дебаґінг не повинен бути страшним - це ключ до комфортного написання і налагоджування будь-якої мови програмування або коду, знайомство як з мовою так і з інструментами.</span></span></p> - -<h2 id="HTML_та_дебаґінг">HTML та дебаґінг</h2> - -<p><span id="result_box" lang="uk"><span>HTML не так складно зрозуміти, як Rust.</span> <span>HTML не компілюється в іншу форму, перш ніж браузер проаналізує його та покаже результат</span></span> (він <em>інтерпретується</em>, а не <em>компілюється</em>). І синтаксис HTML {{glossary("element")}} набагато легше зрозуміти, ніж "справжню мову програмування", таку як Rust, {{glossary("JavaScript")}}, або {{glossary("Python")}}. Спосіб, за допомогою якого веб-браузери аналізують HTML є набагато більш <strong>дозвільним, </strong>ніж мови програмування, що є і добре, і погано одночасно.</p> - -<h3 id="Дозвільний_код">Дозвільний код</h3> - -<p><span id="result_box" lang="uk"><span>Отже, що ми маємо на увазі під дозвільним?</span> <span>Ну, звичайно, коли ви робите щось неправильне в коді, є два основних типи помилок, які ви зустрінете:</span></span></p> - -<ul> - <li><strong>Синтаксичні помилки</strong>: <span id="result_box" lang="uk"><span>Це орфографічні помилки у вашому коді, які фактично спричиняють непрацездатність програми, як-от помилка Rust, показана вище.</span> <span>Зазвичай їх можна легко виправити, якщо ви знайомі з синтаксисом мови та знаєте, що означає повідомлення про помилку.</span></span></li> - <li><strong>Логічні помилки</strong>: <span id="result_box" lang="uk"><span>Це помилки, коли синтаксис дійсно правильний, але код не є тим, що ви його намірили, а це означає, що програма працює неправильно.</span> <span>Ці помилки важче фіксувати, ніж синтаксичні помилки, тому що немає повідомлення про помилку, яка спрямовує вас до джерела помилки.</span></span></li> -</ul> - -<p><span id="result_box" lang="uk"><span>Сам по собі HTML не страждає від синтаксичних помилок, оскільки браузери розуміють його належним чином, що означає, що сторінка все одно відображатиметься, навіть якщо є синтаксичні помилки.</span> <span>Браузери мають вбудовані правила, які визначають, як інтерпретувати неправильно написану розмітку, тому ви все одно щось отримаєте, навіть якщо це не те, що ви очікували.</span> <span>Це, звичайно, може бути проблемою!</span></span></p> - -<div class="note"> -<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Розібратись в HTML легко, тому що коли веб-мережа була тільки створена, було вирішено, що надання користувачам можливостей публікувати свій вміст було важливішим, ніж переконатися, що синтаксис абсолютно правильний.</span> <span>Веб-мережа, ймовірно, не була б настільки популярною, як є сьогодні, якщо б вона була більш складною від самого початку.</span></span></p> -</div> - -<h3 id="Активне_навчання_вивчення_допустимого_коду"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: вивчення допустимого коду</span></span></h3> - -<p><span class="short_text" id="result_box" lang="uk"><span>Настав час вивчити дозвільний характер HTML-коду.</span></span></p> - -<ol> - <li>По-перше, завантажте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> і збережіть його локально. Ця демоверсія спеціально написана, щоб мати деякі помилки <span id="result_box" lang="uk"><span>в ньому, щоб ми могли їх досліджувати (розмітка HTML, як наголошується, <strong>погано сформована</strong>, на відміну від <strong>добре сформованої</strong>)</span></span>.</li> - <li><span id="result_box" lang="uk"><span>Далі відкрийте його в браузері.</span> <span>Ви побачите щось подібне</span></span>:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> - <li><span id="result_box" lang="uk"><span>Це відразу не виглядає чудово</span></span>; <span id="result_box" lang="uk"><span>давайте подивимося на вихідний код, щоб побачити, чи зможемо ми зрозуміти, чому (показано лише вміст body)</span></span>; - <pre class="brush: html"><h1>Приклади HTML дебаґінга</h1> - -<p><span class="short_text" id="result_box" lang="uk"><span>Що викликає помилки в HTML</span></span>? - -<ul> - <li>Незамкнені елементи: <span id="result_box" lang="uk"><span>Якщо елемент <strong> не закрито належним чином, - його ефект може поширюватися на ті області, які ви не мали наміру ним огортати.</span></span> - - <li><span id="result_box" lang="uk"><span>Погано вкладені елементи</span></span>: <span id="result_box" lang="uk"><span>правильне вставлення елементів також дуже важливо - для правильного кодування</span></span>. <strong>strong <em>виділено strong?</strong> - що це таке?</em> - - <li>Незакриті атрибути: <span id="result_box" lang="uk"><span>Інше поширене джерело HTML-проблем.</span> - <span>Давайте розглянемо приклад</span></span>: <a href="https://www.mozilla.org/>Посилання - на домашню сторінку Mozilla</a> -</ul></pre> - </li> - <li><span class="short_text" id="result_box" lang="uk"><span>Давайте розглянемо проблеми:</span></span> - <ul> - <li>{{htmlelement("p","paragraph")}} та {{htmlelement("li","list item")}} елементи не мають закриваючих тегів. <span id="result_box" lang="uk"><span>Дивлячись на зображення вище, це, здається, не вплинуло на рендеринг розмітки надто погано, оскільки легко визначити, де повинен закінчуватися один елемент, а інший повинен починатися.</span></span></li> - <li>Перший {{htmlelement("strong")}} елемент не має закриваючого тега. <span id="result_box" lang="uk"><span>Це дещо ускладнює, оскільки важко сказати, де елемент повинен закінчуватися.</span> <span>Фактично, всю решту тексту було виділено.</span></span></li> - <li><span class="short_text" id="result_box" lang="uk"><span>Цей розділ погано вкладено</span></span>: <code><strong>strong <em>виділено strong?</strong> що це таке?</em></code>. Складно сказати, як це було інтерпретовано із-за попередньої проблеми.</li> - <li>{{htmlattrxref("href","a")}} <span id="result_box" lang="uk"><span>Значення атрибута має відсутні подвійні лапки закриття.</span> <span>Це, здається, викликало найбільшу проблему - посилання взагалі не відображається.</span></span></li> - </ul> - </li> - <li><span id="result_box" lang="uk"><span>Тепер давайте подивимось на розмітку браузера, на відміну від розмітки в вихідному коді.</span> <span>Для цього ми можемо використовувати інструменти розробника веб-браузера.</span> <span>Якщо ви не знайомі з використанням інструментів розробника веб-браузера, перегляньте кілька хвилин</span></span> <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li> - <li><span id="result_box" lang="uk"><span>В інспекторі DOM ви можете дізнатись, як виглядає виділена розмітка</span></span>:<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> - <li><span id="result_box" lang="uk"><span>Використовуючи інспектора DOM, давайте розглянемо наш код докладно, щоб побачити, як веб-браузер намагався виправити наші помилки HTML (ми зробили огляд у Firefox, інші сучасні браузери повинні дати той самий результат)</span></span>: - <ul> - <li><span id="result_box" lang="uk"><span>У параграфах та пунктах списку були додані закриті теги</span></span>.</li> - <li><span id="result_box" lang="uk"><span>Не зрозуміло, де слід закрити перший елемент </span></span><code><strong></code>, <span id="result_box" lang="uk"><span>тому браузер обгорнув кожен окремий блок тексту своїм тегом strong, аж донизу документа!</span></span></li> - <li><span id="result_box" lang="uk"><span>Неправильне вкладення було виправлено браузером, як це</span></span>: - <pre class="brush: html"><strong>strong - <em>виділено strong?</em> -</strong> -<em> що це таке?</em></pre> - </li> - <li><span id="result_box" lang="uk"><span>Посилання з відсутніми подвійними лапками повністю вилучено.</span> <span>Останній елемент списку виглядає так</span></span> : - <pre class="brush: html"><li> - <strong>Незакриті атрибути: <span class="short_text" id="result_box" lang="uk"><span>Інше поширене джерело проблем з HTML</span></span>. - Давайте подивимось на приклад: </strong> -</li></pre> - </li> - </ul> - </li> -</ol> - -<h3 id="Валідація_HTML">Валідація HTML</h3> - -<p><span id="result_box" lang="uk"><span>Таким чином, ви можете побачити з наведеного вище прикладу, що ви дійсно хочете, щоб ваш HTML був добре сформований!</span> <span>Але як?</span> <span>У невеликому прикладі, подібному до вищенаведенного, легко пройти по строках та знайти помилки, а як при величезному, складному HTML-документі?</span></span></p> - -<p><span id="result_box" lang="uk"><span>Найкраща стратегія полягає в тому, щоб запустити HTML-сторінку за допомогою</span></span> <a href="https://validator.w3.org/">Markup Validation Service</a> — <span id="result_box" lang="uk"><span>сервісу, що створений та підтримується W3C, організацією, яка стежить за специфікаціями, що визначають HTML, CSS та інші веб-технології.</span> <span>Ця веб-сторінка приймає HTML-документ у вигляді входу, проходить через нього і дає вам звіт, в якому показує, що неправильно з вашим HTML</span></span>.</p> - -<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> - -<p><span id="result_box" lang="uk"><span>Щоб вказати HTML для перевірки, ви можете надати цьому сервісу адресу свого сайту, завантажити файл HTML або безпосередньо ввести якийсь HTML-код</span></span>.</p> - -<h3 id="Активне_навчання_перевірка_документа_HTML"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка документа HTML</span></span></h3> - -<p><span class="short_text" id="result_box" lang="uk"><span>Давайте спробуємо це з нашим</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p> - -<ol> - <li>По-перше, завантажте <a href="https://validator.w3.org/">Markup Validation Service</a> в одній із вкладок браузера, якщо вона ще не відкрита.</li> - <li>Перейдіть на вкладку <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> (Перевірити за прямим введенням).</li> - <li><span id="result_box" lang="uk"><span>Скопіюйте весь приклад коду документу (а не тільки body) і вставте його у велику область тексту, показану в </span></span> Markup Validation Service.</li> - <li>Натисніть кнопку <em>Check (Перевірити)</em>.</li> -</ol> - -<p><span class="short_text" id="result_box" lang="uk"><span>В результаті з'явиться список помилок та інша інформація</span></span>.</p> - -<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> - -<h4 id="Інтерпретація_повідомлень_про_помилки"><span class="short_text" id="result_box" lang="uk"><span>Інтерпретація повідомлень про помилки</span></span></h4> - -<p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p> - -<ul> - <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li> - <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li> - <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li> - <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li> - <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span> - <pre>приклад: <a href="https://www.mozilla.org/>Посилання на домашню сторінку Mozilla</a> ↩ </ul>↩ </body>↩</html></pre> - - <p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p> - </li> - <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li> - <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li> - <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li> - <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li> - <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span> - <pre>приклад: <a href="https://www.mozilla.org/>Посилання на домашню сторінк</pre> - </li> - <li> - <div class="note"> - <p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Атрибут, який не містить замикаючих </span></span><span lang="uk"><span>лап</span></span>о́<span lang="uk"><span>к, може призвести до відкритого елемента, оскільки решту документа інтерпретують як вміст атрибута.</span></span></p> - </div> - </li> - <li>"Незакритий елемент <code>ul</code>": Це не дуже корисно, як {{htmlelement("ul")}} елемент є закритим правильно. <span class="short_text" id="result_box" lang="uk"><span>Ця помилка виникає через те, що</span></span> {{htmlelement("a")}} елемент є незакритим, через відсутність кінцевих лапо́к.</li> -</ul> - -<p><span id="result_box" lang="uk"><span>Якщо ви не можете з'ясувати, що означає кожне повідомлення про помилку, не хвилюйтеся - хороша ідея - спробувати одночасно виправити кілька помилок.</span> <span>Потім спробуйте повторно підтвердити свій HTML, щоб показати, які помилки залишаються.</span> <span>Іноді виправлення попередньої помилки також позбуває інших повідомлень про помилку - деякі помилки часто можуть бути викликані однією проблемою, що тягне інші, як ефект доміно.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Ви будете знати, коли всі ваші помилки виправлені, коли ви побачите наступний банер у вашому виводі:</span></span></p> - -<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> - -<p><span id="result_box" lang="uk"><span>Тобто, "Документ перевірений відповідно до зазначених схем та додаткових обмежень, перевірених валідатором</span></span>".</p> - -<h2 id="Резюме">Резюме</h2> - -<p><span id="result_box" lang="uk"><span>Отже, у нас є вступ до дебаґінга в HTML, який повинен надати вам деякі корисні навички, щоб розраховувати, коли ви почнете налагоджувати CSS, JavaScript та інші типи коду пізніше в своїй кар'єрі.</span> <span>Це також означає завершення вивчення статей "Введення в модулі HTML" - тепер ви можете продовжувати тестування самостійно з нашими оцінками: перший з них за посиланням нижче.</span></span></p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/uk/learn/html/introduction_to_html/getting_started/index.html b/files/uk/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index d1250c915c..0000000000 --- a/files/uk/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,522 +0,0 @@ ---- -title: Початок роботи з HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - HTML - - Мова - - Основи - - Розмітка - - атрибути - - веб-сторінки - - для початківців - - елементи - - лапки - - символи - - теги - - українською мовою -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">У цій статті ми пояснимо найбільш базові поняття HTML — що таке елементи, атрибути та інші терміни, які ви могли чути, і яке завдання вони виконують. Ми покажемо, як побудований елемент HTML і з чого складається типова HTML-сторінка, а також пояснимо інші особливості мови. В процесі навчання ми будемо трохи бавитися з кодом, щоб вам було цікаво!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Базове знання комп'ютера, <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">встановлене основне програмне забезпечення</a>, базове розуміння <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">роботи з файлами</a>.</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.</td> - </tr> - </tbody> -</table> - -<h2 id="Що_таке_HTML">Що таке HTML?</h2> - -<p>{{glossary("HTML")}} (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це <em>мова розмітки</em>, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії {{glossary("Element", "елементів")}}, які ви використовуєте для того, щоб вкласти, загорнути чи <em>розмітити</em> частини сторінки, щоб вони мали певний вигляд. {{glossary("Tag", "Теги")}} можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту:</p> - -<p><code>Мій кіт дуже сердитий</code></p> - -<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу ({{htmlelement("p")}}):</p> - -<pre class="brush: html"><p>Мій кіт дуже сердитий</p></pre> - -<h2 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h2> - -<p>Погляньмо на елемент "параграф" детальніше. </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Основні частини елементу такі:</p> - -<ol> - <li><strong>Початковий тег:</strong> містить назву елементу (в цьому випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li> - <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у цьому випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li> - <li><strong>Вміст:</strong> вміст елементу, у цьому випадку — просто текст. </li> - <li><strong>Елемент:</strong> початковий тег разом із кінцевим тегом та вмістом між ними складають елемент.</li> -</ol> - -<h3 id="Активне_навчання_створення_вашого_першого_HTML-елементу">Активне навчання: створення вашого першого HTML-елементу</h3> - -<p>Відредагуйте рядок нижче у полі <em>Input, </em> загорнувши його тегами <code><em> </code>та <code></em></code> (поставте <code><em></code> на початку, щоб <em>відкрити елемент</em>, та <code></em></code> в кінці, щоб <em>закрити елемент</em>) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі <em>Output</em>.</p> - -<p>Якщо ви зробите помилку, ви можете завжди скинути редагування кнопкою <em>Reset</em>. Якщо ви справді застрягнете, натисніть кнопку <em>Show solution</em>, щоб побачити відповідь.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">This is my text.</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 2em; - padding: 10px; - border: 1px solid #0095dd; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<em>This is my text.</em>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> - -<h3 id="Вкладені_елементи">Вкладені елементи</h3> - -<p>Ви можете вкладати одні елементи всередину інших. Це називаєте <strong>вкладенням</strong>. Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p> - -<h3 id="Блокові_та_рядкові_елементи">Блокові та рядкові елементи</h3> - -<p>Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.</p> - -<ul> - <li>Блокові елементи утворюють блок на сторінці — вони розміщуються з нового рядка, незалежно від того, який елемент був перед ними, і кожен наступний після них елемент також буде розміщуватися у новому рядку. Блокові елементи найчастіше є структурними складовими сторінки, які представляють, наприклад, параграфи (абзаци), списки, меню навігації тощо. Блокові елементи не можуть вкладатися в рядковий елемент, але можуть вкладатися в інший блоковий елемент.</li> - <li>Рядкові елементи розміщують в блокових елементах і вони займають лише невеликі частини документу, а не цілі параграфи чи інші блоки. Рядковому елементу не потрібно починатися з нового рядка, зазвичай їх розміщують всередині параграфів, наприклад, посилання {{htmlelement("a")}} чи виділення {{htmlelement("em")}} та {{htmlelement("strong")}}.</li> -</ul> - -<p>Візьміть такий приклад:</p> - -<pre><code><em>перший</em><em>другий</em><em>третій</em> - -<p>четвертий</p><p>п'ятий</p><p>шостий</p></code></pre> - -<p>{{htmlelement("em")}} є рядковим елементом, тому перші три елементи розміщують в одному рядку, без відстаней між ними. Натомість {{htmlelement("p")}} є блоковим елементом, він розміщується з нового рядка і має відстані над і під ним (ці відстані визначаються у стиляхt <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, які браузер за замовчанням застосовує до параграфів).</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}</p> - -<div class="note"> -<p><strong>Примітка</strong>: HTML5 пропонує інший підхід до визначення категорій елементів (див. <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. </p> -</div> - -<div class="note"> -<p><strong>Примітка</strong>: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> та <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> -</div> - -<h3 id="Порожні_елементи">Порожні елементи</h3> - -<p>Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, {{htmlelement("img")}}, який вставляє зображення на те місце, куди він поставлений:</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>Такий вигляд він має на сторінці:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p> - -<h2 id="Атрибути">Атрибути</h2> - -<p>Елементи також можуть мати атрибути, які мають такий вигляд: </p> - -<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє надати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.</p> - -<p>Атрибут завжди повинен мати:</p> - -<ol> - <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li> - <li>Ім'я атрибута, за яким іде знак дорівнює.</li> - <li>Значення атрибута, загорнене в прямі лапки.</li> -</ol> - -<h3 id="Активне_навчання_додавання_атрибута_до_елемента">Активне навчання: додавання атрибута до елемента</h3> - -<p>Поглянемо на інший елемент — {{htmlelement("a")}} (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: </p> - -<ul> - <li><code>href</code>: значення цього атрибута визначає веб-адресу, куди саме буде вести посилання. Наприклад, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: цей атрибут містить додаткову інформацію про посилання, а саме назву сторінки, на яку веде посилання. Наприклад, <code>title="The Mozilla homepage"</code>. Ця назва буде з'являтися у вигляді підказки при наведенні курсором на посилання. </li> - <li><code>target</code>: цей атрибут визначає контекст переглядання сторінки в браузері. Наприклад, <code>target="_blank"</code> відобразить посилання в новій вкладці. Якщо ви хочете відкривати посилання в тій самій вкладці, просто опустіть цей атрибут.</li> -</ul> - -<p>Відредагуйте рядок нижче в полі <em>Input,</em>так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <code><a></code>, потім атрибути <code>href</code> і <code>title</code>. Насамкінець вкажіть значення атрибута <code>target, </code>так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі <em>Output</em>. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті <code>href</code> element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. </p> - -<p>Ви завжди можете скинути всі зміни кнопкою <em>Reset</em>. Також ви можете подивитися відповідь, натиснувши кнопку <em>Show solution</em>.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">&lt;p&gt;A link to my favourite website.&lt;/p&gt;</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 2em; - padding: 10px; - border: 1px solid #0095dd; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<p>A link to my <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> - -<h3 id="Булеві_атрибути">Булеві атрибути</h3> - -<p>Іноді ви можете побачити в коді лише назву атрибута, без вказаного значення. Це цілком нормальні атрибути, вони називаються булевими. Вони мають лише одне значення, зазвичай таке ж саме, як і назва самого атрибута. Для прикладу візьмемо атрибут {{htmlattrxref("disabled", "input")}}, який робить поля форми неактивними (засіреними), щоб користувачі не могли їх заповнити. </p> - -<pre><input type="text" disabled="disabled"></pre> - -<p>Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): </p> - -<pre class="brush: html"><input type="text" disabled> - -<input type="text"> -</pre> - -<p>Обидва записи дадуть такий результат: </p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p> - -<h3 id="Опускання_лапок_навколо_значень_атрибутів">Опускання лапок навколо значень атрибутів</h3> - -<p>Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут <code>href</code> так:</p> - -<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> - -<p>Однак, якщо ми додамо другий атрибут <code>title</code>, розмітка порушиться:</p> - -<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> - -<p>Таку розмітку браузер розуміє неправильно, вважаючи, що <code>title</code> — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, <code>Mozilla </code>і <code>homepage</code>. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. </p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}</p> - -<p>Ми радимо завжди писати атрибути в лапках, це дозволяє уникнути багатьох проблем і робить код більш читабельним. </p> - -<h3 id="Лапки_подвійні_чи_одинарні">Лапки подвійні чи одинарні?</h3> - -<p>У цій статті всі значення атрибутів загорнені в звичайні прямі лапки. Проте іноді ви можете побачити, що значення загортається прямими апострофами на початку і в кінці (одинарні лапки). Вживання перших і других в HTML є питанням смаку, ви можете сміливо використовувати ті лапки, які зручно. Обидва записи будуть рівноцінними.</p> - -<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:</p> - -<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:</p> - -<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.</p> - -<h2 id="Анатомія_HTML-документу">Анатомія HTML-документу</h2> - -<p>Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Тут ми маємо:</p> - -<ol> - <li><code><!DOCTYPE html></code>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, <span id="result_box" lang="uk"><span>що може означати автоматичну перевірку помилок та інші</span> <span>корисні речі.</span> <span>Доктайп приблизно такий вигляд</span></span>: - - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - <span id="result_box" lang="uk"><span>Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював</span></span> . <code><!DOCTYPE html></code> <span id="result_box" lang="uk"><span>це найкоротший рядок символів, який вважається валідним доктайпом;</span> <span>це все, що вам дійсно потрібно знати</span></span>.</li> - <li><code><html></html></code>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) <span id="result_box" lang="uk"><span>на всій сторінці, іноді його називають кореневим (root) елементом.</span></span></li> - <li><code><head></head></code>: Елемент {{htmlelement("head")}}. <span id="result_box" lang="uk"><span>Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки.</span> <span>Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо.</span> <span>Ви дізнаєтеся більше про це в наступній статті цієї серії.</span></span></li> - <li><code><meta charset="utf-8"></code>: <span id="result_box" lang="uk"><span>Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей.</span> <span>По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу.</span> <span>Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.</span></span></li> - <li><code><title></title></code>: Елемент {{htmlelement("title")}}. <span id="result_box" lang="uk"><span>Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.</span></span></li> - <li><code><body></body></code>: Елемент {{htmlelement("body")}}. <span id="result_box" lang="uk"><span>Цей елемент містить <em>весь</em> контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, чи це є текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.</span></span></li> -</ol> - -<h3 id="Активне_навчання_додавання_деяких_функцій_у_документ_HTML"><span id="result_box" lang="uk"><span>Активне навчання: додавання деяких функцій у документ HTML</span></span></h3> - -<p><span id="result_box" lang="uk"><span>Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:</span></span></p> - -<ol> - <li><span class="short_text" id="result_box" lang="uk"><span>Скопіюйте наведений вище приклад HTML сторінки</span></span>.</li> - <li><span class="short_text" id="result_box" lang="uk"><span>Створіть новий файл у текстовому редакторі</span></span>.</li> - <li><span class="short_text" id="result_box" lang="uk"><span>Вставте код у новий текстовий файл</span></span>.</li> - <li>Збережіть файл як <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Примітка</strong>: Ви також можете знайти цей основний HTML шаблон на <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p><span id="result_box" lang="uk"><span>Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як має вигляд відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат.</span> <span>Спочатку це матиме такий вигляд:</span></span></p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;"> <span id="result_box" lang="uk"><span>В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора </span></span>в цьому прикладі <span lang="uk"><span>показано лише зміст елемента</span></span> {{htmlelement("body")}}) Спробуйте зробити наступне:</p> - -<ul> - <li>За відкритим тегом елемента {{htmlelement("body")}} додайте головний заголовок для документу. Він повинен бути загорнутий поміж відкриваючого тега <code><h1></code> і закриваючого тега <code></h1></code>.</li> - <li><span id="result_box" lang="uk"><span>Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.</span></span></li> - <li><span id="result_box" lang="uk"><span>Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег </span></span><code><strong></code> і закриваючий тег <code></strong></code>.</li> - <li>Додайте посилання до свого абзацу, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">це було описано раніше в статті</a>.</li> - <li>Додайте зображення в свій документ перед абзацем, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">це було описано раніше в статті</a>. Ви можете вважати себе крутим хакером, якщо зможете використати іншу картинку (з власного комп'ютера або з Інтернету).</li> -</ul> - -<p><span id="result_box" lang="uk"><span>Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки </span></span><em>Reset</em>. <span id="result_box" lang="uk"><span>Якщо ви дійсно заплутались, натисніть кнопку</span></span> <em>Show solution</em>, щоб побачити відповідь.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"> -&lt;p&gt;This is my page&lt;/p&gt;</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; -} - -img { - max-width: 100%; -} - -.output { - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ - plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ - My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ -<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> - -<h3 id="Пробіли_в_HTML">Пробіли в HTML</h3> - -<p><span id="result_box" lang="uk"><span>У наведених вище прикладах, мабуть, ви помітили, що багато пробілів в коді - це взагалі не обов'язково;</span> <span>два наступні фрагменти коду є еквівалентними</span></span>:</p> - -<pre class="brush: html"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p><span id="result_box" lang="uk"><span>Незалежно від того, скільки пустого місця ви використовуєте (яке може містити пробіл, а також відступи рядків), HTML-аналізатор зменшує кожен з них до одного пробілу під час відтворення коду.</span> <span>Тож навіщо використовувати так багато пробілів?</span> <span>Відповідь - зручність читання - набагато легше зрозуміти, що відбувається у вашому коді, якщо у вас це чудово відформатовано, а не просто зібрано разом у великий хаос.</span> <span>У нашому HTML-коді кожен вкладений елемент має два пробіли, ніж той, в якому він розміщений всередині.</span> <span>Ви самі визначаєте стиль форматування, який ви використовуєте (скільки пробілів для кожного рівня відступу, наприклад), але ви повинні розглянути можливість використання якогось форматування.</span></span></p> - -<h2 id="Посилання_на_обєкт_включаючи_спеціальні_символи_в_HTML"><span id="result_box" lang="uk"><span>Посилання на об'єкт: включаючи спеціальні символи в HTML</span></span></h2> - -<p>В HTML символи <code><</code>, <code>></code>,<code>"</code>,<code>'</code> та <code>&</code> є спеціальними символами. <span id="result_box" lang="uk"><span>Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд</span> <span>або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?</span></span></p> - -<p><span id="result_box" lang="uk"><span>В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах.</span> <span>Кожне посилання символів починається з амперсанда (&), а закінчується двокрапкою (;).</span></span></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Буквений символ</th> - <th scope="col">Еквівалентне написання символів</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:</span></span></p> - -<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер <span id="result_box" lang="uk"><span>вважає, що другий елемент </span></span><code><p></code><span lang="uk"><span> починає новий абзац.</span> <span>Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.</span></span></p> - -<p>{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}</p> - -<div class="note"> -<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> -</div> - -<h2 id="Коментарі_HTML">Коментарі HTML</h2> - -<p><span id="result_box" lang="uk"><span>В HTML, як і у більшості мов програмування, існує механізм, доступний для написання коментарів у коді - коментарі браузером ігноруються і невидимі для користувача, їхня мета полягає у тому, щоб дозволити вам додавати коментарі до коду, щоб пояснити, як ваш</span> <span>код працює, що роблять різні частини коду тощо. Це може бути дуже корисним, якщо ви повернетеся до свого коду, над яким ви не працювали, наприклад, протягом шести місяців, і не пам'ятаєте, що ви робили, або якщо над вашим кодом ще хтось працював</span><span>.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами</span></span> <code><!--</code> та <code>--></code>, наприклад:</p> - -<pre class="brush: html"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p><span id="result_box" lang="uk"><span>Як ви можете побачити, перший абзац відображається на сторінці, а другий - ні.</span></span></p> - -<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p> - -<h2 id="Підсумок">Підсумок</h2> - -<p><span id="result_box" lang="uk"><span>Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML!</span> <span>На цьому етапі ви повинні розуміти, як має вигляд мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів.</span> <span>Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML.</span> <span>Залишайтеся на зв'язку!</span></span></p> - -<div class="note"> -<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або</span></span> <a href="/en-US/docs/Learn/CSS">CSS</a>. <span id="result_box" lang="uk"><span>CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь</span></span>.</p> -</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 7387e08725..0000000000 --- a/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,953 +0,0 @@ ---- -title: HTML text fundamentals -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Одне з головних завдань HTML полягає в тому, щоб надати текстову структуру та смислове значення (також відоме як {{glossary("семантика")}}) таким чином, щоб браузер міг відобразити зміст на сторінці коректно. У цій статті пояснюється, у який спосіб можна використовувати {{glossary("HTML")}}, щоб структурувати текст на сторінці, додавши заголовки та параграфи, підкреслюючи слова, створюючи списки та інше.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Передумови</span></span>:</th> - <td><span class="tlid-translation translation" lang="uk"><span title="">Базове знайомство з HTML, як описано в</span></span> <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>.</td> - </tr> - <tr> - <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Мета</span></span>:</th> - <td><span class="tlid-translation translation" lang="uk"><span title="">Дізнайтеся, як позначити основну сторінку тексту, щоб надати йому структуру та зміст - включаючи абзаци, заголовки, списки, акцент та цитати.</span></span></td> - </tr> - </tbody> -</table> - -<h2 id="Основа_заголовки_та_абзаци"><span class="tlid-translation translation" lang="uk"><span title="">Основа: заголовки та абзаци</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Найбільш структурований текст складається з заголовків і параграфів, незалежно від того, чи читаєте ви історію, газету, підручник з коледжу, журнал тощо.</span></span></p> - -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Структурований вміст полегшує та покращує досвід читання.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML кожен абзац повинен бути загорнутий у елемент {{htmlelement ("p")}}, так:</span></span></p> - -<pre class="brush: html"><p><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Я абзац,о так, це я.</span></span></p></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен заголовок має бути загорнутий в елемент заголовка:</span></span></p> - -<pre class="brush: html"><h1><span class="tlid-translation translation" lang="uk"><span title="">Я назва цієї історії.</span></span></h1></pre> - -<p>Є шість елементів заголовку — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, та {{htmlelement("h6")}}. <span class="tlid-translation translation" lang="uk"><span title="">Кожен елемент представляє інший рівень вмісту документа;</span></span><code><h1></code> <span class="tlid-translation translation" lang="uk"><span title="">являє собою основний заголовок</span></span>, <code><h2></code> <span class="tlid-translation translation" lang="uk"><span title="">представляє підзаголовки</span></span>, <code><h3></code> <span class="tlid-translation translation" lang="uk"><span title="">представляє наступні підзаголовки тощо.</span></span></p> - -<h3 id="Впровадження_структурної_ієрархії"><span class="tlid-translation translation" lang="uk"><span title="">Впровадження структурної ієрархії</span></span></h3> - -<p>Наприклад, у історії <h1> буде представляти назву історії, <h2> s представлятиме назву кожного розділу, а <h3> представлятиме підрозділи кожного розділу тощо.</p> - -<pre class="brush: html"><h1>Нищівна свердловина</h1> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Кріс Міллс</span></span></p> - -<h2>Розділ 1: Темна ніч</h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Це була темна ніч.</span> <span title="">Десь, сова вигукувала.</span> <span title="">Дощ обрушився на ...</span></span></p> - -<h2>Розділ 2: <span class="tlid-translation translation" lang="uk"><span title="">Вічна тиша</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Наш головний герой міг не стільки шепотом вийти з тіньової фігури ...</span></span></p> - -<h3><span class="tlid-translation translation" lang="uk"><span title="">Привид говорить</span></span></h3> - -<p>Минуло ще кілька годин, коли раптово, побачивши привида, випрямився і вигукнув: «Будь ласка, помилуй мою душу!"</p></pre> - -<p>Це дійсно залежить від вас, які саме елементи ви використовуєте, тоді ієрархія має сенс. Вам просто потрібно мати на увазі кілька найкращих практик, коли ви створюєте такі структури:</p> - -<ul> - <li><span class="tlid-translation translation" lang="uk"><span title="">Бажано просто використовувати один</span></span><code><h1></code> на сторінці — це заголовок верхнього рівня, а всі інші знаходяться нижче нього в ієрархії.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Переконайтеся, що ви використовуєте заголовки в правильному порядку в ієрархії.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Не використовуйте</span></span> <code><h3></code> <span class="tlid-translation translation" lang="uk"><span title="">для представлення підзаголовків, за якими йде</span></span><code><h2></code> для представлення підзаголовка - це не має сенсу і призведе до дивних результатів.</li> - <li>З доступних шести заголовків вам слід прагнути використовувати не більше трьох на сторінці, якщо ви відчуваєте, що це необхідно. Документи з багатьма рівнями (тобто глибока ієрархія заголовків) стають громіздкими і важкими для навігації. У таких випадках бажано поширювати вміст на кілька сторінок, якщо це можливо.</li> -</ul> - -<h3 id="Чому_нам_потрібна_структура"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна структура?</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб відповісти на це запитання, давайте подивимося на text-start.html - початкову точку нашого запущеного прикладу для цієї статті (хороший рецепт хумусу).</span> <span title="">це потрібно для вправ пізніше.</span> <span title="">В даний час у цьому документі міститься кілька фрагментів вмісту - вони не позначені жодним чином, але розділені проривами рядків (Enter / Return натиснуто, щоб перейти до наступного рядка).</span></span></p> - -<p>Однак, коли ви відкриваєте документ у вашому браузері, ви побачите, що текст з'являється суцільним шматком!</p> - -<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> - -<p><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Це пояснюється тим, що немає елементів, які б давали структуру контенту, тому браузер не знає, що є заголовок а що є абзацом. Крім того:</span></span></p> - -<ul> - <li><span class="tlid-translation translation" lang="uk"><span title="">Користувачі, які переглядають веб-сторінку, намагаються швидко сканувати, щоб знайти відповідний вміст, часто просто читаючи заголовки (звичайно</span></span> <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">витрачати дуже короткий час на веб-сторінці</a>). <span class="tlid-translation translation" lang="uk"><span title="">Якщо вони не бачать нічого корисного протягом декількох секунд, вони, швидше за все, будуть розчаровані і підуть в інше місце.</span></span></li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Пошукові системи, які індексують вашу сторінку, розглядають вміст заголовків як важливі ключові слова для впливу на рейтинги пошуку на сторінці.</span> <span title="">Без заголовків ваша сторінка буде працювати слабко</span></span> {{glossary("SEO")}} (Search Engine Optimization).</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Люди із серйозними порушеннями зору часто не читають веб-сторінки;</span> <span title="">вони слухають їх.</span> <span title="">Це робиться за допомогою програмного забезпечення, що називається </span></span> <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Це програмне забезпечення надає способи отримати швидкий доступ до заданого текстового вмісту. Серед різних методів, які вони використовують, вони надають план документа, читаючи заголовки, дозволяючи користувачам швидко знайти потрібну інформацію. Якщо заголовки не доступні, вони будуть змушені слухати весь документ, прочитаний вголос.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Щоб відтворити вміст за допомогою</span></span> {{glossary("CSS")}}, <span class="tlid-translation translation" lang="uk"><span title="">або зробити з нею цікаві речі</span></span>{{glossary("JavaScript")}}, потрібно мати елементи, які відокремлюють відповідний вміст, тому CSS / JavaScript може бути ефективним рішенням.</li> -</ul> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Тому нам необхідно надати нашому контенту структурну розмітку.</span></span></p> - -<h3 id="Активне_навчання_Надання_нашої_структури_змісту">Активне навчання: Надання нашої структури змісту</h3> - -<p>Давайте розглянемо живой приклад. У наведеному нижче прикладі додайте елементи до вихідного тексту у полі Введення так, щоб він з'являвся у вигляді заголовка та двох абзаців у полі Вивід.</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки скидання.</span> <span title="">Якщо ви застрягли, натисніть кнопку Показати рішення, щоб побачити відповідь.</span></span></p> - -<div class="hidden"> -<h6 id="Відтворюваний_код"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> - -<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> -<p class="a11y-label"><span class="tlid-translation translation" lang="uk"><span title="">Натисніть Esc, щоб перемістити фокус в сторону від області кодування (вкладка вставляє символ табуляції).</span></span></p> - -<textarea id="code" class="input" style="min-height: 100px; width: 95%"><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Моя коротка історія. Я поліцейський, і мене звуть Тріш.</span></span> - -<span class="tlid-translation translation" lang="uk"><span title="">Мої ноги зроблені з картону, і я одружений на рибі</span></span>.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// клавіша зупинки табуляції в текстовій області -// замість цього напишіть tab в позиції каретки - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// <span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span> -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Чому_нам_потрібна_семантика"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна семантика?</span></span></h3> - -<p>Семантика всюди навколо нас - ми покладаємося на попередній досвід, щоб розповісти вам, що таке функція повсякденних об'єктів; коли ми щось бачимо, ми знаємо, якою буде її функція. Так, наприклад, ми очікуємо, що червоний світлофор означає "зупинка", а зелений світлофор означає "іти". Речі можуть бути дуже складними дуже швидко, якщо застосовується неправильна семантика (чи будь-яка країна використовує червоний, щоб означати "йти"?</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд.</span> <span title="">У цьому контексті елемент {{htmlelement ("h1")}} також є семантичним елементом, який надає тексту, який він обертає навколо ролі (або значення) "заголовка верхнього рівня на вашій сторінці".</span></span></p> - -<pre class="brush: html"><h1><span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня</span></span></h1></pre> - -<p>За замовчуванням браузер надасть йому великий розмір шрифту для того, щоб він виглядав як заголовок (хоча ви могли б такий стиль текста, могли отримати, використовуючи CSS). Більш важливо, що його семантичне значення буде використовуватися кількома способами, наприклад, пошуковими системами та програмами для читання з екрана (як згадано вище).</p> - -<p>З іншого боку, ви можете зробити будь-який елемент схожим на елемент верхнього рівня. Розгляньте наступне:</p> - -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;"><span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня?</span></span></span></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Це елемент {{htmlelement ("span")}}.</span> <span title="">Вона не має семантики.</span> <span title="">Ви використовуєте його, щоб загорнути вміст, коли ви хочете застосувати до нього CSS (або зробити щось із цим за допомогою JavaScript), не надаючи йому жодного додаткового сенсу (про це пізніше ви знайдете в курсі.) Ми застосували деякі</span> <span title="">CSS, щоб він виглядав як заголовок верхнього рівня, але оскільки він не має семантичного значення, він не отримає жодної з додаткових переваг, описаних вище.</span> <span title="">Це гарна ідея використовувати відповідний елемент HTML для завдання.</span></span></p> - -<h2 id="Списки"><span class="tlid-translation translation" lang="uk"><span title="">Списки</span></span></h2> - -<p>Тепер звернемо увагу до списків. Списки знаходяться в усьому нашому житті - від списку покупок до списку напрямків, які ви підсвідомо дотримуєтеся, щоб дістатися до вашого будинку щодня, до списків інструкцій, які ви дотримуєтеся в цих підручниках! Списки знаходяться всюди в Інтернеті, і ми маємо три різні типи, про які потрібно знати.</p> - -<h3 id="Невпорядкований"><span class="tlid-translation translation" lang="uk"><span title="">Невпорядкований</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Невпорядковані списки використовуються для позначення списків пунктів, для яких не має значення порядок позицій - візьмемо, наприклад, список покупок.</span></span></p> - -<pre>молоко -<span class="tlid-translation translation" lang="uk"><span title="">яйця</span></span> -хліб -<span class="tlid-translation translation" lang="uk"><span title="">гумус</span></span></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен невпорядкований список починається з елемента {{htmlelement ("ul")}}, який обертається навколо всіх елементів списку:</span></span></p> - -<pre class="brush: html"><ul> -молоко -яйцчя -хліб -гумус -</ul></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Останнім кроком є перенесення кожного елемента списку в елемент {{htmlelement ("li")}} (елемент списку):</span></span></p> - -<pre class="brush: html"><ul> - <li>молоко</li> - <li>яйцчя</li> - <li>хліб</li> - <li>гумус</li> -</ul></pre> - -<h4 id="Активне_навчання_розмітка_невпорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка невпорядкованого списку</span></span></h4> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-невпорядкований список.</span></span></p> - -<div class="hidden"> -<h6 id="Відтворюваний_код_2"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> - -<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> -<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p> - -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> -молоко -яйця -хліб -гумус -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -//<span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span> -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Замовлено"><span class="tlid-translation translation" lang="uk"><span title="">Замовлено</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Упорядковані списки - це списки, в яких має значення порядок елементів - приведемо приклад набору напрямків:</span></span></p> - -<pre><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span> -<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span> -Ідіть прямо по перших двох роз'їздів -<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span> -Школа знаходиться справа від вас, 300 метрів вперед по дорозі</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Структура розмітки така ж, як і для невпорядкованих списків, за винятком того, що ви повинні обернути елементи списку в </span></span>елемент {{htmlelement("ol")}},<span class="tlid-translation translation" lang="uk"><span title=""> а не</span></span> <code><ul></code>:</p> - -<pre class="brush: html"><ol> - <li><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span></li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span></li> - <li>Ідіть прямо по перших двох роз'їздів</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span></li> - <li>Школа знаходиться справа від вас, 300 метрів вперед по дорозі</li> -</ol></pre> - -<h4 id="Активне_навчання_розмітка_впорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка впорядкованого списку</span></span></h4> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-список.</span></span></p> - -<div class="hidden"> -<h6 id="Відтворюваний_код_3"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> - -<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> -<p class="a11y-label">Натисніть Esc <span class="tlid-translation translation" lang="uk"><span title="">для переміщення фокусу з області коду (Tab вставляє символ табуляції).</span></span></p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road -<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span> -Пройдіть прямо по перших двох роз'їздів -<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span> -Школа знаходиться справа від вас, 300 метрів вперед по дорозі</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<ol>\n<li><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span></li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Активне_навчання_Розмітка_сторінки_рецепта"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: Розмітка сторінки рецепта</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Таким чином, на даний момент у статті, у вас є вся інформація, необхідна для позначення нашого прикладу сторінки рецептів.</span> <span title="">Ви можете зберегти локальну копію нашої</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> <span class="tlid-translation translation" lang="uk"><span title="">запустіть файл і виконайте роботу там, або зробіть це в прикладі, що можна редагувати нижче.</span> <span title="">Можливо, це краще робити локально, оскільки ви зможете зберегти роботу, яку ви виконуєте, тоді як, якщо ви заповните її у редагований приклад, вона буде втрачена під час наступного відкриття сторінки.</span> <span title="">Обидва варіанти мають плюси і мінуси.</span></span></p> - -<div class="hidden"> -<h6 id="Відтворюваний_код_4"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> - -<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> -<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%"><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Швидкий рецепт гумусу</span></span> - - <span class="tlid-translation translation" lang="uk"><span class="alt-edited">Цей рецепт робиться швидко</span></span>, смачний гумус, <span class="tlid-translation translation" lang="uk"><span title="">без плутанини</span></span>. <span class="tlid-translation translation" lang="uk"><span title="">Він був адаптований з ряду різних рецептів, які я читав протягом багатьох років.</span></span> - - Гумус - це смачна товста паста, яка широко використовується в стравах грецької та близькосхідної кухні. Це дуже смачно з салатом, м'ясом на грилі та хлібом Пітта. - -Інгредієнти - 1 <span class="tlid-translation translation" lang="uk"><span title="">банку (400 г) гороху (квасолі)</span></span> - 175g <span class="tlid-translation translation" lang="uk"><span title="">тахіні</span></span> - 6 <span class="tlid-translation translation" lang="uk"><span title="">сушених помідорів</span></span> -<span class="tlid-translation translation" lang="uk"><span title=""> Половина червоного перцю</span></span> - <span class="tlid-translation translation" lang="uk"><span title="">Щіпка кайенского перцю</span></span> - <span class="tlid-translation translation" lang="uk"><span title="">1 зубчик часнику</span></span> - Трохи оливкової олії - - <span class="tlid-translation translation" lang="uk"><span title="">Інструкції</span></span> - - Видаліть шкіру з часнику і грубо наріжте - Видаліть все насіння і стебло з перцю і грубо наріжте - <span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн</span></span> - Переробіть всі інгредієнти в пасту. - Якщо ви хочете грубий "кремезний" гумус, обробляйте його на короткий час - <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете гладкий хумус, обробляйте його довше</span></span> - - <span class="tlid-translation translation" lang="uk"><span title="">Для іншого смаку, ви можете спробувати змішати в невеликій мірі лимон і коріандр, перець чилі, лайм і chipotle, harissa і м'ята, або шпинат і сир фета.</span> <span title="">Експериментуйте і подивіться, що працює для вас.</span></span> - - <span class="tlid-translation translation" lang="uk"><span title="">Зберігання</span></span> - - Завантажте готовий хумус в герметичний контейнер. Ви маєте можливість використовувати його протягом тижня після того, як ви його зробили. Якщо він починає шипувати, то обов'язково викиньте його. - - Гумус підходить для заморожування; Ви повинні заморозити його і використовувати протягом декількох місяців.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> приклад на нашому github репозиторії.</p> - -<h3 id="Вкладені_списки"><span class="tlid-translation translation" lang="uk"><span title="">Вкладені списки</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Цілком нормально вкласти один список у інший.</span> <span title="">Ви, можливо, захочете, щоб деякі підпункти знаходились під верхным рівнем.</span> <span title="">Візьмемо другий список з нашого прикладу рецептів:</span></span></p> - -<pre class="brush: html"><ol> - <li>Видаліть шкіру з часнику і грубо наріжте.</li> - <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span></li> - <li>Переробіть всі інгредієнти в пасту.</li> - <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li> - <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li> -</ol></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки останні дві кулі дуже тісно пов'язані з тією, що була перед ними (вони читаються, як під-інструкції або варіанти, які підходять нижче цієї кулі), може мати сенс вкладати їх у свій власний невпорядкований список і розміщувати цей список всередині</span> <span title="">четверта куля.</span> <span title="">Це виглядатиме так:</span></span></p> - -<pre class="brush: html"><ol> - <li>Видаліть шкіру з часнику і грубо наріжте.</li> - <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span></li> - <li>Переробіть всі інгредієнти в пасту. - <ul> - <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li> - <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li> - </ul> - </li> -</ol></pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте повернутися до попереднього активного прикладу навчання та оновити другий список, подібний до цього.</span></span>late</p> - -<h2 id="Акцент_і_важливість"><span class="tlid-translation translation" lang="uk"><span title="">Акцент і важливість</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У людській мові ми часто підкреслюємо певні слова, щоб змінити зміст речення, і ми часто хочемо позначити певні слова як важливі або різні.</span> <span title="">HTML надає різні семантичні елементи, які дозволяють нам розмічати текстовий вміст з такими ефектами, і в цьому розділі ми розглянемо деякі з найбільш поширених.</span></span></p> - -<h3 id="Акцент"><span class="tlid-translation translation" lang="uk"><span title="">Акцент</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Коли ми хочемо додати акцент у розмовній мові, ми підкреслюємо певні слова, тонко змінюючи сенс того, що ми говоримо.</span> <span title="">Аналогічно, у письмовій мові ми схильні підкреслювати слова, виділяючи їх курсивом.</span> <span title="">Наприклад, наступні два речення мають різне значення.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Я радий, що ви не запізнилися.</span></span></p> - -<p>Я <em>радий</em>, що ви не <em>запізнилися</em>.</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Перше речення звуки справді полегшено, що людина не запізнився.</span> <span title="">Навпаки, другий звучить саркастично або пасивно-агресивно, висловлюючи досаду, що людина прибула трохи пізно.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML ми використовуємо елемент {{htmlelement ("em")}} (вираз) для позначення таких екземплярів.</span> <span title="">Окрім того, що документ є цікавішим для читання, вони розпізнаються читачами екрану та висловлюються іншим тоном голосу.</span> <span title="">Браузери за замовчуванням створюють цей стиль як курсив, але ви не повинні використовувати цей тег, щоб отримати стиль курсиву.</span> <span title="">Для цього потрібно використовувати елемент {{htmlelement ("span")}} і деякий CSS, або, можливо, елемент {{htmlelement ("i")}} (див. Нижче).</span></span></p> - -<pre class="brush: html"><p>Я <em><span class="tlid-translation translation" lang="uk"><span title="">радий</span></span></em>, що ви не <em><em>запізнилися</em></em>.</p></pre> - -<h3 id="Велике_значення"><span class="tlid-translation translation" lang="uk"><span title="">Велике значення</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб підкреслити важливі слова, ми прагнемо підкреслити їх у розмовній мові і сміливо їх писати.</span> <span title="">Наприклад:</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Ця рідина</span></span> <strong>дуже токсична.</strong></p> - -<p>Я розраховую на вас. <strong>Не</strong> запізнюйтеся!</p> - -<p>У HTML ми використовуємо {{htmlelement("strong")}} (strong важливий) елемент для позначення таких випадків. Окрім того, що документ стане більш корисним, вони знову розпізнаються читачами екрану та говорять різним тоном голосу. За умовчанням у браузерах цей текст виділено напівжирним шрифтом, але ви не повинні використовувати цей тег лише для отримання жирного стилю. Для цього потрібно використати {{htmlelement("span")}} елемент і деякі CSS, або, можливо,елемент{{htmlelement("b")}} (дивись нижче.)</p> - -<pre class="brush: html"><p>Ця рідина є <strong>дуже токсичною</strong>.</p> - -<p>Я розраховую на вас. <strong>Не </strong> запізнюйтесь!</p></pre> - -<p><strong><strong>За бажанням можна вмонтовувати strong і акцентувати всередині один одного:</strong></strong></p> - -<pre class="brush: html"><p>Ця рідина є <strong>дуже токсичною</strong> — -якщо ви її вип'єте, <strong>Ви можете <em>померти</em></strong>.</p></pre> - -<h3 id="Активне_навчання_Давайте_будемо_уважними!">Активне навчання: Давайте будемо уважними!</h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі активного навчання ми надали приклад, який можна редагувати.</span> <span title="">Усередині неї ми хотіли б, щоб ви спробували додати акцент і важливе значення словам, які ви вважаєте потрібними їм, просто щоб мати певну практику.</span></span></p> - -<div class="hidden"> -<h6 id="Відтворюваний_код_5"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> - -<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> -<p class="a11y-label">Натисніть Esc <span class="tlid-translation translation" lang="uk"><span class="alt-edited">щоб перемістити фокус з області коду (Tab вставить символ табуляції)</span></span>.</p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> -<p><span class="tlid-translation translation" lang="uk"><span title="">У неділю 9 січня 2010 року була банда готів</span> - <span title="">плямистий крадіжка декількох садових гномів з</span> - <span title="">торговий центр в центрі міста Мілуокі.</span> <span title="">Вони були</span> - <span title="">все носять зелені комбінезони і дурні капелюхи, і</span> - <span title="">здавалося, мав кит часу.</span> <span title="">Якщо хто</span> - <span title="">будь-яка інформація про цей інцидент, будь ласка</span> - <span title="">зараз звертайтеся до поліції.</span></span></p></textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Курсив_жирний_підкреслений_..."><span class="tlid-translation translation" lang="uk"><span title="">Курсив, жирний, підкреслений ...</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Елементи, які ми обговорювали до цих пір, мають чітко виражену семантику.</span> <span title="">Ситуація з </span></span>{{htmlelement("b")}}, {{htmlelement("i")}}, та {{htmlelement("u")}} <span class="tlid-translation translation" lang="uk"><span title="">дещо складніше. Вони прийшли так, щоб люди могли писати напівжирний, курсив або підкреслений текст в епоху, коли CSS все ще підтримувався погано або зовсім не підтримувався.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Такі елементи, які впливають лише на презентацію, а не на семантику, відомі як елементи презентації і більше не повинні використовуватися, оскільки, як ми бачили раніше, семантика настільки важлива для доступності, SEO та ін.</span></span></p> - -<p>HTML5 <span class="tlid-translation translation" lang="uk"><span title="">перевизначено</span></span> <code><b></code>, <code><i></code> та <code><u></code> <span class="tlid-translation translation" lang="uk"><span title="">з новими, дещо заплутаними, семантичними ролями.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Ось найкраще правило: скоріше за все доцільно використовувати <b>, <i> або <u>, щоб передати значення, яке традиційно передається жирним шрифтом, курсивом або підкресленням, за умови, що немає більш відповідного елемента.</span> <span title="">Тим не менш, завжди залишається критично важливим збереження мислення доступності.</span> <span title="">Концепція курсиву не дуже корисна людям, які використовують читання з екрану, або людям, які використовують систему письма, окрім латинського алфавіту.</span></span></p> - -<ul> - <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('i')}} використовується для передачі значення, яке традиційно передається курсивом: іноземні слова, таксономічне позначення, технічні терміни, думка ...</span></span></li> - <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...</span></span></li> -</ul> - -<div class="note"> -<p><span class="tlid-translation translation" lang="uk"><span title="">Попередження про підкреслення: люди пов'язують підкреслення з гіперпосиланнями.</span> <span title="">Тому в Інтернеті краще підкреслити лише посилання.</span> <span title="">Використовуйте елемент <u>, якщо він семантично доречний, але розгляньте можливість використання CSS для зміни підкресленого підкреслення на щось більш доречне в Інтернеті.</span> <span title="">Наведений нижче приклад ілюструє, як це можна зробити.</span></span></p> -</div> - -<pre class="brush: html"><!-- <span class="tlid-translation translation" lang="uk"><span title="">наукові назви </span></span>--> -<p> - <span class="tlid-translation translation" lang="uk"><span title="">Рубінова колібрі (<i> Archilochus colubris </i>)</span> - <span title="">є найбільш поширеним колібром у Східній Північній Америці. -</p> - -<!-- <span class="tlid-translation translation" lang="uk"><span title="">іноземні слова</span></span> --> -<p> - <span class="tlid-translation translation" lang="uk"><span title="">Меню було морем екзотичних слів</span></span> <i lang="uk-latn">ватрушка</i>, - <i lang="id">nasi goreng</i> та <i lang="fr">soupe à l'oignon</i>. -</p> - -<!-- відоме неправильне написання --> -<p> - Коли-небудь я дізнаюся, як це зробити <u>spel</u> better. -</p> - -<!-- Виділіть ключові слова в наборі інструкцій --> -<ol> - <li> - <b>Фрагмент</b> два шматки хліба з буханки. - </li> - <li> - <b>Вставити</b> шматочок томата і лист салату між шматочками хліба. - </li> -</ol> -</span></span> -</pre> - -<h2 id="Підсумок"><strong>Підсумок</strong></h2> - -<p>Ось це зараз! Ця стаття повинна була дати вам гарне уявлення про те, як почати розмітку тексту в HTML, і познайомили вас з деякими з найважливіших елементів у цій області. Існує набагато більше семантичних елементів для висвітлення в цій області, і ми розглянемо набагато більше в нашій статті "Більше семантичних елементів", що пізніше буде в курсі. У наступній статті ми детально розглянемо, як <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> створювати гіперпосилання </a>, можливо, найважливіший елемент на Web.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> - -<h2 id="У_цьому_модулі"><strong>У цьому модулі</strong></h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи тексту HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документа та веб-сайту</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Налагодження HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка літери</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">вмісту</a></li> -</ul> diff --git a/files/uk/learn/html/introduction_to_html/index.html b/files/uk/learn/html/introduction_to_html/index.html deleted file mode 100644 index 9b9ee8d4a6..0000000000 --- a/files/uk/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Вступ до HTML -slug: Learn/HTML/Introduction_to_HTML -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{glossary("HTML")}} є відносно простою мовою. Вона складається з <a href="https://developer.mozilla.org/uk/docs/Glossary/Element">елементів</a>, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a></em>, і розуміння того, як створювати і керувати файлами, як описано в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em> — обидві статті є частинами розділу <em><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з вебом</a></em>.</p> - -<div class="note"> -<p><strong>Примітка:</strong> якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Посібники">Посібники</h2> - -<p>Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.</p> - -<dl> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></dt> - <dd>Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></dt> - <dd><a href="https://developer.mozilla.org/uk/docs/Glossary/Head">Head</a> в HTML-документі є частиною, яка <strong>не відображається</strong> в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як {{htmlelement("title")}}, посилання на {{glossary("CSS")}} (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML-тексту</a></dt> - <dd>Одним із основних завдань HTML є надання текстового значення (також відомого як <a href="https://developer.mozilla.org/uk/docs/Glossary/Semantics">семантика</a>), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></dt> - <dd>Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></dt> - <dd>В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML тексту</a>. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документу та веб-сайту</a></dt> - <dd>Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Відлагодження HTML</a></dt> - <dd>Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.</dd> -</dl> - -<h2 id="Оцінки">Оцінки</h2> - -<p>Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.</p> - -<dl> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка/Форматування листа</a></dt> - <dd>Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.</dd> - <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Структурування сторінки змісту</a></dt> - <dd>Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).</dd> -</dl> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основи веб-грамотності 1</a></dt> - <dd>Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі <em>Вступ до HTML</em>. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.</dd> -</dl> diff --git a/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 42e16b709c..0000000000 --- a/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Що в head? Метадані в HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -tags: - - CSS - - HTML - - head - - Заголовок - - Мова - - Основи - - Розмітка - - веб-сторінки - - голова - - для початківців - - значки - - мета -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Елемент {{glossary("Head", "head")}} <span id="result_box" lang="uk"><span>документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки</span></span>. Він <span id="result_box" lang="uk"><span>містить таку інформацію, як назва сторінки </span></span>{{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на власні іконки та інші метадані (<span id="result_box" lang="uk"><span>дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою</span></span>.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Знання основ HTML, як описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>.</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td><span id="result_box" lang="uk"><span>Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.</span></span></td> - </tr> - </tbody> -</table> - -<h2 id="Що_таке_заголовок_(head)_HTML">Що таке заголовок (head) HTML?</h2> - -<p>Давайте перейдемо до простого <a href="/uk/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML документу, який ми розглянули в попередній статті</a>:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — <span id="result_box" lang="uk"><span>на відміну від вмісту елемента</span></span> {{htmlelement("body")}} (<span id="result_box" lang="uk"><span>яке відображається на сторінці при завантаженні в браузері),</span> <span>вміст head не відображається на сторінці</span></span>. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. <span id="result_box" lang="uk"><span>У наведеному вище прикладі заголовок досить малий</span></span>:</p> - -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>My test page</title> -</head></pre> - -<p><span id="result_box" lang="uk"><span>Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою</span></span> <a href="/uk/docs/Learn/Discover_browser_developer_tools">інструментів розробника</a> перевірте вміст заголовку. <span id="result_box" lang="uk"><span>Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними.</span> <span>Давайте розпочнемо.</span></span></p> - -<h2 id="Додавання_назви_сторінки">Додавання назви сторінки</h2> - -<p><span id="result_box" lang="uk"><span>Ми вже бачили елемент</span></span> елемент {{htmlelement("title")}} в дії — він<span id="result_box" lang="uk"><span> може бути використаний для додавання назви (title) документа.</span> <span>Однак його можна зплутати з елементом</span></span> {{htmlelement("h1")}}, який <span id="result_box" lang="uk"><span>використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки.</span> <span>Але це різні речі!</span></span></p> - -<ul> - <li>Елемент {{htmlelement("h1")}} <span id="result_box" lang="uk"><span>з'являється на сторінці, коли завантажується в браузері - зазвичай його слід використовувати лише один раз на сторінці, щоб позначити заголовок вмісту сторінки (заголовок статті, заголовок новин або все, що підходить для змісту).</span></span></li> - <li>Елемент {{htmlelement("title")}} - <span id="result_box" lang="uk"><span>це метадані, які являють собою заголовок (назву) всього документа HTML (а не змісту документа</span></span>).</li> -</ul> - -<h3 id="Активне_навчання_перевірка_простого_прикладу"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка простого прикладу</span></span></h3> - -<ol> - <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш</span></span> GitHub репозиторій та завантажили копію нашої <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html сторінки</a>. Для цього також - - <ol> - <li><span id="result_box" lang="uk"><span>Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці</span></span>.</li> - <li>Натисніть кнопку "Raw" на сторінці, <span id="result_box" lang="uk"><span>яка призведе до появи вихідного коду на новій вкладці веб-браузера</span></span>. <span id="result_box" lang="uk"><span>Потім виберіть у меню вашого браузера</span></span> <em>Файл > Зберегти як...</em> <span id="result_box" lang="uk"><span>а потім виберіть місце для збереження файлу</span></span>.</li> - </ol> - </li> - <li><span id="result_box" lang="uk"><span>Тепер відкрийте файл у своєму веб-браузері.</span> <span>Ви повинні побачити щось подібне</span></span>: - <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Тепер повинно бути абсолютно зрозуміло, в чому різниця між </span></span><code><h1></code> та <code><title></code>!</p> - </li> - <li><span id="result_box" lang="uk"><span>Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері.</span> Поекспериментуйте з<span> кодом, змінюючи його!</span></span></li> -</ol> - -<p>Зміст елементу <code><title></code> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки<em> > Закласти цю сторінку </em>або значок зірки в адресному рядку в Firefox), ви побачите зміст <code><title></code> <span id="result_box" lang="uk"><span>заповнений як назва закладки.</span></span></p> - -<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> - -<p>Вміст <code><title></code> <span id="result_box" lang="uk"><span>також використовується в результатах пошуку, як ви побачите нижче</span></span>.</p> - -<h2 id="Метадані_елемент_<meta>">Метадані: елемент <meta></h2> - -<p><span id="result_box" lang="uk"><span>Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент</span></span> {{htmlelement("meta")}}. <span id="result_box" lang="uk"><span>Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані.</span> <span>Існує багато різних типів елементів</span></span> <code><meta></code> <span id="result_box" lang="uk"><span>які можуть бути включені в </span></span><head> вашої сторінки, <span id="result_box" lang="uk"><span>але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати.</span> <span>Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.</span></span></p> - -<h3 id="Визначення_кодування_символів_документа"><span class="short_text" id="result_box" lang="uk"><span>Визначення кодування символів документа</span></span></h3> - -<p><span id="result_box" lang="uk"><span>У прикладі, показаному вище, цей рядок також включений</span></span>:</p> - -<pre class="brush: html"><meta charset="utf-8"></pre> - -<p><span id="result_box" lang="uk"><span>Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати.</span></span> <code>utf-8</code> <span id="result_box" lang="uk"><span>- це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови.</span> <span>Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову;</span> <span>тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте!</span> <span>Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:</span></span></p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Якщо ви встановите кодування символів, наприклад, </span></span><code>ISO-8859-1</code>, (<span id="result_box" lang="uk"><span>набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:</span></span></p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> - -<h3 id="Активне_навчання_експеримент_із_кодуванням_символів"><span id="result_box" lang="uk"><span>Активне навчання: експеримент із кодуванням символів</span></span></h3> - -<p><span id="result_box" lang="uk"><span>Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі </span></span> <code><title></code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), <span class="short_text" id="result_box" lang="uk"><span>спробуйте змінити значення мета-кодування на</span></span> <code>ISO-8859-1</code>, <span id="result_box" lang="uk"><span>і додайте японську мову на свою сторінку.</span> <span>Це текст, який ми використовували</span></span> (до речі, там написано "рис гарячий"):</p> - -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> - -<h3 id="Додавання_автора_та_опису"><span class="short_text" id="result_box" lang="uk"><span>Додавання автора та опису</span></span></h3> - -<p>Багато елементів <code><meta></code> містять атрибути <code>name</code> та <code>content</code>:</p> - -<ul> - <li><code>name</code> <span id="result_box" lang="uk"><span>вказує тип мета-елемента;</span> <span>який тип інформації він містить</span></span>.</li> - <li><code>content</code> вказує актуальний мета контент.</li> -</ul> - -<p><span id="result_box" lang="uk"><span>Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки.</span> <span>Давайте подивимось на приклад:</span></span></p> - -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="<span id="result_box" lang="ru"><span>Учбовий центр MDN спрямований на те, -щоб надати всім новачкам в Інтернеті все, що їм необхідно знати, -щоб приступити до розробки веб-сайтів і додатків.</span></span>"></pre> - -<p><span id="result_box" lang="uk"><span>Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст.</span> <span>Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються </span></span><a href="/uk/docs/Glossary/SEO">Пошуковою оптимізацією</a>, або {{glossary("SEO")}}.)</p> - -<h3 id="Активне_навчання_використання_опису_в_пошукових_системах"><span id="result_box" lang="uk"><span>Активне навчання: використання опису в пошукових системах</span></span></h3> - -<p><span id="result_box" lang="uk"><span>Опис також використовується на сторінках результатів пошуку.</span> <span>Давайте пройдемо вправу, щоб вивчити це</span></span>:</p> - -<ol> - <li>Перейдіть на <a href="https://developer.mozilla.org/uk/">головну сторінку Mozilla Developer Network</a>.</li> - <li>Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть <em>Програмний код сторінки (View Page Source)</em> із контекстного меню.</li> - <li><span class="short_text" id="result_box" lang="uk"><span>Знайдіть опис метатегів.</span> <span>Він буде виглядати так</span></span>: - <pre class="brush: html"><meta name="description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both -Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> - </li> - <li>Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) <span id="result_box" lang="uk"><span>Ви помітите опис елементів вмісту</span></span> <code><meta></code> та <code><title></code>, <span id="result_box" lang="uk"><span>що використовуються в результатах пошуку</span></span> — безумовно їх варто вказувати! - <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> - </li> -</ol> - -<div class="note"> -<p><strong>Примітка</strong>: В <span id="result_box" lang="uk"><span>Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (</span></span>sitelinks<span lang="uk"><span>) і налаштовуються в інструментах Google для веб-майстрів</span></span> <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — <span id="result_box" lang="uk"><span>це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.</span></span></p> -</div> - -<div class="note"> -<p><strong>Примітка</strong>: Багато функцій <code><meta></code> більше не використовуються. Наприклад, ключове слово <code><meta></code> елемента (<code><meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут"></code>) — <span id="result_box" lang="uk"><span>який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.</span></span></p> -</div> - -<h3 id="Інші_типи_метаданих"><span class="short_text" id="result_box" lang="uk"><span>Інші типи метаданих</span></span></h3> - -<p><span id="result_box" lang="uk"><span>Мандруючи Інтернетом ви також можете знайти інші типи метаданих.</span> <span>Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.</span></span></p> - -<p>Наприклад, <a href="http://ogp.me/">Open Graph Data</a> <span id="result_box" lang="uk"><span>є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів.</span> <span>У коді MDN ви знайдете це:</span></span></p> - -<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both Web sites -and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> -<meta property="og:title" content="Mozilla Developer Network"></pre> - -<p><span id="result_box" lang="uk"><span>Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів</span></span>.</p> - -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter <span id="result_box" lang="uk"><span>також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com.</span> <span>Наприклад:</span></span></p> - -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> - -<h2 id="Додавання_власних_іконок_на_сайт"><span class="short_text" id="result_box" lang="uk"><span>Додавання власних іконок на сайт</span></span></h2> - -<p><span id="result_box" lang="uk"><span>Щоб ще більше збагатити дизайн сайту, ви можете в метадані додавати посилання на власні іконки, і вони будуть відображатися у певних контекстах.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях.</span> <span>Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.</span></span></p> - -<p>Іконка <span id="result_box" lang="uk"><span>може бути додана на сторінку за допомогою</span></span>:</p> - -<ol> - <li><span id="result_box" lang="uk"><span>Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі </span></span><code>.ico</code><span lang="uk"><span> (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад </span></span><code>.gif</code><span lang="uk"><span> або </span></span><code>.png</code><span lang="uk"><span>, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6</span></span>).</li> - <li>Додайте наступний рядок в <code><head></code> HTML документу, щоб вказати іконку: - <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> - -<p><span class="short_text" id="result_box" lang="uk"><span>Ось приклад піктограми на панелі закладок</span></span>:</p> - -<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> - -<p><span id="result_box" lang="uk"><span>Також існує безліч інших типів іконок.</span> <span>Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN</span></span>:</p> - -<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> -<!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> -<!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> - -<p><span id="result_box" lang="uk"><span>У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка</span></span><span lang="uk"><span> високої роздільної здатності.</span></span></p> - -<p><span id="result_box" lang="uk"><span>Не хвилюйтеся щодо впровадження всіх цих типів іконок прямо зараз - це досить просунута функція, і від вас не очікується знання про це, щоб просунутися в курсі.</span> <span>Основна мета тут полягає в тому, щоб повідомити вам про такі речі, і не лякайтеся, якщо ви зустрінете їх під час перегляду вихідних кодів інших веб-сайтів.</span></span></p> - -<h2 id="Застосування_CSS_та_JavaScript_в_HTML"><span class="short_text" id="result_box" lang="uk"><span>Застосування CSS та JavaScript в HTML</span></span></h2> - -<p><span id="result_box" lang="uk"><span>Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують</span></span> {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} <span id="result_box" lang="uk"><span>для роботи інтерактивних функцій, таких як відеоплеєри</span> <span>, карти, ігри тощо</span></span>. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.</p> - -<ul> - <li> - <p>Елемент {{htmlelement("link")}} завжди розміщується в середині голови (head) веб-документу. Цей елемент має два атрибути, rel="stylesheet", <span id="result_box" lang="uk"><span>який вказує, що це таблиця стилів документа, а також href, що вказує шлях до файлу стилів (до файлу з розширенням css):</span></span></p> - - <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> - </li> - <li> - <p>Елемент {{htmlelement("script")}} не обов'язково має бути в голові сторінки (head); насправді, краще скрипт розміщувати в нижній частині тіла документа (body) (перед закриваючим тегом <code></body></code>), <span id="result_box" lang="uk"><span>щоб переконатися, що весь вміст HTML сторінки був прочитаний браузером, перш ніж він намагатиметься застосувати JavaScript на сторінці</span><span> </span></span> (<span id="result_box" lang="uk"><span>якщо JavaScript намагається отримати доступ до елемента, який ще не існує, браузер видає помилку</span></span>).</p> - - <pre class="brush: html"><script src="my-js-file.js"></script></pre> - - <p><strong>Примітка</strong>: Елемент <code><script></code> <span id="result_box" lang="uk"><span>може виглядати як порожній елемент, але це не так, і тому потрібен закриваючий тег.</span> <span>Замість того, щоб вказувати на зовнішній файл сценарію, ви також можете додати ваш сценарій в елемент </span></span><code><script></code>.</p> - </li> -</ul> - -<h3 id="Активне_навчання_застосування_CSS_та_JavaScript_на_сторінці"><span id="result_box" lang="uk"><span>Активне навчання: застосування CSS та JavaScript на сторінці</span></span></h3> - -<ol> - <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, візьміть копії наших</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> та <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> файлів, <span id="result_box" lang="uk"><span>і збережіть їх на своєму комп'ютері в тій же директорії. </span></span><span id="result_box" lang="uk"><span>Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.</span></span> <span lang="uk"> </span></li> - <li><span id="result_box" lang="uk"><span>Відкрийте файл HTML у вашому браузері та текстовий редактор</span></span>.</li> - <li><span id="result_box" lang="uk"><span>Виконавши ці кроки, додайте до вашого HTML документу елементи</span></span> {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.</li> -</ol> - -<p><span id="result_box" lang="uk"><span>Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:</span></span></p> - -<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>JavaScript <span id="result_box" lang="uk"><span>додав порожній список на сторінку.</span> <span>Тепер, коли ви натиснете де-небудь у списку, з'явиться діалогове вікно з проханням ввести якийсь текст для нового елемента списку.</span> К<span>оли ви натиснете кнопку ОК, новий елемент списку буде додано до списку, що містить текст.</span> <span>Коли ви натискаєте існуючий елемент списку, з'явиться діалогове вікно, що дозволить вам змінити текст об'єкта.</span></span></li> - <li><span id="result_box" lang="uk"><span>CSS змусив фон змінитись зеленим кольором, а текст став більшим.</span> <span>Він також стилізовав деякий вміст, який JavaScript додав на сторінку (червона смужка з чорною рамкою - це стиль, який CSS додав до списку, створений JS).</span></span></li> -</ul> - -<div class="note"> -<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Якщо ви застрягли в цій вправі і не можете застосувати</span></span> CSS/JS на сторінці, то перегляньте нашу сторінку <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> з прикладом.</p> -</div> - -<h2 id="Встановлення_основної_мови_документа"><span class="short_text" id="result_box" lang="uk"><span>Встановлення основної мови документа</span></span></h2> - -<p><span id="result_box" lang="uk"><span>Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки.</span></span> Це можна зробити, додавши <a href="/uk/docs/Web/HTML/Global_attributes/lang">lang attribute</a> (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> і показано нижче).</p> - -<pre class="brush: html"><html lang="en-US"></pre> - -<p>Це корисно в багатьох випадках. <span id="result_box" lang="uk"><span>Ваш HTML-документ буде більш ефективно індексований пошуковими системами, </span></span>які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову <span lang="uk"><span>(дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово</span> <span>"динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).</span></span></p> - -<p><span id="result_box" lang="uk"><span>Ви також можете встановити підрозділи вашого документа, щоб вони розпізнавались різними мовами.</span> В нашому прикладі з фрагментом японською мовою правильно вказати мову так</span>:</p> - -<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> - -<p><span id="result_box" lang="uk"><span>Ці коди визначаються стандартом</span></span> <a href="https://uk.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. <span id="result_box" lang="uk"><span>Ви можете дізнатись більше про них в</span></span> <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> - -<h2 id="Підсумок">Підсумок</h2> - -<p>На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> - -<p> </p> - -<p> </p> diff --git a/files/uk/learn/html/multimedia_and_embedding/index.html b/files/uk/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 6dccf89410..0000000000 --- a/files/uk/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Вставки мультимедіа -slug: Learn/HTML/Multimedia_and_embedding -translation_of: Learn/HTML/Multimedia_and_embedding ---- -<p>{{LearnSidebar}}</p> - -<p class="summary">До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!</p> - -<div class="note"> -<p>Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад JSBin або Thimble.</p> - -<h2 id="sect1"> </h2> -</div> - -<p class="summary">Довідники</p> - -<p>Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Зображення у форматі HTML</a></dt> - <dd>Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента {{htmlelement ("img")}}, який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою {{htmlelement ("figure")}} і як він відноситься до фонових зображень CSS.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Відео та аудіозапис</a></dt> - <dd>Далі ми розглянемо, як використовувати HTML5 елементи {{htmlelement ("video")}} та {{htmlelement ("audio")}}, щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Від <object> до <iframe> - інші технології вбудовування</a></dt> - <dd>На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: {{htmlelement ("iframe")}}, елементи {{htmlelement ("embed")}} і {{htmlelement ("object")}}. <code><iframe></code> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Додавання векторної графіки до Інтернету</a></dt> - <dd>Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний {{glossary ("SVG")}} формат на веб-сторінках.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Відповідні зображення</a></dt> - <dd>За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент {{htmlelement ("picture")}}.</dd> -</dl> - -<h2 id="Оцінки">Оцінки</h2> - -<p>Наступні оцінки допоможуть перевірити розуміння базових основ HTML, описаних вище в посібниках.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сторінка сплесків Mozilla</a></dt> - <dd>У цій оцінці ми перевіримо ваші знання про деякі методи, описані в статтях цього модуля, що допоможе вам додати деякі зображення та відео на приголомшливу сторінку про все про Mozilla!</dd> -</dl> - -<h2 id="Дивись_також">Дивись також</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Додайте візитну карту догори зображення</a></dt> - <dd>Карти зображень забезпечують механізм створення різних частин посилання на зображення на різні місця (подумайте про карту, посилаючись на додаткову інформацію про кожну країну, на яку ви натискаєте). Ця техніка іноді може бути корисною.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Основи веб-грамотності 2</a></dt> - <dd> - <p>Відмінний курс навчання Mozilla, який вивчає та випробовує деякі з навичок, про які говорили в модулі мультимедіа та вбудовування. Зануртеся в основу створення веб-сторінок, розробки для доступності, спільного використання ресурсів, використання онлайн-засобів масової інформації та відкритої роботи (це означає, що ваш вміст є вільно доступним і доступним для обміну іншими користувачами).</p> - </dd> -</dl> diff --git a/files/uk/learn/html/tables/index.html b/files/uk/learn/html/tables/index.html deleted file mode 100644 index 3e5350587c..0000000000 --- a/files/uk/learn/html/tables/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: HTML-таблиці -slug: Learn/HTML/Tables -translation_of: Learn/HTML/Tables ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Доволі поширеним завданням в HTML є структуризація табличних даних, і HTML має набір елементів та атрибутів саме для таких цілей. В поєднанні з <a href="/en-US/docs/Learn/CSS">CSS</a> для стилізації, HTML полегшує відображення в інтернеті такої інформації, як шкільний навчальний план, розклад занять у вашому басейні, або статистику про ваших улюблених динозаврів чи футбольні команди. Даний модуль містить усе, що необхідно знати про структуризацію табличних даних за допомогою HTML.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Перед тим як почати даний модуль, ви повинні пройти базовий курс HTML — дивіться <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML.</a></p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Зміст">Зміст</h2> - -<p>Даний модуль містить наступні статті:</p> - -<p><a href="/en-US/docs/Learn/HTML/Tables/Basics">Основи HTML таблиць</a></p> - -<dl> - <dd>Дана стаття дозволить вам розпочати роботу з HTML таблицями, ознайомить з такими основними поняттями як рядки та клітини, заголовки, як розширити клітини на декілька колонок та рядків, а також як згрупувати усі клітини разом з метою стилізації.</dd> -</dl> - -<p><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Особливості та доступність HTML таблиць</a></p> - -<dl> - <dd>В другій статті даного модулю ми більш детально розгядаємо особливості HTML таблиць - такі як captions/summaries та групування рядків в head, body та footer секції вашої таблиці - а також розглядаємо доступність таблиць для користувачів з вадами зору.</dd> -</dl> - -<h2 id="Оцінювання">Оцінювання</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Структуризація даних про планети</a></dt> - <dd><br> - У нашій табличній оцінці ми надаємо вам деякі дані про планети в нашій сонячній системі, які ви зможете структурувати в HTML таблицю.</dd> -</dl> diff --git a/files/uk/learn/index.html b/files/uk/learn/index.html deleted file mode 100644 index ad19811666..0000000000 --- a/files/uk/learn/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Вчимо веб-розробку -slug: Learn -tags: - - WWW - - Веб - - Покажчик - - Початківець - - вивчення -translation_of: Learn ---- -<div>{{LearnSidebar}}</div> - -<div> -<p class="summary">Ласкаво просимо до навчальної зони MDN. Ці статті покликані забезпечити початківців у веб-розробці всім необхідним, аби почати писати код простих сайтів.</p> -</div> - -<p>Мета цієї частини MDN не в тому, щоб зробити вас з «початківця» відразу «експертом» , а зробити вас «знаючим». Потім ви самі зможете вибрати подальший шлях, вивчаючи <a href="https://developer.mozilla.org/uk/">решту MDN</a>, та інші розширені та професійні ресурси, що будуть підсумовувати попередні знання.</p> - -<p>Якщо ви цілковитий початківець, веб-розробка може стати певним викликом для вас — ми підтримаємо вас та дамо детальну інформацію, щоб ви почували себе комфортно та вивчили тему як слід. Почувайте себе як риба у воді, незалежно від того, чи ви студент, який вивчає веб-розробку (самостійно або в аудиторії), вчитель, який шукає матеріали для занять, аматор або просто прагнете детальніше зрозуміти, як працють веб-технології.</p> - -<div class="warning"> -<p><strong>Важливо</strong>: Вміст навчальної зони постійно оновлюється. Якщо ви маєте запитання стосовно тем, які на вашу думку не висвітлені, зверніться до секції {{anch("Зв'яжіться з нами")}} нижче.</p> -</div> - -<h2 id="З_чого_почати">З чого почати</h2> - -<ul class="card-grid"> - <li><span>Початківець:</span>Для практичного ознайомлення з темою, якщо ви початківець у веб-розробці, рекомендуємо починати роботу з модуля <a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Web</a>.</li> - <li><span>Поширені питання:</span> Якщо є загальні запитання стосовно веб-розробки, вам допоможе розділ <a href="/uk/docs/Learn/Common_questions">Поширені питання</a>.</li> - <li><span>Розширений рівень:</span> Якщо ви вже освоїли базові поняття, наступним кроком буде детальніше вивчення {{glossary("HTML")}} та {{glossary("CSS")}}: розпочніть з модуля <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> та продовжуйте з <a href="/uk/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>.</li> - <li><span>Пишемо скрипти:</span> Якщо ви вже достатньо володієте HTML та CSS або в основному цікавитесь кодуванням, вам слід перейти до {{glossary("JavaScript")}}. Почніть з розділів <a href="/uk/docs/Learn/JavaScript/First_steps">Перші кроки в JavaScript</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Перші кроки на стороні сервера</a>.</li> -</ul> - -<div class="note"> -<p><strong>Нотатка</strong>: Наш <a href="/uk/docs/Glossary">Словник</a> надає визначення термінологій.</p> -</div> - -<p>{{LearnBox({"title":"Випадковий запис в словнику"})}}</p> - -<h2 id="Охоплені_теми">Охоплені теми</h2> - -<p>Нижче наведено список усіх тем, які ми розглядаємо в навчальній зоні MDN.</p> - -<dl> - <dt><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a></dt> - <dd>Забезпечує практичне введення до веб-розробки для цілковитих початківців.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML - структурування інтернету</a></dt> - <dd>HTML - це мова, яку ми використовуємо для структурування різних частин нашого вмісту та визначення їх змісту чи призначення. Ця тема детально вчить HTML.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — стилізація інтернету</a></dt> - <dd>CSS - це мова, яку ми можемо використовувати для зміни вигляду та представлення веб-контенту, а також додавання поведінки, як-от анімація. Ця тема всебічно охоплює CSS.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — динамічні сценарії на стороні клієнта</a></dt> - <dd>JavaScript - це скриптова мова, що використовується для додавання динамічних функцій веб-сторінкам. Ця тема викладає всі необхідні, для комфортного написання та розуміння JavaScript, елементи.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Доступність — зробити інтернет зручним для всіх</a></dt> - <dd>Доступність - це практика створення веб-контенту для максимально можливої кількості людей незалежно від інвалідності, пристрою, мови та інших факторів, що відрізняються. Ця тема дає вам все, що вам потрібно знати.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Інструменти та тестування</a></dt> - <dd>Ця тема охоплює інструменти, які розробники використовують для полегшення їх роботи, як-от інструменти крос-браузерного тестування.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Програмування сайту на стороні сервера</a></dt> - <dd>Навіть якщо ви зосереджені на розробці веб-сторінок на стороні клієнта, корисно знати про те, як працюють сервери та серверні компоненти коду. Тема дає загальне уявлення про те, як працює серверна частина, а також докладні підручники, в яких описано, як створити серверну програму за допомогою двох популярних фреймворків — Django (Python) та Express (node.js). </dd> -</dl> - -<h2 id="Отримання_прикладів_нашого_коду">Отримання прикладів нашого коду</h2> - -<p>Всі приклади коду, які ви зустрінете в зоні навчання, <a href="https://github.com/mdn/learning-area/">доступні на GitHub</a>. Якщо ви хочете скопіювати їх усі на свій комп'ютер, найпростішим способом є:</p> - -<ol> - <li><a href="https://git-scm.com/downloads">Встановіть Git</a> на вашу машину. Це основне програмне забезпечення системи керування версіями, на якому працює GitHub.</li> - <li><a href="https://github.com/join">Отримайте обліковий запис на GitHub</a>.</li> - <li>Після реєстрації, увійдіть на <a href="https://github.com/">github.com</a> за допомогою свого імені користувача та пароля.</li> - <li>Відкрийте командний рядок комп'ютера (Windows) або термінал (Linux, macOS).</li> - <li>Щоб скопіювати репозиторій зони навчання до папки під назвою learning area у поточному розташуванні, яке вказує ваш командний рядок/термінал, скористайтеся цією командою: - <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre> - </li> - <li>Тепер ви можете ввести каталог та потім знаходити ваші файли, (використовуючи шукач/файловий провідник або <a href="https://uk.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команду cd</a>).</li> -</ol> - -<p>Ви можете оновити репозиторій <code>learning-area</code> з будь-якими змінами, внесеними до основної версії на GitHub, таким чином:</p> - -<ol> - <li>У командному рядку/терміналі перейдіть до каталогу <code>learning-area</code>, використовуючи <code>cd</code>. Наприклад, якщо ви були в батьківському каталозі: - - <pre class="brush: bash">cd learning-area</pre> - </li> - <li>Оновіть репозиторій, використовуючи таку команду: - <pre class="brush: bash">git pull</pre> - </li> -</ol> - -<h2 id="Звяжіться_з_нами">Зв'яжіться з нами</h2> - -<p>Якщо ви хочете зв'язатись з нами з будь-якої підстави, надішліть нам листа на <a href="/uk/docs/MDN/Community/Conversations#Asynchronous_discussions">поштові списки</a> або в <a href="https://developer.mozilla.org/uk/docs/MDN/Community/Conversations#Chat_in_IRC">IRC канал</a>. Ми хочемо дізнатись вашу думку стосовно помилок та неточностей на сайті, запити нових навчальних тем, запити про допомогу по незрозумілим інструментам чи будь-що інше.</p> - -<p>Якщо ви зацікавлені розвивати/вдосконалювати зміст, погляньте <a href="/uk/Learn/How_to_contribute">Як ви можете допомогти</a>, і дайтесь чути! Ми будемо надзвичайно щасливі поспілкуватись з вами, не дивлячись на те, хто ви — студент, викладач, досвідчений веб-розробник або будь-хто зацікавлений допомогти у вдосконалені навчального досвіду.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<dl> - <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt> - <dd>Наш інформаційний бюлетень для веб-розробників, який є чудовим ресурсом для всіх рівнів досвіду.</dd> - <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> - <dd>Чудовий інтерактивний сайт для вивчення мов програмування з нуля.</dd> - <dt><a href="https://code.org/">Code.org</a></dt> - <dd>Базова теорія написання коду та практика, здебільшого для дітей та повних новачків.</dd> - <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> - <dd>Безкоштовні та відкриті курси для вивчення технічних навичок, з наставництвом та проектом навчання</dd> - <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt> - <dd>Платформа для початкового рівня веб-грамотності та навичок 21 століття, що також забезпечує доступ до викладацьких матеріалів, відсортованих за категоріями.</dd> - <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> - <dd>Серія навчальних матеріалів для викладання (та навчання), створених Фондом Мозіла, що охоплює все, починаючи від базової грамотності в Інтернеті та конфіденційності, до JavaScript і зламу Minecraft.</dd> - <dt><a href="https://edabit.com">Edabit</a></dt> - <dd>Сотні безкоштовних інтерактивних завдань по кодуванню на різних мовах.</dd> -</dl> diff --git a/files/uk/learn/javascript/asynchronous/index.html b/files/uk/learn/javascript/asynchronous/index.html deleted file mode 100644 index 355477ead5..0000000000 --- a/files/uk/learn/javascript/asynchronous/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Асинхронний JavaScript -slug: Learn/JavaScript/Asynchronous -translation_of: Learn/JavaScript/Asynchronous -original_slug: Learn/JavaScript/Асинхронний ---- -<div>{{LearnSidebar}}</div> - -<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p> - -<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> - <dd> - <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p> - </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> - <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> - <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> - <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> - <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> - <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li> -</ul> diff --git a/files/uk/learn/javascript/building_blocks/index.html b/files/uk/learn/javascript/building_blocks/index.html deleted file mode 100644 index b33be235cb..0000000000 --- a/files/uk/learn/javascript/building_blocks/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Будівельні блоки JavaScript -slug: Learn/JavaScript/Building_blocks -translation_of: Learn/JavaScript/Building_blocks -original_slug: Learn/JavaScript/Будівельні_блоки ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt> - <dd>In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></dt> - <dd>Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></dt> - <dd>Another essential concept in coding is <strong>functions. Functions</strong> allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></dt> - <dd>With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt> - <dd>The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt> - <dd>Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt> - <dd>Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> - <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd> -</dl> diff --git a/files/uk/learn/javascript/client-side_web_apis/index.html b/files/uk/learn/javascript/client-side_web_apis/index.html deleted file mode 100644 index ee5df2ea53..0000000000 --- a/files/uk/learn/javascript/client-side_web_apis/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Веб-APIs на стороні клієнта -slug: Learn/JavaScript/Client-side_web_APIs -translation_of: Learn/JavaScript/Client-side_web_APIs ---- -<div>{{LearnSidebar}}</div> - -<div>При написанні клієнтського JavaScript для веб-сайтів або додатків, ви досить скоро зустрінитесь з Інтерфейсами для Програмування Додатків (APIs). APIs є функціями програмування, що надають можливість маніпулювання різними аспектами браузера та операційної системи, на якій працює сайт, або обробки даних з інших веб-сайтів або службю. У цьому модулі ми розглянемо, що таке API, і як використовувати деякі з найбільш поширених API, які ви часто зустрічаєте в процесі розробки.</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Щоб даний модуль був максимально корисним, ми рекомендуємо вам пройти попередні JavaScript модулі у серії (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, та <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Дані модулі, як правило, передбачають просте використання API, тому що зачасту досить важко писати приклади клієнтського JavaScript без них. Для даної інструкції ми припустимо, що ви ознайомлені з основами мови JavaScript, та вивчимо загальні Web APIs більш детально.</p> - -<p>Базові знання <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a> також будуть корисними.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt> - <dd>Перш за все, ми почнемо з розгляду APIs з високого рівня - що вони собою представляють, як вони працюють, як використовувати їх у власному коді та яку вони мають структуру? Ми також розглянемо, що таке різні основні класи APIs та як вони використовуються.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt> - <dd>При написанні веб-сторінок і додатків однією з найпоширеніших речей, яку ви захочете зробити це маніпуляція веб-документами. Зазвичай це робиться за допомогою об'єктної моделі документа (DOM), набору API для керування HTML та інформацією про стиль, яка використовує об'єкт {{domxref ("Document")}}. У цій статті ми детально розглянемо, як використовувати DOM, а також деякі інші цікаві API, які можуть змінити ваше середовище цікавими способами.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt> - <dd>Іншим дуже поширеним завданням на сучасних веб-сайтах і додатках є отримання окремих елементів даних з сервера для оновлення розділів веб-сторінки без необхідності завантажувати абсолютно нову сторінку. Ця, здавалося б, невелика деталь мала величезний вплив на продуктивність і поведінку сайтів. У цій статті ми пояснимо концепцію і розглянемо технології, які роблять це можливим, наприклад, {{domxref ("XMLHttpRequest")}} і <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> - <dd>APIs, які ми розглянули є вбудованими в браузер, але не всі APIs є частиною браузерів. Багато великих веб-сайтів і служб, таких як Google Maps, Twitter, Facebook, PayPal тощо, надають API, що дозволяють розробникам використовувати свої дані (наприклад, показувати ваш Twitter у вашому блозі) або послуги (наприклад, показувати індивідуально налаштовані Google Maps на вашому сайті або використання логіна Facebook для входу в систему користувачів. У цій статті розглядаються відмінності між API браузера та APIs третьої сторони і показано деякі типові використання останнього.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> - <dd>Браузер містить деякі дуже потужні засоби графічного програмування, від мови масштабованої векторної графіки (<a href="/en-US/docs/Web/SVG">SVG</a>), до APIs для малювання елементів HTML {{htmlelement ("canvas")}} (див. <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> та <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ця стаття містить вступ до Canvas API, а також додаткові ресурси, які дозволять вам дізнатися більше.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> - <dd>HTML5 поставляється з елементами для вбудовування мультимедійних даних у документи - {{htmlelement ("відео")}} і {{htmlelement ("аудіо")}} - які, в свою чергу, мають власні APIs для керування відтворенням, пошуком і т.д. Дана стаття демонструє, як виконувати звичайні завдання, наприклад, створювати власні елементи керування відтворенням.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt> - <dd>Сучасні веб-браузери мають ряд різних технологій, які дозволяють зберігати дані, пов'язані з веб-сайтами, і отримувати їх у разі необхідності, дозволяючи зберігати дані на довгий термін, зберігати сайти в автономному режимі та багато іншого. У цій статті пояснюються основи як це все працює.</dd> -</dl> diff --git a/files/uk/learn/javascript/first_steps/index.html b/files/uk/learn/javascript/first_steps/index.html deleted file mode 100644 index 023c9c97e6..0000000000 --- a/files/uk/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Перші кроки у JavaScript -slug: Learn/JavaScript/First_steps -tags: - - Arrays - - Article - - Assessment - - Beginner - - CodingScripting - - Guide - - JavaScript - - Landing - - Module - - Numbers - - Operators - - Variables - - maths - - strings - - Мова - - Україньська -translation_of: Learn/JavaScript/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Перш ніж перейти до першого практичного досвіду написання JavaScript. Після цього ми детально обговоримо деякі основні елементи, такі як змінні, рядки, числа та масиви.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Для того щоб почати з цього модуля, вам не потрібні попередні знання JavaScript, однак ви повинні бути добре знайомі з HTML та CSS. Перед початком роботи з JavaScript вам рекомендується виконати такі модулі:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> (що включає початковий рівень <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>).</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в HTML</a>.</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в CSS</a></li> -</ul> - -<div class="note"> -<p><strong>Примітка</strong>: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, можна спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Посібники">Посібники</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Що таке JavaScript?</a></dt> - <dd>Ласкаво просимо до курсу JavaScript для новачків MDN! У цій першій статті ми розглянемо JavaScript з висоти, відповідаючи на такі запитання, як "що це таке?" Та "що воно робить?", і переконаємось у тому, що JavaScript відповідає вашим вимогам.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Перші спроби на JavaScript</a></dt> - <dd>Тепер ви дізнались щось про теорію JavaScript, і що ви можете з ним робити, ми збираємося дати вам курс по написанню основних функцій JavaScript за допомогою повністю практичного підручника. Тут ви створите просту гру "Вгадай номер", крок за кроком.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Що пішло не так? Усунення несправностей JavaScript</a></dt> - <dd>Коли ви створили гру "Вгадай номер" в попередній статті, ви помітили, що программа не працює. Ніколи не бійтеся - ця стаття спрямована на те, щоб позбавити вас від виривання волосся на голові при виникненні таких проблем, надаючи вам прості поради щодо того, як знайти та виправити помилки у програмах JavaScript.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Збереження потрібної вам інформації - змінні</a></dt> - <dd>Тепер прочитавши останні пару статей, ви повинні знати, що таке JavaScript, що він може зробити для вас, як вам використовувати його разом з іншими веб-технологіями та які його функції є високорівневими. У цій статті ми перейдемо до справжніх основ дивлячись як працювати з основними будівельними блоками JavaScript-змінних.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Основи математики в JavaScript - цифри та оператори</a></dt> - <dd>На цьому етапі ми обговорюємо математику в JavaScript - як ми можемо об'єднати оператори та інші функції, щоб успішно оперувати числами в наших командах.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Обробка текстових рядків у JavaScript</a></dt> - <dd>Далі ми звернемо увагу на рядки - що є фрагментами тексту при програмуванні. У цій статті ми розглянемо всі загальні речі, які ви повинні знати про рядки при вивченні JavaScript, такі як створення рядків, використання лапок в рядку, та їх об'єднання.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Корисні рядкові методи</a></dt> - <dd>Тепер коли ми розглянули основи рядків, давайте перейдемо до механізму та почнемо вивчати корисні операції які ми можемо виконувати в рядках за допомогою вбудованих методів, таких як пошук довжини текстового рядка, об'єднання та розбиття рядків, заміна одного символу в рядку іншим, і так далі.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Масиви</a></dt> - <dd>У заключній статті цього модуля ми розглянемо масиви - обережний спосіб зберігання списку елементів даних під одним ім'ям змінної. Тут ми розглянемо, чому це корисно, а потім навчимось створювати масиви, витягувати, додавати і видаляти елементи, що зберігаються в масиві, і інше.</dd> -</dl> - -<h2 id="Оцінки">Оцінки</h2> - -<p>Наступна оцінка перевірить ваше розуміння базових правил JavaScript, описаних вище в посібниках.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Генератор випадкових історій</a></dt> - <dd>У цьому оцінюванні вам буде запропоновано застосувати деякі знання, здобуті у статтях цього модуля, і застосувати їх для створення веселого прикладу, який генеруватиме випадкові історії. Порозважайтеся!</dd> -</dl> diff --git a/files/uk/learn/javascript/first_steps/what_is_javascript/index.html b/files/uk/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index a3ca8c054d..0000000000 --- a/files/uk/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,422 +0,0 @@ ---- -title: What is JavaScript? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> - -<div>Ласкаво просимо до курсу для новачків від MDN! В цій статті ми подивимося на JavaScript в загальному, пробуючи дати відповідь на запитання "Що це таке?" і "Що ти можеш з ним зробити?". Нашою ціллю буде ознайомити тебе з метою JavaScript-та в ІТ сфері.</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Потрібні знання:</th> - <td>Базове розуміння культури програмування, базові знання HTML і CSS</td> - </tr> - <tr> - <th scope="row">Ціль:</th> - <td> - <p>Отримати розуміння, що таке JavaScript, на що він здатний, і як він забезпечує роботу веб сторінок</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Поверхневе_визначення">Поверхневе визначення</h2> - -<p>JavaScript - це мова програмування, що дозволяє тобі створювати складні речі на веб сторінках. Якщо веб сторінка робить, щось більше ніж просто показує статичну інформацію, наприклад: виконує моніторинг в реальному часі, інтерактивні карти, анімовану 2D/3D графіку, здатна на параллакс-скроллинг - ти можеш бути досить впевненим, що це без JavaScript там не обійшлося. Це є третій шар стандартного веб торту, з двома з них (<a href="/en-US/docs/Learn/HTML">HTML</a> і <a href="/en-US/docs/Learn/CSS">CSS</a>) ми ознайомилися в більших деталях в інших частинах курсу Навчальної зони (Learning Area).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{glossary("HTML")}} це є мова розмітки, яку ми використовуємо для структиризації зовнішнього вигляду нашої веб сторінки. Наприклад, визначення параграфів, заголовків, таблиць даних, чи вбудованих світлин та відео</li> - <li>{{glossary("CSS")}} is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.</li> - <li>{{glossary("JavaScript")}} is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li> -</ul> - -<p>The three layers build on top of one another nicely. Let's take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:</p> - -<pre class="brush: html"><p>Player 1: Chris</p></pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> - -<p>Then we can add some CSS into the mix to get it looking nice:</p> - -<pre class="brush: css">p { - font-family: 'helvetica neue', helvetica, sans-serif; - letter-spacing: 1px; - text-transform: uppercase; - text-align: center; - border: 2px solid rgba(0,0,200,0.6); - background: rgba(0,0,200,0.3); - color: rgba(0,0,200,0.6); - box-shadow: 1px 1px 2px rgba(0,0,200,0.4); - border-radius: 10px; - padding: 3px 10px; - display: inline-block; - cursor: pointer; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> - -<p>And finally, we can add some JavaScript to implement dynamic behaviour:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -} -</pre> - -<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>)!</p> - -<p>JavaScript can do a lot more than that — let's explore what in more detail.</p> - -<h2 id="So_what_can_it_really_do">So what can it really do?</h2> - -<p>The core client-side JavaScript language consists of some common programming features that allow you to do things like:</p> - -<ul> - <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called <code>name</code>.</li> - <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the <code>name</code> variable to create the complete text label, e.g. ''Player 1: Chris".</li> - <li>Running code in response to certain events occurring on a web page. We used a {{Event("click")}} event in our example above to detect when the button is clicked and then run the code that updates the text label.</li> - <li>And much more!</li> -</ul> - -<p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> - -<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and <em>then</em> put them together to make a bookshelf.</p> - -<p>They generally fall into two categories.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> - -<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> - -<ul> - <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li> - <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li> - <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> -</div> - -<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p> - -<ul> - <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> - <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> -</div> - -<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p> - -<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> - -<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p> - -<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> - -<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p> - -<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p> - -<h3 id="Browser_security">Browser security</h3> - -<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p> - -<div class="note"> -<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p> -</div> - -<h3 id="JavaScript_running_order">JavaScript running order</h3> - -<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -}</pre> - -<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p> - -<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> - -<div class="note"> -<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p> -</div> - -<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> - -<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.</p> - -<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer. The program is executed from a binary format which was generated from the original program source code.</p> - -<p>JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called <strong>just-in-time compiling</strong> to improve performance; the JavaScript source code gets compiled into a faster, binary, format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an intepreteted language, since the compilation is being handled at run time, rather than ahead of time.</p> - -<p>There are advantages to both types of language, but we won't discuss them right now.</p> - -<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> - -<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about <strong>client-side JavaScript</strong>.</p> - -<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> - -<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> - -<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p> - -<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> - -<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> - -<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p> - -<h3 id="Internal_JavaScript">Internal JavaScript</h3> - -<ol> - <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> - <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li> - <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: - <pre class="brush: html"><script> - - // JavaScript goes here - -</script></pre> - </li> - <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: - <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); - } - - const buttons = document.querySelectorAll('button'); - - for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); - } -});</pre> - </li> - <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> -</div> - -<div class="note"> -<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> -</div> - -<h3 id="External_JavaScript">External JavaScript</h3> - -<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> - -<ol> - <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> - <li>Replace your current {{htmlelement("script")}} element with the following: - <pre class="brush: html"><script src="script.js" defer></script></pre> - </li> - <li>Inside <code>script.js</code>, add the following script: - <pre class="brush: js">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - </li> - <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> -</div> - -<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> - -<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> - -<div id="inline_js_example"> -<pre class="brush: js example-bad">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -}</pre> - -<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> -</div> - -<p>You can try this version of our demo below.</p> - -<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> - -<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p> - -<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p> - -<pre class="brush: js">const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p> - -<div class="note"> -<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p> -</div> - -<h3 id="Script_loading_strategies">Script loading strategies</h3> - -<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> - -<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p> - -<p>In the internal example, you can see this structure around the code:</p> - -<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - ... -});</pre> - -<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> - -<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> - -<pre class="brush: js"><script src="script.js" defer></script></pre> - -<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> - -<div class="note"> -<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p> -</div> - -<p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code></body></code> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.</p> - -<h4 id="async_and_defer">async and defer</h4> - -<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p> - -<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> - -<p>For example, if you have the following script elements:</p> - -<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> - -<script async src="js/script2.js"></script> - -<script async src="js/script3.js"></script></pre> - -<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> - -<p><code>defer</code> will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p> - -<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> - -<script defer src="js/script2.js"></script> - -<script defer src="js/script3.js"></script></pre> - -<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p> - -<p>To summarize:</p> - -<ul> - <li>If your scripts don't need to wait for parsing and can run independently without dependencies, then use <code>async</code>.</li> - <li>If your scripts need to wait for parsing and depend on other scripts load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> -</ul> - -<h2 id="Comments">Comments</h2> - -<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p> - -<ul> - <li>A single line comment is written after a double forward slash (//), e.g. - <pre class="brush: js">// I am a comment</pre> - </li> - <li>A multi-line comment is written between the strings /* and */, e.g. - <pre class="brush: js">/* - I am also - a comment -*/</pre> - </li> -</ul> - -<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> - -<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body. - -function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -/* - 1. Get references to all the buttons on the page in an array format. - 2. Loop through all the buttons and add a click event listener to each one. - - When any button is pressed, the createParagraph() function will be run. -*/ - -const buttons = document.querySelectorAll('button'); - -for (let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<div class="note"> -<p><strong>Note</strong>: In general more comments is usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p> - -<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> - -<ul> -</ul> - -<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> diff --git a/files/uk/learn/javascript/index.html b/files/uk/learn/javascript/index.html deleted file mode 100644 index 151ff7435e..0000000000 --- a/files/uk/learn/javascript/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -tags: - - Beginner - - CodingScripting - - JavaScript - - JavaScripting beginner - - Landing - - Module - - Topic - - Мова - - Українська -translation_of: Learn/JavaScript ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{Glossary("JavaScript")}} — це мова програмування, що дозволяє вам створювати живі, динамічні веб-сторінки. Кожного разу, коли веб-сторінка робить більше, ніж просто відображає Вам статичну інформацію для перегляду, відображає своєчасне оновлення вмісту або інтерактивні карти або анімовану 2D / 3D-графіку, або прокручує відео в медіапрогравачі, і таке інше — ви можете бути впевнені, що це робота JavaScript.</p> - -<h2 id="Навчальний_шлях">Навчальний шлях</h2> - -<p>Навряд чи JavaScript важче вивчати, ніж суміжні технології, такі як <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a>. Але перш ніж намагатися вивчити JavaScript, вам настійно рекомендується спочатку ознайомитись хоча б з цими двома технологіями та, можливо, з деякими іншими. Почніть свою роботу з таких модулів:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з </a><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Введення в HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введення в CSS</a></li> -</ul> - -<p>Попередній досвід роботи з іншими мовами програмування також може допомогти.</p> - -<p>Ознайомившись з основами JavaScript, ви повинні бути в курсі більш досконалих тем, наприклад:</p> - -<ul> - <li>JavaScript з середини, як навчають в нашому <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript посібнику</a></li> - <li><a href="/en-US/docs/Web/API">Веб-інтерфейси</a></li> -</ul> - -<h2 id="Модулі">Модулі</h2> - -<p>Ця тема містить наступні модулі в запропонованому порядку для роботи з ними.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки JavaScript</a></dt> - <dd>У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Потім ми перйдемо до першого практичного завданя з написання JavaScript. Після цього ми докладно розглянемо деякі ключові функції JavaScript, такі як змінні, рядки, числа та масиви.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні блоки JavaScript</a></dt> - <dd>У цьому модулі ми продовжуємо охоплювати всі основні фундаментальні функції JavaScript, звертаючи увагу на ті типи блоків коду які нам будуть часто зустрічатися, такі як умовні вирази, цикли, функції та події. Ви вже бачили цей матеріал в курсі, тільки тут ми все це розглянемо дитально.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Представляємо об'єкти JavaScript</a></dt> - <dd>У JavaScript більшість речей - це об'єкти, від основних функцій, як рядки та масиви, до API браузера, побудованого на вершині JavaScript. Ви навіть можете створити свої власні об'єкти, щоб інкапсулювати пов'язані функції та змінні в ефективні пакети. Об'єктно-орієнтований характер JavaScript важливо зрозуміти, якщо ви хочете піти далі з вашими знаннями мови та написати більш ефективний код, тому ми надали цей модуль, щоб допомогти вам. Тут ми детально вивчимо теорію об'єктів та синтаксис, подивимося як створити власні об'єкти, з'ясуємо що таке дані JSON, і як працювати з ним.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Веб-API на стороні клієнта</a></dt> - <dd>Під час написання JavaScript-клієнта для веб-сайтів або програм ви не заходите дуже далеко, перш ніж почати використовувати API-інтерфейси для роботи з різними аспектами браузера та операційної системи, на якому працює сайт, або навіть дані з інших веб-сайтів або послуги. У цьому модулі ми вивчимо, які API існують та як використовувати деякі з найпоширеніших API, які часто зустрічаються в роботі з розробкою.</dd> -</dl> - -<h2 id="Вирішення_загальних_проблем_JavaScript">Вирішення загальних проблем JavaScript</h2> - -<p><a href="/en-US/docs/Learn/JavaScript/Howto">Використовуйте JavaScript, щоб вирішувати поширені проблеми,</a> це посилання на розділи, що пояснюють, як використовувати JavaScript для вирішення дуже поширених проблем при створенні веб-сторінок.</p> - -<h2 id="Див._також">Див. також</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript">JavaScript на MDN</a></dt> - <dd>Основне джерело для документації JavaScript на MDN - тут ви знайдете великі довідкові документи з усіх аспектів мови JavaScript та деякі розширені навчальні посібники, націлені на досвідчених JavaScript програмістів.</dd> - <dt><a href="https://www.youtube.com/user/codingmath">Кодування математики</a></dt> - <dd>Відмінна серія відео уроків з вивчення математики яку ви повинні розуміти щоб бути ефективним програмістом, від <a href="https://twitter.com/bit101">Кейта Пітерса.</a></dd> -</dl> diff --git a/files/uk/learn/javascript/objects/basics/index.html b/files/uk/learn/javascript/objects/basics/index.html deleted file mode 100644 index e7bc44b38b..0000000000 --- a/files/uk/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Основи об'єктів в JavaScript -slug: Learn/JavaScript/Objects/Basics -tags: - - JavaScript - - this - - Об'єкт - - Основи об'єктів - - Синтаксис -translation_of: Learn/JavaScript/Objects/Basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> - -<p class="summary">В цій статті ми розглянемо основи синтаксису JavaScript об'єктів і заново вивчимо деякий функціонал JavaScript, який ми досліджували раніше на курсі, підтверджуючи той факт, що велика частина функціоналу, з яким ми вже зіткнулись, в дійсності є об'єктами.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Необхідні знання:</th> - <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як почати роботу з об'єктами JavaScript.</td> - </tr> - </tbody> -</table> - -<h2 id="Основи_об'єктів">Основи об'єктів</h2> - -<p>Об'єкт - це сукупність пов'язаних даних і/або функціональності (які зазвичай складаються з декількох змінних і функцій, які називаються властивостями та методами, якщо вони знаходяться всередині об'єктів). Давайте розберемо приклад , щоб показати, як вони виглядають.</p> - -<p>Щоб почати, скопіюйте собі <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> файл. У ньому міститься дуже мало — {{HTMLElement("script")}} елемент для написання нашого вихідного коду. Ми будемо використовувати це як основу для вивчення основ синтаксису об'єктів. Під час роботи з цим прикладом ви повинні відкрити <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>, щоб вводити деякі команди.</p> - -<p>Як і в багатьох випадках в JavaScript, створення об'єкту часто починається з визначення та ініціалізації змінної. Спробуйте ввести наступний нижче код в завантажений файл JavaScript, а потім збережіть і оновіть сторінку:</p> - -<pre class="brush: js">var person = {};</pre> - -<p>Якщо ви введете <code>person</code> в консоль JS і натиснете кнопку, то повинні отримати наступний результат:</p> - -<pre class="brush: js">[object Object]</pre> - -<p>Вітаємо, ви щойно створили свій перший об'єкт. Але це порожній об'єкт, тому ми не можемо з ним багато чого зробити. Давайте доповнимо наш об'єкт, щоб він виглядав так:</p> - -<pre class="brush: js">var person = { - name: ['Bob', 'Smith'], - age: 32, - gender: 'male', - interests: ['music', 'skiing'], - bio: function() { - alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); - }, - greeting: function() { - alert('Hi! I\'m ' + this.name[0] + '.'); - } -}; -</pre> - -<p>Після збереження та оновлення спробуйте ввести деякі з наведених нижче елементів у консолі JS:</p> - -<pre class="brush: js">person.name[0] -person.age -person.interests[1] -person.bio() -person.greeting()</pre> - -<p>Тепер всередині об'єкта є деякі дані та функціонал, і тепер до них можна отримати доступ за допомогою легкого і простого синтаксису!</p> - -<div class="note"> -<p><strong>Заувага</strong>: Якщо у вас виникли проблеми із застосуванням файлу в роботі, спробуйте порівняти свій код з нашою версією — див. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (також <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Одна з найпоширеніших помилок, коли ви починаєте роботу з об'єктами, ставити кому в кінці останнього члена - це призводить до помилки.</p> -</div> - -<p>Отже, що тут відбувається? Об'єкт складається з декількох елементів, кожен з яких має назву (наприклад, <code>name</code> та <code>age</code> вище), і значення (наприклад, <code>['Bob', 'Smith']</code> та <code>32</code>). Кожна пара назва/значення повинна бути відокремлена комою, а назва і значення в кожному випадку розділяються між собою двокрапкою. Синтаксис завжди дотримується цього шаблону:</p> - -<pre class="brush: js">var objectName = { - member1Name: member1Value, - member2Name: member2Value, - member3Name: member3Value -}</pre> - -<p>Значенням члена об'єкта може бути майже все — в нашому об'єкті <code>person</code> є рядок, число, два масиви та дві функції. Перші чотири елементи є елементами даних, що відносяться до <strong>властивостей</strong> об'єкта. Останні два елементи - це функції, які дозволяють об'єкту щось зробити з цими елементами даних, називаються <strong>методами</strong> об'єкта.</p> - -<p>Такі об'єкти називаються <strong>літералами об'єкта (object literal) </strong>- ми буквально вписали весь вміст об'єкта для його створення. Цей спосіб сильно відрізняється від об'єктів, реалізованих класами, які ми розглянемо пізніше.</p> - -<p>Дуже часто створення об'єкта за допомогою літералу використовується, коли вам потрібно перенести певним чином ряд структурованих, пов'язаних елементів даних, наприклад, надсилаючи запит на сервер для розміщення їх в базі даних. Відправка одного об'єкта набагато ефективніша, ніж відправлення кількох елементів окремо, а також з ним легше працювати, ніж з масивом, коли ви хочете ідентифікувати окремі елементи за назвою.</p> - -<h2 id="Крапкова_нотація_(Dot_notation)">Крапкова нотація (Dot notation)</h2> - -<p>Вище ми отримали доступ до властивостей об'єкта та методів використовуючи <strong>крапкову нотацію (dot notation)</strong>. Ім'я об'єкта (person) діє як <strong>простір імен (namespace) </strong>- його потрібно вводити першим для того, щоб ми могли отримати доступ до всього, що вкладено <strong>(encapsulated)</strong> всередині об'єкта. Далі ви ставите крапку, після якої вказуєте елемент, який хочете отримати - це може бути іназва простої властивості, елемент масиву або виклик одного з методів об'єкту, наприклад:</p> - -<pre class="brush: js">person.age -person.interests[1] -person.bio()</pre> - -<h3 id="Sub-простори_імен_(Sub-namespaces)">Sub-простори імен (Sub-namespaces)</h3> - -<p>Значенням елемента об'єкта можна зробити навіть інший об'єкт. Наприклад, спробуйте змінити значення властивості name з такого</p> - -<pre class="brush: js">name: ['Bob', 'Smith'],</pre> - -<p>на</p> - -<pre class="brush: js">name : { - first: 'Bob', - last: 'Smith' -},</pre> - -<p>Тут ми ефективно створюємо <strong>sub-простір імен</strong>. Звучить складно, але насправді це не так - щоб отримати доступ до необхідних елементів, вам просто потрібно зробити ще один додатковий крок через крапку. Спробуйте це у консолі JS:</p> - -<pre class="brush: js">person.name.first -person.name.last</pre> - -<p><strong>Важливо:</strong> на цьому етапі вам також доведеться переглянути код вашого методу і змінити екземпляри з </p> - -<pre class="brush: js">name[0] -name[1]</pre> - -<p>на </p> - -<pre class="brush: js">name.first -name.last</pre> - -<p>Інакше ваші методи більше не працюватимуть.</p> - -<h2 id="Дужкова_нотація_(Bracket_notation)">Дужкова нотація (Bracket notation)</h2> - -<p>Існує ще один спосіб отримати доступ до властивостей об'єкту - використання <strong>дужкової нотації (bracket notation)</strong>. Замість написання цього коду:</p> - -<pre class="brush: js">person.age -person.name.first</pre> - -<p>Ви можете використовувати:</p> - -<pre class="brush: js">person['age'] -person['name']['first']</pre> - -<p>Це виглядає дуже схожим на те, як ви отримуєте доступ до елементів у масиві, і в принципі так воно і є - замість використання числових індексів для вибору елемента, ви асоціюєте ім'я для кожного значення. Не дивно, що ці об'єкти іноді називають <strong>асоціативними масивами</strong> - вони зіставляють рядки зі значеннями так само, як масиви зіставляють числові індекси зі значеннями.</p> - -<h2 id="Встановлення_елементів_об'єкта">Встановлення елементів об'єкта</h2> - -<p>Досі ми розглядали лише повернення (або <strong>отримання</strong>) елементів об'єктів - ви також можете <strong>встановити</strong> (оновити) значення елемента об'єкта, просто оголосивши елемент, який ви хочете встановити (використовуючи крапкову або дужкову нотацію), наприклад:</p> - -<pre class="brush: js">person.age = 45; -person['name']['last'] = 'Cratchit';</pre> - -<p>Спробуйте ввести ці рядки, а потім знову поверніть елементи, щоб побачити, як вони змінилися:</p> - -<pre class="brush: js">person.age -person['name']['last']</pre> - -<p>Ви можете не просто оновлювати і встановлювати значення властивостей і методів об'єкта, а так сам створювати абсолютно нові елементи. Наприклад:</p> - -<pre class="brush: js">person['eyes'] = 'hazel'; -person.farewell = function() { alert("Bye everybody!"); }</pre> - -<p>Тепер ви можете перевірити ваші нові елементи:</p> - -<pre class="brush: js">person['eyes'] -person.farewell()</pre> - -<p>Одним із корисних аспектів дужкової нотації є те, що вона може використовуватись не тільки для динамічного встановлення значень елементів, але й для їх імен. Припустимо, ми хочемо, щоб користувачі могли зберігати користувацькі типи даних, ввівши ім'я та значення елемента в два текстові поля? Ми могли б отримати такі значення:</p> - -<pre class="brush: js">var myDataName = nameInput.value; -var myDataValue = nameValue.value;</pre> - -<p>Потім ми могли б додати новий елемент і його значення в об'єкт <code>person</code> таким чином:</p> - -<pre class="brush: js">person[myDataName] = myDataValue;</pre> - -<p>Щоб перевірити це, спробуйте додати наступні рядки до свого коду:</p> - -<pre class="brush: js">var myDataName = 'height'; -var myDataValue = '1.75m'; -person[myDataName] = myDataValue;</pre> - -<p>Тепер збережіть й оновіть, і введіть наступне:</p> - -<pre class="brush: js">person.height</pre> - -<p>Додавання властивості об'єкту з використанням наведеного вище методу неможливе з крапковою нотацією, яка може приймати лише літеральне ім'я елемента, а не значення змінної, що вказує на ім'я. </p> - -<h2 id="Що_таке_this">Що таке "this"?</h2> - -<p>Ви могли помітити щось дивне в наших методах. Подивіться на це, наприклад:</p> - -<pre class="brush: js">greeting: function() { - alert('Hi! I\'m ' + this.name.first + '.'); -}</pre> - -<p>Ймовірно, вас цікавить, що таке "this"? <code>this</code> - це ключове слово, яке посилається на поточний об'єкт, всередині якого написаний код - тому, в нашому випадку, <code>this</code> рівнозначний об'єкту <code>person</code>. Але чому б просто не написати <code>person</code>? Як ви побачите в статті <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a>, коли ми починаємо створювати конструктори, і т.д., <code>this</code> дуже корисний - він завжди буде гарантувати, що використовується правильне значення, коли контекст елемента змінюється (наприклад, два різні екземпляри об'єкта <code>person</code> можуть мати різні імена, але захочуть використовувати своє власне при вітанні). </p> - -<p>Давайте проілюструємо, що ми маємо на увазі з спрощеною парою об'єктів <code>person</code>:</p> - -<pre class="brush: js">var person1 = { - name: 'Chris', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -} - -var person2 = { - name: 'Brian', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -}</pre> - -<p>В цьому випадку, <code>person1.greeting()</code> виведе "Hi! I'm Chris."; <code>person2.greeting()</code> з іншого боку виведе "Hi! I'm Brian.", хоча код методу однаковий в обох випадках. Як ми вже говорили раніше, <code>this</code> рівнозначний об'єкту, всередині якого знаходиться код - це не дуже корисно, коли ви пишете літерали об'єктів вручну, але це дійсно допомагає, коли ви генеруєте об'єкти динамічно (наприклад, використовуючи конструктори). Пізніше це стане зрозумілішим.</p> - -<h2 id="Ви_використовували_об'єкти_постійно">Ви використовували об'єкти постійно</h2> - -<p>Поки ви проходили ці приклади, ймовірно, ви помітили, що крапкова нотація, яку ви використовували, виглядає дуже знайомо. Це тому, що ви використовували її протягом усього курсу! Кожного разу, коли ми працювали над прикладом, який використовував вбудований API-інтерфейс браузера або JavaScript об'єкт, ми використовували об'єкти, тому що такі функції побудовані з використанням тих же структур об'єктів, які ми тут розглядали, хоча і більш складні, ніж наші власні користувацькі приклади.</p> - -<p>Тому, коли ви використовували рядкові методи, такі як:</p> - -<pre class="brush: js">myString.split(',');</pre> - -<p>Ви використовували метод, доступний в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Кожного разу, створюючи рядок у своєму коді, цей рядок автоматично створюється як екземпляр <code>String</code>, і тому має декілька загальних методів/властивостей, доступних на ньому.</p> - -<p>Коли ви звертались до об'єктної моделі документа (DOM), використовуючи такі рядки:</p> - -<pre class="brush: js">var myDiv = document.createElement('div'); -var myVideo = document.querySelector('video');</pre> - -<p>Ви використовували методи доступні в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">Document</a></code>. Для кожної завантаженої веб-сторінки створюється екземпляр <code>Document</code>, так званий <code>document,</code> який представляє структуру і зміст всієї сторінки, а також інші функції, такі як URL.</p> - -<p>Те саме стосується і багатьох інших вбудованих об'єктів/API, які ви використовували — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, і т.д.</p> - -<p>Зверніть увагу, що вбудовані об'єкти/API не завжди створюють екземпляри об'єктів автоматично. Наприклад, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a>, який дозволяє новим браузерам запускати системні повідомлення, вимагає, щоб ви створювали новий екземпляр об'єкта, за допомогою конструктора, для кожного повідомлення, яке ви хочете запустити. Спробуйте ввести наступне в консоль JavaScript:</p> - -<pre class="brush: js">var myNotification = new Notification('Hello!');</pre> - -<p>Ми розглянемо конструктори в наступній статті.</p> - -<div class="note"> -<p><strong>Заувага: </strong>Корисно подумати про те, як об'єкти взаємодіють шляхом передачі повідомлень - коли об'єкту потрібен інший об'єкт для виконання якої-небудь дії, він часто надсилає повідомлення іншому об'єкту, за допомогою одного з методів, і чекає відповіді, яку ми знаємо як повернене значення (return value).</p> -</div> - -<h2 id="Підсумок">Підсумок</h2> - -<p>Вітаємо, ви дійшли до завершення нашої першої статті про об'єкти в JS, тепер у вас має бути гарне уявлення про те, як працювати з об'єктами в JavaScript - в тому числі створювати свої власні прості об'єкти. Ви також повинні розуміти, що об'єкти дуже корисні в якості структур для зберігання пов'язаних даних і функціональності - якби ми намагались відстежувати всі властивості і методи в нашому об'єкті <code>person</code> як окремі змінні і функції, цу було б неефективно, і ми б ризикували зіткнутись з іншими змінними і функціями з такими ж іменами. Об'єкти дозволяють нам безпечно зберігати інформацію в своєму власному блоці, поза небезпекою.</p> - -<p>У наступній статті ми почнемо розглядати теорію об'єктно-орієнтованого програмування (ООП), і як ці техніки можуть бути використані в JavaScript.</p> - -<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> - -<h2 id="В_цьому_модулі">В цьому модулі</h2> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> -</ul> diff --git a/files/uk/learn/javascript/objects/index.html b/files/uk/learn/javascript/objects/index.html deleted file mode 100644 index 48bb0d98f1..0000000000 --- a/files/uk/learn/javascript/objects/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Вступ до об'єктів JavaScript -slug: Learn/JavaScript/Objects -tags: - - JavaScript - - Об'єкти -translation_of: Learn/JavaScript/Objects ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Чи не кожна річ у JavaScript є об'єктом — від самих основ, як-от рядки та масиви, до програмних інтерфейсів веб-переглядача. Ба більше, можна створювати власні об'єкти з передбаченою множиною властивостей та функцій для їх обробки. Для дальшого вивчення JavaScript важливим є розуміння об'єктно-орієнтованої природи цієї мови. Саме для того наводимо цю добірку статей. Тут ми докладно вивчатимемо теорію об'єктів та пов'язаний синтаксис, а відтак розглянемо створення власних об'єктів.</p> - -<h2 id="Необхідні_знання">Необхідні знання</h2> - -<p>Перш ніж розпочати, вам слід принаймні ознайомитися з HTML та CSS. Радимо спершу приділити увагу розділам <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Вступ до HTML</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, а вже тоді переходити до вивчення JavaScript.</p> - -<p>Крім того, докладне вивчення об'єктів JavaScript потребує розуміння певних основ цієї мови. Тож варто спершу переглянути статті <a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки з JavaScript</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні елементи в JavaScript</a>.</p> - -<div class="note"> -<p><strong>Заувага</strong>: Якщо ви працюєте за комп'ютером, планшетом тощо, де не маєте змоги створювати власні файли, можете випробувати приклади коду (більшість) в онлайн-редакторах для програмування, як-от <a href="https://jsfiddle.net">JSFiddle</a>, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Путівники">Путівники</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics"> </a></dt> - <dd>В першій статті, що розглядає об'єкти JavaScript, ми ознайомимось з основами синтаксису об'єктів JavaScript та пересвідчимось, що велика частина функціоналу, з яким ми вже працювали, є насправді об'єктами.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a></dt> - <dd>Розібравшись з основами, ми зосередимось на об'єктно-орієнтованому JavaScript (OOJS) — у цій статті представлені основи теорії об'єктно-орієнтованого програмування (ООП), а далі дізнаємось, як за допомогою конструктора функцій JavaScript емулює класи об'єктів та як створювати екземпляри об'єктів.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Прототипи об'єктів</a></dt> - <dd>Прототипи — це механізм, завдяки якому об'єкти JavaScript наслідують функціонал один від одного, але при цьому вони працюють по-іншому, якщо порівнювати з механізмами наслідування в класичних об'єктно-орієнтованих мовах програмування. В цій статті ми дослідимо цю різницю, пояснимо як працюють прототипні ланцюги (prototype chains), і розглянемо як властивість прототипу може використовуватись для додавання методів до існуючих конструкторів.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Наслідування в JavaScript</a></dt> - <dd>Ознайомившись з значною частиною деталей OOJS, ця стаття покаже як створювати "дочірні" класи об'єктів (конструктори), які наслідують функціонал від своїх "батьківських" класів. Крім того, ми дамо декілька порад щод того, де і коли ви можете використовувати OOJS.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Робота з даними JSON</a></dt> - <dd>JavaScript Object Notation (JSON) — це стандартний текстовий формат для представлення структурованих даних на основі об'єктного синтаксису JavaScript, який зазвичай використовується для представлення та передачі даних на веб-сайтах (наприклад, відправлення деяких даних із сервера до клієнта, тому він може відображатись на веб-сторінці). Ви часто стикатиметесь з цим, тому в цій статті ми дамо вам все, що потрібно для роботи з JSON використовуючи JavaScript, включаючи синтаксичний аналіз (parsing) JSON, щоб ви могли отримувати доступ до елементів даних і писати свій власний JSON.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика побудови об'єктів</a></dt> - <dd>У попередніх статтях ми розглянули найголовніші моменти в теорії та деталях синтаксису об'єктів JavaScript, що дає вам тверду основу для початку. В цій статті ми перейдемо до практичних занять, отримаємо більше практичної роботи для побудови власних JavaScript об'єктів, щоб створити щось веселе та барвисте — декілька кольорових стрибучих кульок.</dd> - <dd> </dd> -</dl> - -<h2 id="Завдання">Завдання</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Додавання функціоналу до демо зі стрибучими кульками </a></dt> - <dd>У цьому завданні, ми очікуємо, що ви, використовуючи демо з стрибаючими кульками з попередньої статті як відправну точку, додасте трохи нового та цікавого функціоналу до нього.</dd> -</dl> diff --git a/files/uk/learn/javascript/objects/object-oriented_js/index.html b/files/uk/learn/javascript/objects/object-oriented_js/index.html deleted file mode 100644 index 67b61867ff..0000000000 --- a/files/uk/learn/javascript/objects/object-oriented_js/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Об'єктно-орієнтований JavaScript для початківців -slug: Learn/JavaScript/Objects/Object-oriented_JS -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> - -<p class="summary">Розібравшись з основами, зосередимось на об'єктно-орієнтованому JavaScript (OOJS) - в цій статті представлені основні позиції теорії об'єктно-орієнтованого програмування (ООП) , потім розглянемо, як в JavaScript емулювати класи об'єктів за допомогою функції конструктора, і як створити екземпляри об'єктів.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row"> - <table> - <tbody> - <tr> - <th scope="row">Необхідні знання:</th> - <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) і основи OOJS (див. <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JS</a>).</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як створювати конструктори та екземпляри об'єктів.</td> - </tr> - </tbody> - </table> - </th> - </tr> - </tbody> -</table> - -<h2 id="Об'єктно-орієнтоване_програмування_-_основи">Об'єктно-орієнтоване програмування - основи</h2> - -<p>Давайте почнемо з спрощеного, високорівневого уявлення про об'єктно-орієнтоване програмування (ООП). Ми говоримо спрощеного, тому що ООП може швидко стати дуже складним, і якщо зараз дати повний курс, ймовірно, можна більше заплутати, ніж допомогти. Основна ідея ООП полягає в тому, що ми використовуємо об'єкти, щоб моделювати реальні речі, які ми хочемо представити всередині наших програм і/або забезпечити простий спосіб доступу до функціональних можливостей, які в іншому випадку було б важко або неможливо використати.</p> - -<p>Об'єкти можуть містити пов'язані дані і код, які представляють інформацію про те, що ви намагаєтеся змоделювати, а також функціональні можливості або поведінку, які ви хочете мати. Дані об'єкта (і часто функції теж) можуть бути акуратно збережені (офіційне поняття <strong>інкапсульовані</strong>) всередині об'єктного пакету (якому можна дати певне ім'я для позначення, яке іноді називають <strong>простором імен</strong>), що полегшує структуру і доступ; об'єкти також часто використовуються як сховища даних, які можна легко відправляти по мережі.</p> - -<h3 id="Визначення_шаблону_об'єкта">Визначення шаблону об'єкта</h3> - -<p>Давайте розглянемо просту програму, яка відображає інформацію про учнів та вчителів в школі. Тут ми розглянемо теорію ООП загалом, а не в контексті будь-якої конкретної мови програмування.</p> - -<p>Щоб почати, повернемося до об'єкта <code>person</code> з нашої статті <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a>, який визначає загальні відомості і функціональні можливості людини. Є багато речей, які ви <em>можете</em> дізнатись про людину (її адресу, зріст, розмір взуття, профіль ДНК, номер паспорта, значні особистісні риси ...) , але в цьому випадку нас цікавлять лише ім'я, вік, стать та інтереси, і ми також хочемо написати коротку інформацію про неї на основі цих даних, і отримувати їх, щоб привітатись. Це відомо як <strong>абстракція (abstraction)</strong> - створення простої моделі більш складної речі, яка представляє її найважливіші аспекти таким чином, щоб було зручно працювати для виконання цілей нашої програми.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> - -<p>В деяких мовах ООП, це загальне визначення типу об'єкта називається класом <strong>(class) </strong>(JavaScript використовує інший механізм і термінологію, як ви побачите нижче) - це насправді не об'єкт, це швидше шаблон, який визначає, які характеристики повинен мати об'єкт.</p> - -<h3 id="Створення_реальних_об'єктів">Створення реальних об'єктів</h3> - -<p>З нашого класу ми можемо створити <strong>екземпляри об'єктів</strong> - об'єкти, що містять дані та функціональні можливості, визначені в класі. З нашого класу Person, можемо створити декілька справжніх людей:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> - -<p>Коли екземпляр об'єкта створюється з класу, <strong>функція конструктора</strong> класу виконується для його створення. Цей процес створення екземпляра об'єкта з класу називається <strong>instantiation</strong> - екземпляр об'єкта створюється з класу.</p> - -<h3 id="Specialist_classes">Specialist classes</h3> - -<p>In this case we don't want generic people — we want teachers and students, which are both more specific types of people. In OOP, we can create new classes based on other classes — these new <strong>child classes</strong> can be made to <strong>inherit</strong> the data and code features of their <strong>parent class</strong>, so you can reuse functionality common to all the object types rather than having to duplicate it. Where functionality differs between classes, you can define specialized features directly on them as needed.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> - -<p>This is really useful — teachers and students share many common features such as name, gender, and age, so it is convenient to only have to define those features once. You can also define the same feature separately in different classes, as each definition of that feature will be in a different namespace. For example, a student's greeting might be of the form "Yo, I'm [firstName]" (e.g <em>Yo, I'm Sam</em>), whereas a teacher might use something more formal, such as "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (e.g <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p> - -<div class="note"> -<p><strong>Note</strong>: The fancy word for the ability of multiple object types to implement the same functionality is <strong>polymorphism</strong>. Just in case you were wondering.</p> -</div> - -<p>You can now create object instances from your child classes. For example:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> - -<p>In the rest of the article, we'll start to look at how OOP theory can be put into practice in JavaScript.</p> - -<h2 id="Constructors_and_object_instances">Constructors and object instances</h2> - -<p>Some people argue that JavaScript is not a true object-oriented language — for example, its <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code> statement is just syntactical sugar over existing prototypical inheritance and is not a <code>class</code> in a traditional sense. JavaScript, uses special functions called <strong>constructor functions</strong> to define objects and their features. They are useful because you'll often come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects as you need in an effective way, attaching data and functions to them as required.</p> - -<p>When a new object instance is created from a constructor function, its core functionality (as defined by its prototype, which we'll explore in the article <a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>) is not all copied over to the new object like "classic" OO languages — instead the functionality is linked to via a reference chain called a <strong>prototype chain</strong>. So this is not true instantiation, strictly speaking — JavaScript uses a different mechanism to share functionality between objects.</p> - -<div class="note"> -<p><strong>Note</strong>: Not being "classic OOP" is not necessarily a bad thing; as mentioned above, OOP can get very complex very quickly, and JavaScript has some nice ways to take advantage of OO features without having to get too deep into it.</p> -</div> - -<p>Let's explore creating classes via constructors and creating object instances from them in JavaScript. First of all, we'd like you to make a new local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> file we saw in our first Objects article.</p> - -<h3 id="A_simple_example">A simple example</h3> - -<ol> - <li>Let's start by looking at how you could define a person with a normal function. Add this function within the <code>script</code> element: - - <pre class="brush: js">function createNewPerson(name) { - var obj = {}; - obj.name = name; - obj.greeting = function() { - alert('Hi! I\'m ' + this.name + '.'); - }; - return obj; -}</pre> - </li> - <li>You can now create a new person by calling this function — try the following lines in your browser's JavaScript console: - <pre class="brush: js">var salva = createNewPerson('Salva'); -salva.name; -salva.greeting();</pre> - This works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it? Fortunately JavaScript provides us with a handy shortcut, in the form of constructor functions — let's make one now!</li> - <li>Replace your previous function with the following: - <pre class="brush: js">function Person(name) { - this.name = name; - this.greeting = function() { - alert('Hi! I\'m ' + this.name + '.'); - }; -}</pre> - </li> -</ol> - -<p>The constructor function is JavaScript's version of a class. You'll notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods. You'll see the <code>this</code> keyword being used here as well — it is basically saying that whenever one of these object instances is created, the object's <code>name</code> property will be equal to the name value passed to the constructor call, and the <code>greeting()</code> method will use the name value passed to the constructor call too.</p> - -<div class="note"> -<p><strong>Note</strong>: A constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code.</p> -</div> - -<p>So how do we call a constructor to create some objects?</p> - -<ol> - <li>Add the following lines below your previous code addition: - <pre class="brush: js">var person1 = new Person('Bob'); -var person2 = new Person('Sarah');</pre> - </li> - <li>Save your code and reload it in the browser, and try entering the following lines into your JS console: - <pre class="brush: js">person1.name -person1.greeting() -person2.name -person2.greeting()</pre> - </li> -</ol> - -<p>Cool! You'll now see that we have two new objects on the page, each of which is stored under a different namespace — when you access their properties and methods, you have to start calls with <code>person1</code> or <code>person2</code>; they are neatly packaged away so they won't clash with other functionality. They do, however, have the same <code>name</code> property and <code>greeting()</code> method available. Note that they are using their own <code>name</code> value that was assigned to them when they were created; this is one reason why it is very important to use <code>this</code>, so they will use their own values, and not some other value.</p> - -<p>Let's look at the constructor calls again:</p> - -<pre class="brush: js">var person1 = new Person('Bob'); -var person2 = new Person('Sarah');</pre> - -<p>In each case, the <code>new</code> keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable — very similar to how a standard function is called. Each instance is created according to this definition:</p> - -<pre class="brush: js">function Person(name) { - this.name = name; - this.greeting = function() { - alert('Hi! I\'m ' + this.name + '.'); - }; -}</pre> - -<p>After the new objects have been created, the <code>person1</code> and <code>person2</code> variables contain the following objects:</p> - -<pre class="brush: js">{ - name: 'Bob', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -} - -{ - name: 'Sarah', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -}</pre> - -<p>Note that when we are calling our constructor function, we are defining <code>greeting()</code> every time, which isn't ideal. To avoid this, we can define functions on the prototype instead, which we will look at later.</p> - -<h3 id="Creating_our_finished_constructor">Creating our finished constructor</h3> - -<p>The example we looked at above was only a simple example to get us started. Let's now get on and create our final <code>Person()</code> constructor function.</p> - -<ol> - <li>Remove the code you inserted so far, and add in this replacement constructor — this is exactly the same as the simple example in principle, with just a bit more complexity: - <pre class="brush: js">function Person(first, last, age, gender, interests) { - this.name = { - 'first': first, - 'last' : last - }; - this.age = age; - this.gender = gender; - this.interests = interests; - this.bio = function() { - alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); - }; - this.greeting = function() { - alert('Hi! I\'m ' + this.name.first + '.'); - }; -}</pre> - </li> - <li>Now add in the following line below it, to create an object instance from it: - <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> - </li> -</ol> - -<p>You'll now see that you can access the properties and methods just like we did previously — try these in your JS console:</p> - -<pre class="brush: js">person1['age'] -person1.interests[1] -person1.bio() -// etc.</pre> - -<div class="note"> -<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p> -</div> - -<h3 id="Further_exercises">Further exercises</h3> - -<p>To start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the resulting object instances.</p> - -<p>In addition, there are a couple of problems with our <code>bio()</code> method — the output always includes the pronoun "He", even if your person is female, or some other preferred gender classification. And the bio will only include two interests, even if more are listed in the <code>interests</code> array. Can you work out how to fix this in the class definition (constructor)? You can put any code you like inside a constructor (you'll probably need a few conditionals and a loop). Think about how the sentences should be structured differently depending on gender, and depending on whether the number of listed interests is 1, 2, or more than 2.</p> - -<div class="note"> -<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p> -</div> - -<h2 id="Other_ways_to_create_object_instances">Other ways to create object instances</h2> - -<p>So far we've seen two different ways to create an object instance — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declaring an object literal</a>, and using a constructor function (see above).</p> - -<p>These make sense, but there are other ways — we want to make you familiar with these in case you come across them in your travels around the Web.</p> - -<h3 id="The_Object()_constructor">The Object() constructor</h3> - -<p>First of all, you can use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor to create a new object. Yes, even generic objects have a constructor, which generates an empty object.</p> - -<ol> - <li>Try entering this into your browser's JavaScript console: - <pre class="brush: js">var person1 = new Object();</pre> - </li> - <li>This stores an empty object in the <code>person1</code> variable. You can then add properties and methods to this object using dot or bracket notation as desired; try these examples in your console: - <pre class="brush: js">person1.name = 'Chris'; -person1['age'] = 38; -person1.greeting = function() { - alert('Hi! I\'m ' + this.name + '.'); -};</pre> - </li> - <li>You can also pass an object literal to the <code>Object()</code> constructor as a parameter, to prefill it with properties/methods. Try this in your JS console: - <pre class="brush: js">var person1 = new Object({ - name: 'Chris', - age: 38, - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -});</pre> - </li> -</ol> - -<h3 id="Using_the_create()_method">Using the create() method</h3> - -<p>Constructors can help you give your code order—you can create constructors in one place, then create instances as needed, and it is clear where they came from.</p> - -<p>However, some people prefer to create object instances without first creating constructors, especially if they are creating only a few instances of an object. JavaScript has a built-in method called <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> that allows you to do that. With it, you can create a new object based on any existing object.</p> - -<ol> - <li>With your finished exercise from the previous sections loaded in the browser, try this in your JavaScript console: - <pre class="brush: js">var person2 = Object.create(person1);</pre> - </li> - <li>Now try these: - <pre class="brush: js">person2.name -person2.greeting()</pre> - </li> -</ol> - -<p>You'll see that <code>person2</code> has been created based on <code>person1</code>—it has the same properties and method available to it.</p> - -<p>One limitation of <code>create()</code> is that IE8 does not support it. So constructors may be more effective if you want to support older browsers.</p> - -<p>We'll explore the effects of <code>create()</code> in more detail later on.</p> - -<h2 id="Summary">Summary</h2> - -<p>This article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. In addition, we have started to look at how JavaScript relates to and how it differs from "classic OOP", how to implement classes in JavaScript using constructor functions, and different ways of generating object instances.</p> - -<p>In the next article, we'll explore JavaScript object prototypes.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> -</ul> - -<p> </p> diff --git a/files/uk/learn/learning_and_getting_help/index.html b/files/uk/learn/learning_and_getting_help/index.html deleted file mode 100644 index 224cb6f423..0000000000 --- a/files/uk/learn/learning_and_getting_help/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: Навчання та отримання допомоги -slug: Learn/Learning_and_getting_help -translation_of: Learn/Learning_and_getting_help -original_slug: Learn/Навчання_та_отримання_допомоги ---- -<p>{{learnsidebar}}</p> - -<p>It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..</p> - -<h2 id="Effective_learning">Effective learning</h2> - -<p>Let's move straight on and think about effective learning.</p> - -<h3 id="Different_learning_methods">Different learning methods</h3> - -<p>It is interesting to consider that there are two main ways in which your brain learns things — <strong>focused</strong> and <strong>diffuse</strong> learning:</p> - -<ul> - <li>Focused learning is what you might more traditionally associate with academic subjects. You concentrate deeply on a low-level topic and solving the specific problems that it brings. You are focused on a narrow area.</li> - <li>Diffuse learning is more to do with high-level thinking around a wider area. You let your mind wander more widely, and seemingly make random connections between different things. This is more the kind of thinking you do while you are in the shower, or during a coffee break.</li> -</ul> - -<p>From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, <strong>both</strong> are very important.</p> - -<p>Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. </p> - -<p>For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.</p> - -<p>This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.</p> - -<p>It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:</p> - -<ol> - <li>Know how to fix problem A with tool A.</li> - <li>Know how to fix problem B with tool B.</li> - <li>Not know how to fix problem C.</li> -</ol> - -<p>Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.</p> - -<h3 id="Different_learning_materials">Different learning materials</h3> - -<p>It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.</p> - -<h4 id="Textual_articles">Textual articles</h4> - -<p>You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS <code>background</code> property"?)</p> - -<p>MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.</p> - -<p>There are also several other great resources on the web, some of which we'll mention below.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.</p> -</div> - -<h4 id="Videos">Videos</h4> - -<p>There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a>, and <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.</p> - -<h4 id="Interactive_code_playgrounds">Interactive code playgrounds</h4> - -<p>You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. <a href="https://www.codecademy.com/">Codecademy</a> for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.</p> - -<p>Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like <a href="https://jsbin.com/?html,css,js,output">JSBin</a>, <a href="https://codepen.io/">Codepen</a>, or <a href="https://glitch.com/">Glitch</a>. In fact, you'll be called to do so as part of this course when you are learning!</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You can share the web address of the example with them so they can see it.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.</p> -</div> - -<h3 id="Making_a_plan">Making a plan</h3> - -<p>It is a good idea to create a plan to help you achieve what you want to achieve through your learning.</p> - -<h4 id="A_goal_statement">A goal statement</h4> - -<p>It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:</p> - -<ul> - <li>I want to become a professional web developer in two years' time.</li> - <li>I want to learn enough to build a website for my local amateur tennis club.</li> - <li>I want to learn HTML and CSS so I can expand my job role to take over updating the content on our company website.</li> -</ul> - -<p>The following are not quite as reasonable:</p> - -<ul> - <li>I want to go from a complete beginner to becoming a senior web developer in three months.</li> - <li>I want to start my own company and build a social network that will out-perform Facebook, in two years.</li> -</ul> - -<h4 id="What_do_you_need_to_get_there">What do you need to get there?</h4> - -<p>Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:</p> - -<p>Materials I need:</p> - -<ul> - <li>A computer</li> - <li>Internet access</li> - <li>Pens and paper</li> -</ul> - -<p>Knowledge I need:</p> - -<ul> - <li>How to use HTML, CSS, JavaScript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).</li> - <li>How to get a domain, hosting, and use them to put a web site or application online.</li> - <li>How to run a small business.</li> - <li>How to advertise my business and attract clients.</li> -</ul> - -<h4 id="How_much_time_and_money_will_it_take">How much time and money will it take?</h4> - -<p>Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.</p> - -<h4 id="How_many_hours_per_week_do_I_need_to_do">How many hours per week do I need to do?</h4> - -<p>Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:</p> - -<p>"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks' holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."</p> - -<p>How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.</p> - -<p>If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!</p> - -<p>When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!</p> - -<p>Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:</p> - -<ul> - <li>HTML and CSS basics learnt by summer</li> - <li>JavaScript basics learnt by December</li> - <li>Example website project built by next April</li> - <li>etc.</li> -</ul> - -<p>Keep thinking about how much progress you are making, and adjust your plan if needs be.</p> - -<h3 id="Staying_motivated">Staying motivated</h3> - -<p>It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:</p> - -<ul> - <li><strong>Try to make your work environment as productive as possible</strong>. Try to get a comfortable desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). Don't try to work in a room with distractions — for example a television on, with your friends watching football! Also, leave your mobile phone out of the room — most people we have are distracted by their phone a lot, so you should leave it somewhere else.</li> - <li><strong>Take regular breaks</strong>. It is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. That just leads to frustration — it is often better to take a break, move around for a bit, then relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. It is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. We'd recommend taking a 15 minutes break every hour to 90 minutes.</li> - <li><strong>Eat, exercise, and sleep</strong>. Eat healthily, get regular exercise, and make sure you get enough sleep. This sounds obvious, but it is easy to forget when you get really into coding. Factor these essential ingredients into your schedule, and make sure you are not doing your learning time instead of these things.</li> - <li><strong>Give yourself rewards</strong>. It's true that <em>all work and no play makes Jack a dull boy</em>. You should try to schedule fun things to do after each learning session, which you'll only have when the learning is over and complete. If you are really into gaming, for example, there is something quite motivating about saying "no gaming tonight unless I get through my 5 hours of learning". Now all you need is willpower. Good luck!</li> - <li><strong>Co-learning and demoing</strong>. This won't be an option for everyone, but if at all possible try to learn alongside others. Again, this is easier if you are doing a college course on web development, but perhaps you could convince a friend to learn along with you, or find a local meetup or skill-sharing group? It is really useful and motivating to have someone to discuss ideas with and ask for help, and you should also take time to demo your work. Those shouts of appreciation will spur you on.</li> -</ul> - -<h3 id="Effective_problem_solving">Effective problem solving</h3> - -<p>There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.</p> - -<h4 id="Break_things_down_into_chunks">Break things down into chunks</h4> - -<p>For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.</p> - -<p>For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:</p> - -<ul> - <li>Create the HTML structure</li> - <li>Work out basic site typography</li> - <li>Work out a basic color scheme</li> - <li>Implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer.</li> - <li>Implement a horizontal navigation menu</li> - <li>etc.</li> -</ul> - -<p>Then you could break it down further, for example, "Implement horizontal navigation menu" could be written out as:</p> - -<ul> - <li>Make a list of menu items sit horizontally in a line.</li> - <li>Remove unneeded defaults, like list spacing and bullet points.</li> - <li>Style hover/focus/active states of menu items appropriately.</li> - <li>Make the menu items equally spaced along the line.</li> - <li>Give the menu items enough vertical spacing.</li> - <li>Make sure the text is centered inside each menu item</li> - <li>etc.</li> -</ul> - -<p>Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!</p> - -<h4 id="Learn_and_recognise_the_patterns">Learn and recognise the patterns</h4> - -<p>As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:</p> - -<p>A nav menu is usually created from a list of links, something like:</p> - -<pre class="brush: html notranslate"><ul> - <li>First menu item</li> - <li>Second menu item</li> - <li>Third menu item</li> - <li>etc.</li> -</ul> -</pre> - -<p>To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:</p> - -<pre class="brush: css notranslate">ul { - display: flex; -}</pre> - -<p>To remove unneeded spacing and bullet points, we can do this:</p> - -<pre class="brush: css notranslate">ul { - list-style-type: none; - padding: 0; -}</pre> - -<p>etc.</p> - -<p>If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.</p> - -<p>When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.</p> - -<p>In addition, the web has <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The simplest solution is often the best.</p> -</div> - -<h3 id="Getting_practice">Getting practice</h3> - -<p>The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.</p> - -<p>Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.</p> - -<h2 dir="ltr" id="Getting_help">Getting help</h2> - -<p dir="ltr">Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.</p> - -<p dir="ltr">There are a variety of ways to get help, and what follows are some tips for doing so more effectively.</p> - -<h3 dir="ltr" id="Effective_web_searches">Effective web searches</h3> - -<p dir="ltr">One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? </p> - -<p dir="ltr">It is often fairly obvious what to search for. For example:</p> - -<ul dir="ltr"> - <li>If you want to find out more about responsive web design, you could search for "responsive web design".</li> - <li>If you want to find out more about a specific technology feature, such as the HTML <code><video></code> element, or the CSS <code>background-color</code> or <code>opacity</code> properties, or the JavaScript <code>Date.setTime()</code> method, you should just search for the feature's name.</li> - <li>If you are looking for some more specific information, you can add other keywords as modifiers, for example "<video> element autoplay attribute", or "Date.setTime parameters".</li> -</ul> - -<p dir="ltr">If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.</p> - -<ul dir="ltr"> - <li>Run code after several promises are fulfilled</li> - <li>Play a video stream from a webcam in the browser</li> - <li>Create a linear gradient in the background of your element</li> -</ul> - -<h4 id="Error_messages">Error messages</h4> - -<p>If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <a href="https://stackoverflow.com/">Stack Overflow</a> is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.</p> -</div> - -<h4 id="Browser_testing">Browser testing</h4> - -<p dir="ltr">It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:</p> - -<ul dir="ltr"> - <li><video> playback doesn't work in the iOS browser.</li> - <li>Firefox doesn't seem to support the Beetlejuice API.</li> -</ul> - -<h3 dir="ltr" id="Using_MDN">Using MDN</h3> - -<p dir="ltr">The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.</p> - -<p dir="ltr">We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.</p> - -<p dir="ltr">If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color".</p> - -<h3 dir="ltr" id="Other_online_resources">Other online resources</h3> - -<p>We already mentioned Stack Overflow, but there are other online resources that can help.</p> - -<p>It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:</p> - -<ul dir="ltr"> - <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li> - <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li> - <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li> -</ul> - -<p dir="ltr">However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.</p> - -<h3 dir="ltr" id="Physical_meetups">Physical meetups</h3> - -<p dir="ltr">Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. <a href="https://www.meetup.com/find/tech/">meetup.com</a> is a good place to find local physical meetups, and you could also try your local press/what's on sites.</p> - -<p dir="ltr">You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.</p> - -<h2 dir="ltr" id="See_also">See also</h2> - -<ul dir="ltr"> - <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li> - <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li> - <li><a href="https://www.codecademy.com/">Codecademy</a></li> -</ul> diff --git a/files/uk/learn/server-side/django/index.html b/files/uk/learn/server-side/django/index.html deleted file mode 100644 index c26c8fbe6b..0000000000 --- a/files/uk/learn/server-side/django/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Django веб-фреймворк (Python) -slug: Learn/Server-side/Django -translation_of: Learn/Server-side/Django ---- -<div>{{LearnSidebar}}</div> - -<p>Django є надзвичайно популярним і повнофункціональним серверним веб-фреймворком, що написаний на Python. Даний модуль показує вам, чому Django є одним з найпопулярніших структур веб-сервера, а також як налаштувати середовище розробки, і як приступити до роботи щоб створювати власні веб-додатки.</p> - -<h2 id="Передумови">Передумови</h2> - -<p>Перед початком цього модуля вам не потрібно володіти будь-якими знаннями про Django. Ви повинні лише розуміти, що таке серверне веб-програмування та веб-фреймворк, для цього читайте тему в нашому модулі - <a href="/en-US/docs/Learn/Server-side/First_steps">Програмування веб-сайту на стороні сервера, перші кроки</a>.</p> - -<p>Вітається володіння загальними знаннями концепцій програмування і мови програмування <a href="/en-US/docs/Glossary/Python">Python</a>, проте не є необхідним для розуміння основних понять.</p> - -<div class="note"> -<p><strong>Примітка</strong>: Python є однією із найпростіших мов програмування, легкою для освоєння та розуміння початківцями. Якщо ж ви прагнете зрозуміти цей модуль краще, то для цього є безліч безкоштовних книг і посібників, які є в інтернеті у вільному доступі (початківці у програмуванні можуть переглянути сторінку на wiki.python.org - <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python для початківців</a>).</p> -</div> - -<h2 id="Посібники">Посібники</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Вступ до Django</a></dt> - <dd>У цій першій статті про Django ми відповімо на питання "Що таке Django?" і дамо уявлення того що робить веб-фраймворк особливого. We'll outline the main features, including some of the advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you then go on to set it up and start playing.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Налаштування середовища розробки Django</a></dt> - <dd>Now that you know what Django is for, we'll show you how to setup and test a Django development environment on Windows, Linux (Ubuntu), and Mac OS X — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Посібник Django: "Локальна бібліотека" - приклад веб-сайту</a></dt> - <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Посібник Django, частина 2: Створення скелету веб-сайту</a></dt> - <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Посібник Django, частина 3: Використання моделей</a></dt> - <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Посібник Django, частина 4: Адміністрування сайту</a></dt> - <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some of ways you can further improve the presentation of the admin site.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Посібник Django, частина 5: Створення домашньої сторінки</a></dt> - <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Посібник Django Tutorial Part 6: Загальний список і детальний перегляд</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Посібник Django, частина 7: Фреймворк сесій</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does shows how you can use the session framework to provide peristent behaviour for anonymous users in your own sites.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Посібник Django, частина 8: Аутентифікація користувачів і права доступу</a></dt> - <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Посібник Django, частина 9: Робота з формами</a></dt> - <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Посібник Django, частина 10: Тестування веб-додатку Django</a></dt> - <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Посібник Django, частина 11: Розгортання веб-додатку Django на веб-сервері</a></dt> - <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django безпека веб-додатків</a></dt> - <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's in-built protections handle such threats.</dd> -</dl> - -<h2 id="Оцінювання">Оцінювання</h2> - -<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django міні блог</a></dt> - <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> -</dl> diff --git a/files/uk/learn/server-side/django/introduction/index.html b/files/uk/learn/server-side/django/introduction/index.html deleted file mode 100644 index 26ef60a53a..0000000000 --- a/files/uk/learn/server-side/django/introduction/index.html +++ /dev/null @@ -1,285 +0,0 @@ ---- -title: Введення в Django -slug: Learn/Server-side/Django/Introduction -tags: - - CodingScripting - - Intro - - Learn - - Python - - Server-side programming - - django - - Джанго - - Кодування - - Програмування - - Пітон - - уроки -translation_of: Learn/Server-side/Django/Introduction ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> - -<p class="summary">У цій першій статті Django, ми відповімо на питання "Що таке Django?" і даємо вам обзор того, що робить цей веб-фреймворк особливим. Ми розглянемо основні характеристики, включаючи деякі додаткові функціональні можливості модуля, які ми не встигли ще обговорити. Ми також покажемо вам деякі з основних блоків програми Django (хоча на даний момент у вас ще немає середовища розробки, в якій можна було б її протестувати).</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови::</th> - <td>Basic computer literacy. A general understanding of <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, and in particular the mechanics of <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td> - </tr> - <tr> - <th scope="row">Завдання:</th> - <td>To gain familiarity with what Django is, what functionality it provides, and the main building blocks of a Django application.</td> - </tr> - </tbody> -</table> - -<h2 id="Що_таке_Django">Що таке Django?</h2> - -<p>Django - це високорівневий веб-фреймворк Python, що дозволяє швидко розвивати безпечні та підтримувані сайти. Побудований досвідченими розробниками, Django піклується про більшу частину турбот про веб-розробку, тому ви можете зосередитися на написанні програми без необхідності винаходити колесо.Це вільний і відкритий код, має процвітаюче і активне співтовариство, велику документацію, і безліч варіантів для безкоштовної і платної підтримки.</p> - -<p>Django допоможе вам написати програмне забезпечення, яке:</p> - -<dl> - <dt>Complete</dt> - <dd>Django слідує філософії "Батарейки включені" і забезпечує майже все, що розробники можуть захотіти зробити "з коробки". Оскільки все, що вам потрібно, є частиною одного "продукту", все працює безперешкодно, слідує послідовним принципам дизайну і має велику й найновішу документацію.</dd> - <dt>Універсальний</dt> - <dd>Django використовується для створення майже будь-якого типу веб-сайту — fвід систем управління контентом та вікі, через соціальні мережі та сайти новин. Він може працювати з будь-якою стороною клієнта, і може надавати вміст практично в будь-якому форматі (у тому числі HTML, RSS feeds, JSON, XML, etc). Сайт, який ви зараз читаєте, заснований на Django! <br> - Internally, while it provides choices for almost any functionality you might want (e.g. several popular databases, templating engines, etc.), it can also be extended to use other components if needed.</dd> - <dt>Безпечний</dt> - <dd>Django helps developers avoid many common security mistakes by providing a framework that has been engineered to "do the right things" to protect the website automatically. For example, Django provides a secure way to manage user accounts and passwords, avoiding common mistakes like putting session information in cookies where it is vulnerable (instead cookies just contain a key, and the actual data is stored in the database) or directly storing passwords rather than a password hash.<br> - <br> - <em>A password hash is a fixed-length value created by sending the password through a <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">cryptographic hash function</a>. Django can check if an entered password is correct by running it through the hash function and comparing the output to the stored hash value. However due to the "one-way" nature of the function, even if a stored hash value is compromised it is hard for an attacker to work out the original password.</em><br> - <br> - Django enables protection against many vulnerabilities by default, including SQL injection, cross-site scripting, cross-site request forgery and clickjacking (see <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> for more details of such attacks).</dd> - <dt>Масштабованість</dt> - <dd>Django uses a component-based “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” architecture (each part of the architecture is independent of the others, and can hence be replaced or changed if needed). Having a clear separation between the different parts means that it can scale for increased traffic by adding hardware at any level: caching servers, database servers, or application servers. Some of the busiest sites have successfully scaled Django to meet their demands (e.g. Instagram and Disqus, to name just two).</dd> - <dt>Підтримується</dt> - <dd>Django code is written using design principles and patterns that encourage the creation of maintainable and reusable code. In particular, it makes use of the Don't Repeat Yourself (DRY) principle so there is no unnecessary duplication, reducing the amount of code. Django also promotes the grouping of related functionality into reusable "applications" and, at a lower level, groups related code into modules (along the lines of the <a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller (MVC)</a> pattern).</dd> - <dt>Портативний</dt> - <dd>Django is written in Python, which runs on many platforms. That means that you are not tied to any particular server platform, and can run your applications on many flavours of Linux, Windows, and Mac OS X. Furthermore, Django is well-supported by many web hosting providers, who often provide specific infrastructure and documentation for hosting Django sites.</dd> -</dl> - -<h2 id="Звідки_він">Звідки він?</h2> - -<p>Django was initially developed between 2003 and 2005 by a web team who were responsible for creating and maintaining newspaper websites. After creating a number of sites, the team began to factor out and reuse lots of common code and design patterns. This common code evolved into a generic web development framework, which was open-sourced as the "Django" project in July 2005. </p> - -<p>Django has continued to grow and improve, from its first milestone release (1.0) in September 2008 through to the recently-released version 2.0 (2017). Each release has added new functionality and bug fixes, ranging from support for new types of databases, template engines, and caching, through to the addition of "generic" view functions and classes (which reduce the amount of code that developers have to write for a number of programming tasks). </p> - -<div class="note"> -<p><strong>Note</strong>: Check out <span style="line-height: 1.5;">the <a href="https://docs.djangoproject.com/en/stable/releases/">release notes</a> on the Django website to see what has changed in recent versions, and how much work is going into making Django better.</span></p> -</div> - -<p>Django is now a thriving, collaborative open source project, with many thousands of users and contributors. While it does still have some features that reflect its origin<span style="line-height: 1.5;">, Django has evolved into a versatile framework that is capable of developing any type of website. </span></p> - -<h2 id="Наскільки_популярним_є_Django">Наскільки популярним є Django?</h2> - -<p>There isn't any readily-available and definitive measurement of popularity of server-side frameworks (although sites like <a href="http://hotframeworks.com/">Hot Frameworks</a> attempt to assess popularity using mechanisms like counting the number of GitHub projects and StackOverflow questions for each platform). A better question is whether Django is "popular enough" to avoid the problems of unpopular platforms. Is it continuing to evolve? Can you get help if you need it? Is there an opportunity for you to get paid work if you learn Django? </p> - -<p>Based on the number of high profile sites that use Django, the number of people contributing to the codebase, and the number of people providing both free and paid for support, then yes, Django is a popular framework!</p> - -<p>High-profile sites that use Django include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, and Open Stack (source: <a href="https://www.djangoproject.com/">Django home page</a>).</p> - -<h2 id="Is_Django_opinionated">Is Django opinionated?</h2> - -<p>Web frameworks often refer to themselves as "opinionated" or "unopinionated".</p> - -<p>Opinionated frameworks are those with opinions about the "right way" to handle any particular task. They often support rapid development <em>in a particular domain </em>(solving problems of a particular type) because the right way to do anything is usually well-understood and well-documented. However they can be less flexible at solving problems outside their main domain, and tend to offer fewer choices for what components and approaches they can use.</p> - -<p>Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve a goal, or even what components should be used. They make it easier for developers to use the most suitable tools to complete a particular task, albeit at the cost that you need to find those components yourself.<br> - <br> - Django is "somewhat opinionated", and hence delivers the "best of both worlds". It provides a set of components to handle most web development tasks and one (or two) preferred ways to use them. However, Django's decoupled architecture means that you can usually pick and choose from a number of different options, or add support for completely new ones if desired.</p> - -<h2 id="Як_виглядає_код_Django">Як виглядає код Django?</h2> - -<p>In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what is needed based on the URL and possibly information in <code>POST</code> data or <code>GET</code> data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.</p> - -<p>Django web applications typically group the code that handles each of these steps into separate files:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<ul> - <li><strong>URLs: </strong>While it is possible to process requests from every single URL via a single function, it is much more maintainable to write a separate view function to handle each resource. A URL mapper is used to redirect HTTP requests to the appropriate view based on the request URL. The URL mapper can also match particular patterns of strings or digits that appear in an URL, and pass these to a view function as data.</li> - <li><strong>View:</strong> A view is a request handler function, which receives HTTP requests and returns HTTP responses. Views access the data needed to satisfy requests via <em>models</em>, and delegate the formatting of the response to <em>templates</em>.</li> - <li><strong>Models:</strong> Models are Python objects that define the structure of an application's data, and provide mechanisms to manage (add, modify, delete) and query records in the database. </li> - <li><strong>Templates:</strong> A template is a text file defining the structure or layout of a file (such as an HTML page), with placeholders used to represent actual content. A <em>view</em> can dynamically create an HTML page using an HTML template, populating it with data from a <em>model</em>. A template can be used to define the structure of any type of file; it doesn't have to be HTML!</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Django refers to this organisation as the "Model View Template (MVT)" architecture. It has many similarities to the more familiar <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> architecture. </p> -</div> - -<ul> -</ul> - -<p>The sections below will give you an idea of what these main parts of a Django app look like (we'll go into more detail later on in the course, once we've set up a development environment).</p> - -<h3 id="Sending_the_request_to_the_right_view_(urls.py)">Sending the request to the right view (urls.py)</h3> - -<p>A URL mapper is typically stored in a file named <strong>urls.py</strong>. In the example below, the mapper (<code>urlpatterns</code>) defines a list of mappings between <em>routes</em> (specific URL <em>patterns) </em>and corresponding view functions. If an HTTP Request is received that has a URL matching a specified pattern then the associated view function will be called and passed the request.</p> - -<pre>urlpatterns = [ - <strong>path('admin/', admin.site.urls), - </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), - path('catalog/', include('catalog.urls')), - re_path(r'^([0-9]+)/$', views.best), -] -</pre> - -<p>The <code>urlpatterns</code> object is a list of <code>path()</code> and/or <code>re_path()</code> functions (Python lists are defined using square brackets, where items are separated by commas and may have an <a href="https://docs.python.org/3/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">optional trailing comma</a>. For example: <code>[item1, item2, item3,]</code>).</p> - -<p>The first argument to both methods is a route (pattern) that will be matched. The <code>path()</code> method uses angle brackets to define parts of a URL that will be captured and passed through to the view function as named arguments. The <code>re_path()</code> function uses a flexible pattern matching approach known as a regular expression. We'll talk about these in a later article!</p> - -<p>The second argument is another function that will be called when the pattern is matched. The notation <code>views.book_detail</code> indicates that the function is called <code>book_detail()</code> and can be found in a module called <code>views</code> (i.e. inside a file named <code>views.py</code>)</p> - -<h3 id="Handling_the_request_(views.py)">Handling the request (views.py)</h3> - -<p>Views are the heart of the web application, receiving HTTP requests from web clients and returning HTTP responses. In between, they marshall the other resources of the framework to access databases, render templates, etc. </p> - -<p>The example below shows a minimal view function <code>index()</code>, which could have been called by our URL mapper in the previous section. Like all view functions it receives an <code>HttpRequest</code> object as a parameter (<code>request</code>) and returns an <code>HttpResponse</code> object. In this case we don't do anything with the request, and our response simply returns a hard-coded string. We'll show you a request that does something more interesting in a later section.</p> - -<pre class="brush: python"># filename: views.py (Django view functions) - -from django.http import HttpResponse - -def index(request): - # Get an HttpRequest - the request parameter - # perform operations using information from the request. - # Return HttpResponse - return HttpResponse('Hello from Django!') -</pre> - -<div class="note"> -<p><strong>Note</strong>: A little bit of Python:</p> - -<ul> - <li><a href="https://docs.python.org/3/tutorial/modules.html">Python modules</a> are "libraries" of functions, stored in separate files, that we might want to use in our code. Here we import just the <code>HttpResponse</code> object from the <code>django.http</code> module so that we can use it in our view: <code>from django.http import HttpResponse</code> . There are other ways of importing some or all objects from a module.</li> - <li>Functions are declared using the <code>def</code> keyword as shown above, with named parameters listed in brackets after the name of the function; the whole line ends in a colon. Note how the next lines are all <strong>indented</strong>. The indentation is important, as it specifies that the lines of code are inside that particular block (mandatory indentation is a key feature of Python, and is one reason that Python code is so easy to read).</li> -</ul> -</div> - -<ul> -</ul> - -<p>Views are usually stored in a file called <strong>views.py</strong>.</p> - -<h3 id="Defining_data_models_(models.py)">Defining data models (models.py)</h3> - -<p>Django web applications manage and query data through Python objects referred to as models. Models define the structure of stored data, including the field <em>types</em> and possibly also their maximum size, default values, selection list options, help text for documentation, label text for forms, etc. The definition of the model is independent of the underlying database — you can choose one of several as part of your project settings. Once you've chosen what database you want to use, you don't need to talk to it directly at all — you just write your model structure and other code, and Django handles all the dirty work of communicating with the database for you.</p> - -<p>The code snippet below shows a very simple Django model for a <code>Team</code> object. The <code>Team</code> class is derived from the django class <code>models.Model</code>. It defines the team name and team level as character fields and specifies a maximum number of characters to be stored for each record. The <code>team_level</code> can be one of several values, so we define it as a choice field and provide a mapping between choices to be displayed and data to be stored, along with a default value. </p> - -<pre class="brush: python"># filename: models.py - -from django.db import models - -class Team(models.Model): - team_name = models.CharField(max_length=40) - - TEAM_LEVELS = ( - ('U09', 'Under 09s'), - ('U10', 'Under 10s'), - ('U11', 'Under 11s'), - ... #list other team levels - ) - team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11') -</pre> - -<div class="note"> -<p><strong>Note</strong>: A little bit of Python:</p> - -<ul> - <li>Python supports "object-oriented programming", a style of programming where we organise our code into objects, which include related data and functions for operating on that data. Objects can also inherit/extend/derive from other objects, allowing common behaviour between related objects to be shared. In Python we use the keyword <code>class</code> to define the "blueprint" for an object. We can create multiple specific <em>instances</em> of the type of object based on the model in the class.<br> - <br> - So for example, here we have a <code>Team</code> class, which derives from the <code>Model</code> class. This means it is a model, and will contain all the methods of a model, but we can also give it specialized features of its own too. In our model we define the fields our database will need to store our data, giving them specific names. Django uses these definitions, including the field names, to create the underlying database.</li> -</ul> -</div> - -<h3 id="Querying_data_(views.py)">Querying data (views.py)</h3> - -<p>The Django model provides a simple query API for searching the database. This can match against a number of fields at a time using different criteria (e.g. exact, case-insensitive, greater than, etc.), and can support complex statements (for example, you can specify a search on U11 teams that have a team name that starts with "Fr" or ends with "al"). </p> - -<p>The code snippet shows a view function (resource handler) for displaying all of our U09 teams. The line in bold shows how we can use the model query API to filter for all records where the <code>team_level</code> field has exactly the text 'U09' (note how this criteria is passed to the <code>filter()</code> function as an argument with the field name and match type separated by a double underscore: <strong>team_level__exact</strong>).</p> - -<pre class="brush: python">## filename: views.py - -from django.shortcuts import render -from .models import Team - -def index(request): - <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> - context = {'youngest_teams': list_teams} - return render(request, '/best/index.html', context) -</pre> - -<dl> -</dl> - -<p>This function uses the <code>render()</code> function to create the <code>HttpResponse</code> that is sent back to the browser. This function is a <em>shortcut</em>; it creates an HTML file by combining a specified HTML template and some data to insert in the template (provided in the variable named "<code>context</code>"). In the next section we show how the template has the data inserted in it to create the HTML.</p> - -<h3 id="Rendering_data_(HTML_templates)">Rendering data (HTML templates)</h3> - -<p>Template systems allow you to specify the structure of an output document, using placeholders for data that will be filled in when a page is generated. Templates are often used to create HTML, but can also create other types of document. Django supports both its native templating system and another popular Python library called Jinja2 out of the box (it can also be made to support other systems if needed). </p> - -<p>The code snippet shows what the HTML template called by the <code>render()</code> function in the previous section might look like. This template has been written under the assumption that it will have access to a list variable called <code>youngest_teams</code> when it is rendered (contained in the <code>context</code> variable inside the <code>render()</code> function above). Inside the HTML skeleton we have an expression that first checks if the <code>youngest_teams</code> variable exists, and then iterates it in a <code>for</code> loop. On each iteration the template displays each team's <code>team_name</code> value in an {{htmlelement("li")}} element.</p> - -<pre class="brush: python">## filename: best/templates/best/index.html - -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Home page</title> -</head> -<body> - {% if youngest_teams %} - <ul> - {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> - {% endfor %} - </ul> - {% else %} - <p>No teams are available.</p> - {% endif %} -</body> -</html></pre> - -<h2 id="What_else_can_you_do">What else can you do?</h2> - -<p>The preceding sections show the main features that you'll use in almost every web application: URL mapping, views, models and templates. Just a few of the other things provided by Django include:</p> - -<ul> - <li><strong>Forms</strong>: HTML Forms are used to collect user data for processing on the server. Django simplifies form creation, validation, and processing.</li> - <li><strong>User authentication and permissions</strong>: Django includes a robust user authentication and permission system that has been built with security in mind. </li> - <li><strong>Caching</strong>: Creating content dynamically is much more computationally intensive (and slow) than serving static content. Django provides flexible caching so that you can store all or part of a rendered page so that it doesn't get re-rendered except when necessary.</li> - <li><strong>Administration site</strong>: The Django administration site is included by default when you create an app using the basic skeleton. It makes it trivially easy to provide an admin page for site administrators to create, edit, and view any data models in your site.</li> - <li><strong>Serialising data</strong>: Django makes it easy to serialise and serve your data as XML or JSON. This can be useful when creating a web service (a website that purely serves data to be consumed by other applications or sites, and doesn't display anything itself), or when creating a website in which the client-side code handles all the rendering of data.</li> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>Congratulations, you've completed the first step in your Django journey! You should now understand Django's main benefits, a little about its history, and roughly what each of the main parts of a Django app might look like. You should have also learned a few things about the Python programming language, including the syntax for lists, functions, and classes.</p> - -<p>You've already seen some real Django code above, but unlike with client-side code, you need to set up a development environment to run it. That's our next step.</p> - -<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> - -<h2 id="У_цьому_модулі">У цьому модулі</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> -</ul> diff --git a/files/uk/learn/server-side/express_nodejs/index.html b/files/uk/learn/server-side/express_nodejs/index.html deleted file mode 100644 index 968f3e40e2..0000000000 --- a/files/uk/learn/server-side/express_nodejs/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Express web framework (Node.js/JavaScript) -slug: Learn/Server-side/Express_Nodejs -tags: - - Beginner - - CodingScripting - - Express - - Express.js - - Intro - - JavaScript - - Learn - - NeedsTranslation - - Node - - Server-side programming - - TopicStub - - node.js -translation_of: Learn/Server-side/Express_Nodejs ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Express is a popular unopinionated web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module. A general knowledge of programming concepts and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> is highly recommended, but not essential to understanding the core concepts.</p> - -<div class="note"> -<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments, e.g. to create HTTP servers and access the file system, but does not support JavaScript APIs for working with the browser and DOM.</p> - -<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt> - <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt> - <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt> - <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt> - <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt> - <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt> - <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt> - <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type, and list and detail pages for all of our models. Along the way we'll gain practical experience in getting records from the database, and using templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt> - <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt> - <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt> - <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd> -</dl> - -<h2 id="Adding_more_tutorials">Adding more tutorials</h2> - -<div> -<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p> - -<ul> - <li>Using sessions</li> - <li>User authentication</li> - <li>User authorisation and permissions</li> - <li>Testing an Express web application</li> - <li>Web security for Express web applications.</li> -</ul> - -<p>And of course it would be excellent to have an assessment task!</p> -</div> diff --git a/files/uk/learn/server-side/express_nodejs/routes/index.html b/files/uk/learn/server-side/express_nodejs/routes/index.html deleted file mode 100644 index 9f9e704565..0000000000 --- a/files/uk/learn/server-side/express_nodejs/routes/index.html +++ /dev/null @@ -1,644 +0,0 @@ ---- -title: 'Express Tutorial Part 4: Routes and controllers' -slug: Learn/Server-side/Express_Nodejs/routes -translation_of: Learn/Server-side/Express_Nodejs/routes ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div> - -<p class="summary">У цій статті ми настроїмо (URL handling code) з "штучною" функцією обробки всіх можливих шляхів (endpoints) які потрібні у <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> сайті. У підсумку ми матимемо модульну структуру відладки для всіх шляхів, яку ми зможемо використати у наступній статті. Ми матимемо хороше розуміння, як створювати модульну структуру для шляхів які використовує Express!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td>Прочитайте <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a>. Закінчіть попередні частини (включаючи <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a>).</td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td>Вміти створити простий шляхи. Настроїти обробку всі URL шляхів.</td> - </tr> - </tbody> -</table> - -<h2 id="Overview">Overview</h2> - -<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> - -<p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p> - -<p>As we've already created the models, the main things we'll need to create are:</p> - -<ul> - <li>"Routes" to forward the supported requests (and any information encoded in request URLs) to the appropriate controller functions.</li> - <li>Controller functions to get the requested data from the models, create an HTML page displaying the data, and return it to the user to view in the browser.</li> - <li>Views (templates) used by the controllers to render the data.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p> - -<p>Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data.</p> - -<p>The first section below provides a brief "primer" on how to use the Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a> middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes.</p> - -<h2 id="Routes_primer">Routes primer</h2> - -<p>A route is a section of Express code that associates an HTTP verb (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), an URL path/pattern, and a function that is called to handle that pattern.</p> - -<p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p> - -<div class="note"> -<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> -</div> - -<p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p> - -<h3 id="Defining_and_using_separate_route_modules">Defining and using separate route modules</h3> - -<p>The code below provides a concrete example of how we can create a route module and then use it in an <em>Express</em> application.</p> - -<p>First we create routes for a wiki in a module named <strong>wiki.js</strong>. The code first imports the Express application object, uses it to get a <code>Router</code> object and then adds a couple of routes to it using the <code>get()</code> method. Last of all the module exports the <code>Router</code> object.</p> - -<pre class="brush: js"><code>// wiki.js - Wiki route module. - -var express = require('express'); -var router = express.Router(); - -// Home page route. -router.get('/', function (req, res) { - res.send('Wiki home page'); -}) - -// About page route. -router.get('/about', function (req, res) { - res.send('About this wiki'); -}) - -module.exports = router;</code> - -</pre> - -<div class="note"> -<p><strong>Note:</strong> Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.</p> -</div> - -<p>To use the router module in our main app file we first <code>require()</code> the route module (<strong>wiki.js</strong>). We then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.</p> - -<pre class="brush: js"><code>var wiki = require('./wiki.js'); -// ... -app.use('/wiki', wiki);</code></pre> - -<p>The two routes defined in our wiki route module are then accessible from <code>/wiki/</code> and <code>/wiki/about/</code>.</p> - -<h3 id="Route_functions">Route functions</h3> - -<p>Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the <code>Router.get()</code> method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.</p> - -<pre class="brush: js"><code>router.get('/about', function (req, res) { - res.send('About this wiki'); -})</code> -</pre> - -<p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p> - -<div class="note"> -<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> - -<p>The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p> -</div> - -<p>The callback function here calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "About this wiki" when we receive a GET request with the path ('<code>/about'</code>). There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle. For example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file. The response method that we'll be using most often as we build up the library is <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article!</p> - -<h3 id="HTTP_verbs">HTTP verbs</h3> - -<p>The example routes above use the <code>Router.get()</code> method to respond to HTTP GET requests with a certain path.</p> - -<p>The <code>Router</code> also provides route methods for all the other HTTP verbs, that are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p> - -<p>For example, the code below behaves just like the previous <code>/about</code> route, but only responds to HTTP POST requests.</p> - -<pre class="brush: js"><code>router.post('/about', function (req, res) { - res.send('About this wiki'); -})</code></pre> - -<h3 id="Route_paths">Route paths</h3> - -<p>The route paths define the endpoints at which requests can be made. The examples we've seen so far have just been strings, and are used exactly as written: '/', '/about', '/book', '/any-random.path'.</p> - -<p>Route paths can also be string patterns. String patterns use a subset of regular expression syntax to define <em>patterns</em> of endpoints that will be matched. The subset is listed below (note that the hyphen (<code>-</code>) and the dot (<code>.</code>) are interpreted literally by string-based paths):</p> - -<ul> - <li>? : The endpoint must have 0 or 1 of the preceding character. E.g. a route path of <code>'/ab?cd'</code> will match endpoints <code>acd</code> or <code>abcd</code>.</li> - <li>+ : The endpoint must have 1 or more of the preceding character. E.g. a route path of <code>'/ab+cd'</code> will match endpoints <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, and so on.</li> - <li>* : The endpoint may have an arbitrary string where the * character is placed. E.g. a route path of <code>'ab*cd'</code> will match endpoints <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, and so on.</li> - <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li> -</ul> - -<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> - -<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) { - ... -})</code></pre> - -<div class="note"> -<p><strong>Note:</strong> Most of our routes for the LocalLibrary will simply use strings and not string patterns and regular expressions. We'll also use route parameters as discussed in the next section.</p> -</div> - -<h3 id="Route_parameters">Route parameters</h3> - -<p>Route parameters are <em>named URL segments</em> used to capture the values specified at their position in the URL. The named segments are prefixed with a colon and then the name (e.g. <code>/<strong>:</strong>your_parameter_name/</code>. The captured values are stored in the <code>req.params</code> object using the parameter names as keys (e.g. <code>req.params.your_parameter_name</code>).</p> - -<p>So for example, consider a URL encoded to contain information about users and books: <code>http://localhost:3000/users/34/books/8989</code>. We can extract this information as shown below, with the <code>userId</code> and <code>bookId</code> path parameters:</p> - -<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) { - // Access userId via: req.params.userId - // Access bookId via: req.params.bookId - res.send(req.params); -}) -</code></pre> - -<p>The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and _).</p> - -<div class="note"> -<p><strong>Note:</strong> The URL <em>/book/create</em> will be matched by a route like <code>/book/:bookId</code> (which will extract a "bookId" value of '<code>create</code>'). The first route that matches an incoming URL will be used, so if you want to process <code>/book/create</code> URLs separately, their route handler must be defined before your <code>/book/:bookId</code> route.</p> -</div> - -<p>That's all you need to get started with routes - if needed you can find more information in the Express docs: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> and <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>. The following sections show how we'll set up our routes and controllers for the LocalLibrary.</p> - -<h2 id="Routes_needed_for_the_LocalLibrary">Routes needed for the LocalLibrary</h2> - -<p>The URLs that we're ultimately going to need for our pages are listed below, where <em>object</em> is replaced by the name of each of our models (book, bookinstance, genre, author), <em>objects</em> is the plural of object, and <em>id</em> is the unique instance field (<code>_id</code>) that is given to each Mongoose model instance by default.</p> - -<ul> - <li><code>catalog/</code> — The home/index page.</li> - <li><code>catalog/<objects>/</code> — The list of all books, bookinstances, genres, or authors (e.g. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, etc.)</li> - <li><code>catalog/<object>/<em><id></em></code> — The detail page for a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li> - <li><code>catalog/<object>/create</code> — The form to create a new book, bookinstance, genre, or author (e.g. <code>/catalog/book/create)</code>.</li> - <li><code>catalog/<object>/<em><id></em>/update</code> — The form to update a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li> - <li><code>catalog/<object>/<em><id></em>/delete</code> — The form to delete a specific book, bookinstance, genre, author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li> -</ul> - -<p>The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar).</p> - -<p>By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as <code><em><id></em></code> above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).</p> - -<div class="note"> -<p><strong>Note</strong>: Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL <code>GET</code> parameters (e.g. <code>/book/?id=6</code>). Whichever approach you use, the URLs should be kept clean, logical and readable (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).</p> -</div> - -<p>Next we create our route handler callback functions and route code for all the above URLs.</p> - -<h2 id="Create_the_route-handler_callback_functions">Create the route-handler callback functions</h2> - -<p>Before we define our routes, we'll first create all the dummy/skeleton callback functions that they will invoke. The callbacks will be stored in separate "controller" modules for Books, BookInstances, Genres, and Authors (you can use any file/module structure, but this seems an appropriate granularity for this project).</p> - -<p>Start by creating a folder for our controllers in the project root (<strong>/controllers</strong>) and then create separate controller files/modules for handling each of the models:</p> - -<pre>/express-locallibrary-tutorial //the project root - <strong>/controllers</strong> - <strong>authorController.js</strong> - <strong>bookController.js</strong> - <strong>bookinstanceController.js</strong> - <strong>genreController.js</strong></pre> - -<h3 id="Author_controller">Author controller</h3> - -<p>Open the <strong>/controllers/authorController.js</strong> file and copy in the following code:</p> - -<pre class="brush: js">var Author = require('../models/author'); - -// Display list of all Authors. -exports.author_list = function(req, res) { - res.send('NOT IMPLEMENTED: Author list'); -}; - -// Display detail page for a specific Author. -exports.author_detail = function(req, res) { - res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id); -}; - -// Display Author create form on GET. -exports.author_create_get = function(req, res) { - res.send('NOT IMPLEMENTED: Author create GET'); -}; - -// Handle Author create on POST. -exports.author_create_post = function(req, res) { - res.send('NOT IMPLEMENTED: Author create POST'); -}; - -// Display Author delete form on GET. -exports.author_delete_get = function(req, res) { - res.send('NOT IMPLEMENTED: Author delete GET'); -}; - -// Handle Author delete on POST. -exports.author_delete_post = function(req, res) { - res.send('NOT IMPLEMENTED: Author delete POST'); -}; - -// Display Author update form on GET. -exports.author_update_get = function(req, res) { - res.send('NOT IMPLEMENTED: Author update GET'); -}; - -// Handle Author update on POST. -exports.author_update_post = function(req, res) { - res.send('NOT IMPLEMENTED: Author update POST'); -}; -</pre> - -<p>The module first requires the model that we'll later be using to access and update our data. It then exports functions for each of the URLs we wish to handle (the create, update and delete operations use forms, and hence also have additional methods for handling form post requests — we'll discuss those methods in the "forms article" later on).</p> - -<p>All the functions have the standard form of an <em>Express middleware function</em>, with arguments for the request, response, and the <code>next</code> function to be called if the method does not complete the request cycle (in all these cases it does!). The methods simply return a string indicating that the associated page has not yet been created. If a controller function is expected to receive path parameters, these are output in the message string (see <code>req.params.id</code> above).</p> - -<h4 id="BookInstance_controller">BookInstance controller</h4> - -<p>Open the <strong>/controllers/bookinstanceController.js</strong> file and copy in the following code (this follows an identical pattern to the <code>Author</code> controller module):</p> - -<pre class="brush: js">var BookInstance = require('../models/bookinstance'); - -// Display list of all BookInstances. -exports.bookinstance_list = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance list'); -}; - -// Display detail page for a specific BookInstance. -exports.bookinstance_detail = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id); -}; - -// Display BookInstance create form on GET. -exports.bookinstance_create_get = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance create GET'); -}; - -// Handle BookInstance create on POST. -exports.bookinstance_create_post = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance create POST'); -}; - -// Display BookInstance delete form on GET. -exports.bookinstance_delete_get = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance delete GET'); -}; - -// Handle BookInstance delete on POST. -exports.bookinstance_delete_post = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance delete POST'); -}; - -// Display BookInstance update form on GET. -exports.bookinstance_update_get = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance update GET'); -}; - -// Handle bookinstance update on POST. -exports.bookinstance_update_post = function(req, res) { - res.send('NOT IMPLEMENTED: BookInstance update POST'); -}; -</pre> - -<h4 id="Genre_controller">Genre controller</h4> - -<p>Open the <strong>/controllers/genreController.js</strong> file and copy in the following text (this follows an identical pattern to the <code>Author</code> and <code>BookInstance</code> files):</p> - -<pre class="brush: js">var Genre = require('../models/genre'); - -// Display list of all Genre. -exports.genre_list = function(req, res) { - res.send('NOT IMPLEMENTED: Genre list'); -}; - -// Display detail page for a specific Genre. -exports.genre_detail = function(req, res) { - res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id); -}; - -// Display Genre create form on GET. -exports.genre_create_get = function(req, res) { - res.send('NOT IMPLEMENTED: Genre create GET'); -}; - -// Handle Genre create on POST. -exports.genre_create_post = function(req, res) { - res.send('NOT IMPLEMENTED: Genre create POST'); -}; - -// Display Genre delete form on GET. -exports.genre_delete_get = function(req, res) { - res.send('NOT IMPLEMENTED: Genre delete GET'); -}; - -// Handle Genre delete on POST. -exports.genre_delete_post = function(req, res) { - res.send('NOT IMPLEMENTED: Genre delete POST'); -}; - -// Display Genre update form on GET. -exports.genre_update_get = function(req, res) { - res.send('NOT IMPLEMENTED: Genre update GET'); -}; - -// Handle Genre update on POST. -exports.genre_update_post = function(req, res) { - res.send('NOT IMPLEMENTED: Genre update POST'); -}; -</pre> - -<h4 id="Book_controller">Book controller</h4> - -<p>Open the <strong>/controllers/bookController.js</strong> file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an <code>index()</code> function for displaying the site welcome page:</p> - -<pre class="brush: js">var Book = require('../models/book'); - -<strong>exports.index = function(req, res) { - res.send('NOT IMPLEMENTED: Site Home Page'); -};</strong> - -// Display list of all books. -exports.book_list = function(req, res) { - res.send('NOT IMPLEMENTED: Book list'); -}; - -// Display detail page for a specific book. -exports.book_detail = function(req, res) { - res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id); -}; - -// Display book create form on GET. -exports.book_create_get = function(req, res) { - res.send('NOT IMPLEMENTED: Book create GET'); -}; - -// Handle book create on POST. -exports.book_create_post = function(req, res) { - res.send('NOT IMPLEMENTED: Book create POST'); -}; - -// Display book delete form on GET. -exports.book_delete_get = function(req, res) { - res.send('NOT IMPLEMENTED: Book delete GET'); -}; - -// Handle book delete on POST. -exports.book_delete_post = function(req, res) { - res.send('NOT IMPLEMENTED: Book delete POST'); -}; - -// Display book update form on GET. -exports.book_update_get = function(req, res) { - res.send('NOT IMPLEMENTED: Book update GET'); -}; - -// Handle book update on POST. -exports.book_update_post = function(req, res) { - res.send('NOT IMPLEMENTED: Book update POST'); -}; -</pre> - -<h2 id="Create_the_catalog_route_module">Create the catalog route module</h2> - -<p>Next we create <em>routes</em> for all the URLs <a href="#local_libary_routes">needed by the LocalLibrary website</a>, which will call the controller functions we defined in the previous section.</p> - -<p>The skeleton already has a <strong>./routes</strong> folder containing routes for the <em>index</em> and <em>users</em>. Create another route file — <strong>catalog.js</strong> — inside this folder, as shown.</p> - -<pre>/express-locallibrary-tutorial //the project root - /routes - index.js - users.js - <strong>catalog.js</strong></pre> - -<p>Open <strong>/routes/</strong><strong>catalog.js</strong> and copy in the code below:</p> - -<pre class="brush: js"><strong>var express = require('express'); -var router = express.Router(); -</strong> -// Require controller modules. -var book_controller = require('../controllers/bookController'); -var author_controller = require('../controllers/authorController'); -var genre_controller = require('../controllers/genreController'); -var book_instance_controller = require('../controllers/bookinstanceController'); - -/// BOOK ROUTES /// - -// GET catalog home page. -router.get('/', book_controller.index); - -// GET request for creating a Book. NOTE This must come before routes that display Book (uses id). -router.get('/book/create', book_controller.book_create_get); - -// POST request for creating Book. -router.post('/book/create', book_controller.book_create_post); - -// GET request to delete Book. -router.get('/book/:id/delete', book_controller.book_delete_get); - -// POST request to delete Book. -router.post('/book/:id/delete', book_controller.book_delete_post); - -// GET request to update Book. -router.get('/book/:id/update', book_controller.book_update_get); - -// POST request to update Book. -router.post('/book/:id/update', book_controller.book_update_post); - -// GET request for one Book. -router.get('/book/:id', book_controller.book_detail); - -// GET request for list of all Book items. -router.get('/books', book_controller.book_list); - -/// AUTHOR ROUTES /// - -// GET request for creating Author. NOTE This must come before route for id (i.e. display author). -router.get('/author/create', author_controller.author_create_get); - -// POST request for creating Author. -router.post('/author/create', author_controller.author_create_post); - -// GET request to delete Author. -router.get('/author/:id/delete', author_controller.author_delete_get); - -// POST request to delete Author. -router.post('/author/:id/delete', author_controller.author_delete_post); - -// GET request to update Author. -router.get('/author/:id/update', author_controller.author_update_get); - -// POST request to update Author. -router.post('/author/:id/update', author_controller.author_update_post); - -// GET request for one Author. -router.get('/author/:id', author_controller.author_detail); - -// GET request for list of all Authors. -router.get('/authors', author_controller.author_list); - -/// GENRE ROUTES /// - -// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). -router.get('/genre/create', genre_controller.genre_create_get); - -//POST request for creating Genre. -router.post('/genre/create', genre_controller.genre_create_post); - -// GET request to delete Genre. -router.get('/genre/:id/delete', genre_controller.genre_delete_get); - -// POST request to delete Genre. -router.post('/genre/:id/delete', genre_controller.genre_delete_post); - -// GET request to update Genre. -router.get('/genre/:id/update', genre_controller.genre_update_get); - -// POST request to update Genre. -router.post('/genre/:id/update', genre_controller.genre_update_post); - -// GET request for one Genre. -router.get('/genre/:id', genre_controller.genre_detail); - -// GET request for list of all Genre. -router.get('/genres', genre_controller.genre_list); - -/// BOOKINSTANCE ROUTES /// - -// GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id). -router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get); - -// POST request for creating BookInstance. -router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post); - -// GET request to delete BookInstance. -router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get); - -// POST request to delete BookInstance. -router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post); - -// GET request to update BookInstance. -router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get); - -// POST request to update BookInstance. -router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post); - -// GET request for one BookInstance. -router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail); - -// GET request for list of all BookInstance. -router.get('/bookinstances', book_instance_controller.bookinstance_list); - -<strong>module.exports = router;</strong> -</pre> - -<p>The module requires Express and then uses it to create a <code>Router</code> object. The routes are all set up on the router, which is then exported.</p> - -<p>The routes are defined either using <code>.get()</code> or <code>.post()</code> methods on the router object. All the paths are defined using strings (we don't use string patterns or regular expressions). Routes that act on some specific resource (e.g. book) use path parameters to get the object id from the URL.</p> - -<p>The handler functions are all imported from the controller modules we created in the previous section.</p> - -<h3 id="Update_the_index_route_module">Update the index route module</h3> - -<p>We've set up all our new routes, but we still have a route to the original page. Let's instead redirect this to the new index page that we've created at the path '/catalog'.</p> - -<p>Open <strong>/routes/index.js</strong> and replace the existing route with the function below.</p> - -<pre class="brush: js">// GET home page. -router.get('/', function(req, res) { - res.redirect('/catalog'); -});</pre> - -<div class="note"> -<p><strong>Note:</strong> This is our first use of the <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths.</p> -</div> - -<h3 id="Update_app.js">Update app.js</h3> - -<p>The last step is to add the routes to the middleware chain. We do this in <code>app.js</code>.</p> - -<p>Open <strong>app.js</strong> and require the catalog route below the other routes (add the third line shown below, underneath the other two):</p> - -<pre class="brush: js">var index = require('./routes/index'); -var users = require('./routes/users'); -<strong>var catalog = require('./routes/catalog'); //Import routes for "catalog" area of site</strong></pre> - -<p>Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):</p> - -<pre class="brush: js">app.use('/', index); -app.use('/users', users); -<strong>app.use('/catalog', catalog); // Add catalog routes to middleware chain.</strong></pre> - -<div class="note"> -<p><strong>Note:</strong> We have added our catalog module at a path <code>'/catalog'</code>. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: <code>/catalog/books/</code>.</p> -</div> - -<p>That's it. We should now have routes and skeleton functions enabled for all the URLs that we will eventually support on the LocalLibrary website.</p> - -<h3 id="Testing_the_routes">Testing the routes</h3> - -<p>To test the routes, first start the website using your usual approach</p> - -<ul> - <li>The default method - <pre class="brush: bash"><code>// Windows -SET DEBUG=express-locallibrary-tutorial:* & npm start - -// macOS or Linux -DEBUG=express-locallibrary-tutorial:* npm start</code> -</pre> - </li> - <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: - <pre><code>// Windows -SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong> - -// macOS or Linux -</code>DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong> -</pre> - </li> -</ul> - -<p>Then navigate to a number of LocalLibrary URLs, and verify that you don't get an error page (HTTP 404). A small set of URLs are listed below for your convenience:</p> - -<ul> - <li><a href="http://localhost:3000/">http://localhost:3000/</a></li> - <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li> - <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li> - <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li> - <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li> - <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li> - <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li> - <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, and some approaches for structuring our routes and controllers.</p> - -<p>In our next article we'll create a proper welcome page for the site, using views (templates) and information stored in our models.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li> - <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> -</ul> - -<p> </p> diff --git a/files/uk/learn/server-side/index.html b/files/uk/learn/server-side/index.html deleted file mode 100644 index c79d8ea81e..0000000000 --- a/files/uk/learn/server-side/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Server-side website programming -slug: Learn/Server-side -tags: - - Beginner - - CodingScripting - - Intro - - Landing - - Learn - - NeedsTranslation - - Server - - Server-side programming - - Topic - - TopicStub -translation_of: Learn/Server-side ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> - -<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> - -<p>In the modern world of web development, learning about server-side development is highly recommended.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> - -<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Simlarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> - -<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> -</ul> - -<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> - <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> - <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> - <dd>Express is a popular web framwork, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> -</dl> diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html deleted file mode 100644 index 39daad4acb..0000000000 --- a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Розуміння JavaScript-фреймворків на стороні клієнта -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -original_slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p> - -<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p> - -<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p> - -<ul> - <li class="summary">Why should I use a framework? What problems do they solve for me?</li> - <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li> - <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li> - <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li> -</ul> - -<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> - -<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Introductory_guides">Introductory guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> - <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> - <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> -</dl> - -<h2 id="React_tutorials">React tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> - <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> - <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> - <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> - <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> - <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> - <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> - <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> -</dl> - -<h2 id="Ember_tutorials">Ember tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> - <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> - <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> - <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> - <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> - <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> - <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> -</dl> - -<h2 id="Vue_tutorials">Vue tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> - <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> - <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> - <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> - <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> - <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> - <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> - <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> - <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> - <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> -</dl> - -<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> - -<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p> - -<ul> - <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li> - <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li> - <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li> - <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li> -</ul> - -<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p> - -<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p> diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html deleted file mode 100644 index 1e8b54054a..0000000000 --- a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html +++ /dev/null @@ -1,538 +0,0 @@ ---- -title: Знайомимось зі Свелт -slug: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started -original_slug: >- - Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte ---- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> - -<p class="summary">У цій статті ми коротко ознайомимося з <a href="https://svelte.dev/">фреймворком Свелт</a>. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Передумови:</th> - <td><span class="tlid-translation translation" lang="uk"><span title="">Для початку, рекомендуємо ознайомитись з основними мовами – <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> та <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, та володіти <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терміналом/командним рядком</a>.</span></span> - <p><br> - <span class="tlid-translation translation" lang="uk"><span title="">Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого;</span> <span title="">вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.</span></span></p> - </td> - </tr> - <tr> - <th scope="row">Мета:</th> - <td> - <p><span class="tlid-translation translation" lang="uk"><span title="">Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Свелт_новий_підхід_до_створення_складних_інтерфейсів">Свелт: новий підхід до створення складних інтерфейсів</h2> - -<p><span class="tlid-translation translation" lang="uk">Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.</span><br> - <br> - <span class="tlid-translation translation" lang="uk">Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.<br> - <br> - Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.<br> - <br> - Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.</span></p> - -<div class="blockIndicator note"> -<p><span class="tlid-translation translation" lang="uk"><span title=""><strong>Примітка</strong>: нещодавно Свелт додав <a href="https://svelte.dev/blog/svelte-and-typescript">офіційну підтримку TypeScript</a>, одну з найочікуваніших можливостей.</span> <span title="">Ми розглянемо її згодом у цій серії уроків.</span></span></p> -</div> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Перед</span> <span title="">тим</span><span title="">,</span> <span title="">як</span> <span title="">повернутися</span> <span title="">до</span> <span title="">цієї</span> <span title="">серії</span> <span title="">уроків</span><span title="">,</span> <span title="">ми</span> <span title="">рекомендуємо</span> <span title="">вам</span> <span title="">прочитати</span> <a href="https://svelte.dev/tutorial/basics">навчальний посібник Свелт</a><span title="">,</span> <span title="">щоб</span> <span title="">по</span><span title="">-</span><span title="">справжньому</span> <span title="">швидко</span> <span title="">познайомитися</span> <span title="">з</span> <span title="">основними</span> <span title="">поняттями</span><span title="">,</span> <span title="">а</span> <span title="">потім</span> <span title="">навчитися</span> <span title="">будувати</span> <span title="">щось</span> <span title="">більш</span> <span title="">глибоке</span><span title="">.</span> <span title="">Це</span> займе<span title=""> </span> <span title="">близько</span> <span title="">30</span> <span title="">хвилин</span><span title="">.</span></span></p> - -<h2 id="Use_cases">Use cases</h2> - -<p>Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.</p> - -<p>Nevertheless, Svelte is particularly appropriate to tackle the following situations:</p> - -<ul> - <li>Web applications intended for low power devices: Applications built with Svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. Less code means less KB to download, parse, execute, and keep hanging around in memory.</li> - <li>Highly interactive pages or complex visualizations: If you are building data-visualizations that need to display a large number of DOM elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive.</li> - <li>Onboarding people with basic web development knowledge: Svelte has a shallow learning curve. Web developers with basic HTML, CSS, and JavaScript knowledge can easily grasp Svelte specifics in a short time and start building web applications.</li> -</ul> - -<p>Moreover, with the help of <a href="https://sapper.svelte.dev/">Sapper</a> (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also <a href="https://svelte-native.technology/">Svelte Native</a>, which lets you build native mobile applications.</p> - -<h2 id="How_does_Svelte_work">How does Svelte work?</h2> - -<p>Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:</p> - -<ul> - <li>It extends HTML by allowing JavaScript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars.</li> - <li>It extends CSS by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles.</li> - <li>It extends JavaScript by reinterpreting specific directives of the language to achieve true reactivity and ease component state management.</li> -</ul> - -<p>The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.</p> - -<h2 id="First_steps_with_Svelte">First steps with Svelte</h2> - -<p>Being a compiler, you can't just add a <code><script src="svelte.js"></code> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.</p> - -<h3 id="Requirements">Requirements</h3> - -<p>In order to work with Svelte you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p> - -<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux (WSL)</a> are both suitable. <a href="https://cmder.net/">Cmder</a> is another very good and complete alternative. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p> - -<p>Also see the following for more information:</p> - -<ul> - <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm"</a> on nodejs.org</li> - <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx"</a> on the npm blog</li> - <li><a href="https://svelte.dev/blog/the-easiest-way-to-get-started">"The easiest way to get started with Svelte"</a> on the svelte blog</li> -</ul> - -<h3 id="Creating_your_first_Svelte_app">Creating your first Svelte app</h3> - -<p>The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting <a href="https://github.com/sveltejs/template">sveltejs/template</a> on GitHub or you can avoid having to download and unzip it and just use <a href="https://github.com/Rich-Harris/degit">degit</a>.</p> - -<p>To create your starter app template, run the following terminal commands:</p> - -<pre class="brush: bash notranslate">npx degit sveltejs/template moz-todo-svelte -cd moz-todo-svelte -npm install -npm run dev</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using <code>git clone</code> because it will not download all the history of the repo, or create a complete local clone.</p> -</div> - -<p>After running <code>npm run dev</code>, Svelte will compile and build your application. It will start a local server at <code>localhost:5000</code>. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:</p> - -<p><img alt="A simple start page that says hello world, and gives a link to the official svelte tutorials" src="https://mdn.mozillademos.org/files/17338/01-svelte-starter-app.png" style="border-style: solid; border-width: 1px; height: 529px; width: 1166px;"></p> - -<h3 id="Application_structure">Application structure</h3> - -<p>The starter template comes with the following structure:</p> - -<pre class="notranslate">moz-todo-svelte -├── readme.md -├── package.json -├── package-lock.json -├── rollup.config.js -├── .gitignore -├── node_modules -├── public -│ ├── favicon.ico -│ ├── index.html -│ ├── global.css -│ └── build -│ ├── bundle.css -│ ├── bundle.css.map -│ ├── bundle.js -│ └── bundle.js.map -└── src - ├── App.svelte - └── main.js</pre> - -<p>The contents are as follows:</p> - -<ul> - <li><code>package.json</code> and <code>package-lock.json</code>: Contains information about the project that Node.js/npm uses to keep it organized. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file <code>package.json</code></a>? on NodeJS.org; we also talk about it in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics tutorial</a>.</li> - <li><code>node_modules</code>: This is where node saves the project dependencies. These dependencies won't be sent to production, they are just used for development purposes.</li> - <li><code>.gitignore</code>: Tells git which files or folder to ignore from the project — useful if you decide to include your app in a git repo.</li> - <li><code>rollup.config.js</code>: Svelte uses <a href="https://rollupjs.org/">rollup.js</a> as a module bundler. This configuration file tells rollup how to compile and build your app. If you prefer <a href="https://webpack.js.org/">webpack</a> you can create your starter project with <code>npx degit sveltejs/template-webpack svelte-app</code> instead.</li> - <li>scripts: Contains setup scripts as required. Currently should only contain <code>setupTypeScript.js</code>, a script that sets up TypeScript support in Svelte. We'll talk about this more in the last article.</li> - <li><code>src</code>: This directory is where the source code for your application lives — where you'll be creating the code for your app. - <ul> - <li><code>App.svelte</code>: This is the top-level component of your app. So far it just renders the 'Hello World!' message.</li> - <li><code>main.js</code>: The entry point to our application. It just instantiates the <code>App</code> component and binds it to the body of our html page.</li> - </ul> - </li> - <li><code>public</code>: This directory contains all the files that will be published in production. - <ul> - <li><code>favicon.png</code>: This is the favicon for your app. Currently, it's the Svelte logo.</li> - <li><code>index.html</code>: This is the main page of your app. Initially it's just an empty HTML5 page that loads the css files and js bundles generated by Svelte.</li> - <li><code>global.css</code>: This file contains unscoped styles. It's a regular css file that will be applied to the whole application.</li> - <li><code>build</code>: This folder contains the generated CSS and JavaScript source code. - <ul> - <li><code>bundle.css</code>: The CSS file that Svelte generated from the styles defined for each component.</li> - <li><code>bundle.js</code>: The JavaScript file compiled from all your JavaScript source code.</li> - </ul> - </li> - </ul> - </li> -</ul> - -<h2 id="Having_a_look_at_our_first_Svelte_component">Having a look at our first Svelte component</h2> - -<p>Components are the building blocks of Svelte applications. They are written into <code>.svelte</code> files using a superset of HTML.</p> - -<p>All three sections — <code><script></code>, <code><styles></code>, and markup — are optional, and can appear in any order you like.</p> - -<pre class="brush: html notranslate"><script> - // logic goes here -</script> - -<style> - /* styles go here */ -</style> - -<!-- markup (zero or more HTML elements) goes here --></pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: For more information on the component format, have a look at the <a href="https://svelte.dev/docs#Component_format">svelte documentation</a>.</p> -</div> - -<p>With this in mind, let's have a look at the <code>src/App.svelte</code> file that came with the starter template. You should see something like the following:</p> - -<pre class="brush: html notranslate"><script> - export let name; -</script> - -<main> - <h1>Hello {name}!</h1> - <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> -</main> - -<style> - main { - text-align: center; - padding: 1em; - max-width: 240px; - margin: 0 auto; - } - - h1 { - color: #ff3e00; - text-transform: uppercase; - font-size: 4em; - font-weight: 100; - } - - @media (min-width: 640px) { - main { - max-width: none; - } - } -</style></pre> - -<h3 id="The_<script>_section">The <code><script></code> section</h3> - -<p>The <code><script></code> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.</p> - -<pre class="brush: html notranslate"><script> - export let name; -</script></pre> - -<p>Svelte uses the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.</p> - -<h3 id="The_markup_section">The markup section</h3> - -<p>In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets (<code>{}</code>). In this case we are embedding the value of the <code>name</code> prop right after the <code>Hello</code> text.</p> - -<pre class="brush: html notranslate"><main> - <h1>Hello {name}!</h1> - <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> -</main></pre> - -<p>Svelte also supports tags like <code>{#if...}</code>, <code>{#each...}</code>, and <code>{#await...}</code> — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.</p> - -<h3 id="The_<style>_section">The <code><style></code> section</h3> - -<p>If you have experience working with CSS, the following snippet should make sense:</p> - -<pre class="brush: html notranslate"><style> - main { - text-align: center; - padding: 1em; - max-width: 240px; - margin: 0 auto; - } - - h1 { - color: #ff3e00; - text-transform: uppercase; - font-size: 4em; - font-weight: 100; - } - - @media (min-width: 640px) { - main { - max-width: none; - } - } -</style></pre> - -<p>We are applying a style to our <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> element. What will happen other components with <code><h1></code> elements in them?</p> - -<p>In Svelte, CSS inside a component's <code><style></code> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.</p> - -<p>You can see this in action by opening <code>localhost:5000</code> in a new browser tab, right/<kbd>Ctrl</kbd>-clicking on the <em>HELLO WORLD!</em> label, and choosing <em>Inspect</em>:</p> - -<p><img alt="Svelte starter app with devtools open, showing classes for scoped styles" src="https://mdn.mozillademos.org/files/17339/02-svelte-component-scoped-styles.png" style="height: 878px; width: 1117px;"></p> - -<p>When compiling the app, Svelte changes our <code>h1</code> styles definition to <code>h1.svelte-1tky8bj</code>, and then modifies every <code><h1></code> element in our component to <code><h1 class="svelte-1tky8bj"></code>, so that it picks up the styles as required.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can override this behavior and apply styles to a selector globally using the <code>:global(...)</code> modifier (see the <a href="https://svelte.dev/docs#style">Svelte <code><style></code> docs</a> for more information).</p> -</div> - -<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2> - -<p>Now that we have a general idea of how it all fits together, we can start making a few changes.<br> - At this point you can try updating your <code>App.svelte</code> component — for example change the <code><h1></code> element on line 6 of <code>App.svelte</code> so that it reads like this:</p> - -<pre class="brush: html notranslate"><h1>Hello {name} from MDN!</h1></pre> - -<p>Just save your changes and the app running at <code>localhost:5000</code> will be automatically updated.</p> - -<h3 id="A_first_look_at_Svelte_reactivity">A first look at Svelte reactivity</h3> - -<p>In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.</p> - -<p>In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a <code>toggleName()</code> function in our <code>App</code> component, and a button to run it.</p> - -<p>Try updating your <code><script></code> and markup sections like so:</p> - -<pre class="brush: html notranslate"><script> - export let name; - - function toggleName() { - if (name === 'world') { - name = 'svelte' - } else { - name = 'world' - } - } -</script> - -<main> - <h1>Hello {name}!</h1> - <button on:click={toggleName}>Toggle name</button> - <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> -</main></pre> - -<p>Whenever the button is clicked, Svelte executes the <code>toggleName()</code> function, which in turn updates the value of the <code>name</code> variable.</p> - -<p>As you can see, the <code><h1></code> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.</p> - -<p>Note the use of <code>:</code> in <code>on:click</code>. That's Svelte's syntax for listening to DOM events.</p> - -<h2 id="Inspecting_main.js_the_entry_point_of_our_app">Inspecting main.js: the entry point of our app</h2> - -<p>Let’s open <code>src/main.js</code>, which is where the <code>App</code> component is being imported and used. This file is the entry point for our app, and it initially looks like this:</p> - -<pre class="brush: js notranslate">import App from './App.svelte'; - -const app = new App({ - target: document.body, - props: { - name: 'world' - } -}); - -export default app;</pre> - -<p><code>main.js</code> starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:</p> - -<ul> - <li><code>target</code>: The DOM element inside which we want the component to be rendered, in this case the <code><body></code> element.</li> - <li><code>props</code>: the values to assign to each prop of the <code>App</code> component.</li> -</ul> - -<h2 id="A_look_under_the_hood">A look under the hood</h2> - -<p>How does Svelte manage to make all these files work together nicely?</p> - -<p>The Svelte compiler processes the <code><style></code> section of every component and compiles them into the <code>public/build/bundle.css</code> file.</p> - -<p>It also compiles the markup and <code><script></code> section of every component and stores the result in <code>public/build/bundle.js</code>. It also adds the code in <code>src/main.js</code> to reference the features of each component.</p> - -<p>Finally the file <code>public/index.html</code> includes the generated <code>bundle.css</code> and <code>bundle.js</code> files:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset='utf-8'> - <meta name='viewport' content='width=device-width,initial-scale=1'> - - <title>Svelte app</title> - - <link rel='icon' type='image/png' href='/favicon.png'> - <link rel='stylesheet' href='/global.css'> - <link rel='stylesheet' href='/build/bundle.css'> - - <script defer src='/build/bundle.js'></script> -</head> - -<body> -</body> -</html></pre> - -<p>The minified version of <code>bundle.js</code> weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the <code>App.svelte</code> compiled component. As you can see, <code>bundle.js</code> is the only JavaScript file referenced by <code>index.html</code>. There are no other libraries loaded into the web page.</p> - -<p>This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.</p> - -<h2 id="Following_this_tutorial">Following this tutorial</h2> - -<p>In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.</p> - -<p>You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.</p> - -<p>Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.</p> - -<h3 id="Using_Git">Using Git</h3> - -<p>The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.</p> - -<p>We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.</p> - -<p>After <a href="https://git-scm.com/downloads">installing git</a>, to clone the repository you should execute:</p> - -<pre class="brush: bash notranslate">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre> - -<p>Then at the beginning of each article, you can just <code>cd</code> into the corresponding folder and start the app in dev mode to see what its current state should be, like this:</p> - -<pre class="brush: bash notranslate">cd 02-starting-our-todo-app -npm install -npm run dev</pre> - -<p>If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see <a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you just want to download the files without cloning the git repo, you can use the degit tool like this — <code>npx degit opensas/mdn-svelte-tutorial</code>. You can also download a specific folder with <code>npx degit opensas/mdn-svelte-tutorial/01-getting-started</code>. Degit won't create a local git repo, it will just download the files of the specified folder.</p> -</div> - -<h3 id="Using_the_Svelte_REPL">Using the Svelte REPL</h3> - -<p>A REPL (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">read–eval–print loop</a>) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.</p> - -<p>Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.</p> - -<p>It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.</p> - -<p>Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:</p> - -<p><img alt="the svelte repl in action, showing component code on the left, and output on the right" src="https://mdn.mozillademos.org/files/17340/03-svelte-repl-in-action.png" style="height: 946px; width: 1284px;"></p> - -<p>To start a REPL, open your browser and navigate to <a href="https://svelte.dev/repl">https://svelte.dev/repl</a>.</p> - -<ul> - <li>On the left side of the screen you'll see the code of your components, and on the right you'll see the running output of your app.</li> - <li>The bar above the code lets you create <code>.svelte</code> and <code>.js</code> files and rearrange them. To create a file inside a folder just specify the complete pathname, like this — <code>components/MyComponent.svelte</code>. The folder will be automatically created.</li> - <li>Above that bar you have the title of the REPL. Click on it to edit it.</li> - <li>On the right side you have three tabs: - <ul> - <li>The <em>Result</em> tab shows your app output, and provides a console at the bottom.</li> - <li>The <em>JS output</em> tab lets you inspect the JavaScript code generated by Svelte, and set compiler options.</li> - <li>The <em>CSS output</em> tab shows the CSS generated by Svelte.</li> - </ul> - </li> - <li>Above the tabs, you'll find a toolbar that lets you enter full-screen mode, and download your app. If you login with a GitHub account, you'll also be able to fork and save the app. You'll also be able to see all your saved REPLs by clicking on your GitHub username profile and selecting Your saved apps.</li> -</ul> - -<p>Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.</p> -</div> - -<p>We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example <code>import Todos from './components/Todos.svelte'</code>, just replace it with a flat URL, e.g. <code>import Todos from './Todos.svelte'</code>.</p> -</div> - -<h2 id="The_code_so_far">The code so far</h2> - -<h3 id="Git">Git</h3> - -<p>Clone the github repo (if you haven't already done it) with:</p> - -<pre class="brush: bash notranslate">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre> - -<p>Then to get to the current app state, run</p> - -<pre class="brush: bash notranslate">cd mdn-svelte-tutorial/01-getting-started</pre> - -<p>Or directly download the folder's content:</p> - -<pre class="brush: bash notranslate">npx degit opensas/mdn-svelte-tutorial/01-getting-started</pre> - -<p>Remember to run <code>npm install && npm run dev</code> to start your app in development mode.</p> - -<h3 id="REPL">REPL</h3> - -<p>To code along with us using the REPL, start at</p> - -<p><a href="https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2">https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2</a></p> - -<h2 id="Summary">Summary</h2> - -<p>This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p> - -<p>In Svelte:</p> - -<ul> - <li>We define the script, style and markup of each component in a single <code>.svelte</code> file.</li> - <li>Component props are declared with the <code>export</code> keyword.</li> - <li>Svelte components can be used just by importing the corresponding <code>.svelte</code> file.</li> - <li>Components styles are scoped, keeping them from clashing with each other.</li> - <li>In the markup section you can include any JavaScript expression by putting it between curly braces.</li> - <li>The top-level variables of a component constitute its state.</li> - <li>Reactivity is fired just by assigning a new value to a top level variable.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> - <li>React - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> - </ul> - </li> - <li>Ember - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> - </ul> - </li> - <li>Vue - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> - </ul> - </li> - <li>Svelte - <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> - </ul> - </li> -</ul> diff --git a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html deleted file mode 100644 index 1437b545ea..0000000000 --- a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Тестування кросбраузерності -slug: Learn/Tools_and_testing/Cross_browser_testing -translation_of: Learn/Tools_and_testing/Cross_browser_testing -original_slug: Learn/Tools_and_testing/Тестування_кросбраузерності ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt> - <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt> - <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt> - <dd>With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt> - <dd>Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt> - <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt> - <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt> - <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt> - <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd> -</dl> diff --git a/files/uk/learn/tools_and_testing/github/index.html b/files/uk/learn/tools_and_testing/github/index.html deleted file mode 100644 index 6af5a10937..0000000000 --- a/files/uk/learn/tools_and_testing/github/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Git та GitHub -slug: Learn/Tools_and_testing/GitHub -translation_of: Learn/Tools_and_testing/GitHub -original_slug: Learn/Tools_and_testing/Git_та_GitHub ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</p> - -<h2 id="Overview">Overview</h2> - -<p>VCSes are essential for software development:</p> - -<ul> - <li>It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result.</li> - <li>When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks.</li> - <li>You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, etc., but this is really error-prone and unreliable.</li> - <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li> -</ul> - -<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p> -</div> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>To use Git and GitHub, you need:</p> - -<ul> - <li>A desktop computer with Git installed on it (see the <a href="https://git-scm.com/downloads">Git downloads page</a>).</li> - <li>A tool to use Git. Depending on how you like to work, you could use a <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI.</li> - <li>A <a href="https://github.com/join">GitHub account</a>. If you haven't already got one, sign up now using the provided link.</li> -</ul> - -<p>In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!</p> - -<p>It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system <code>PATH</code>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.</p> - -<dl> - <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (from GitHub)</a></dt> - <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd> - <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt> - <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd> - <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt> - <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd> - <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt> - <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd> - <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt> - <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li> - <li><a href="https://git-scm.com/docs">Git command list</a></li> - <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li> - <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li> - <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li> - <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li> - <li> - <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p> - </li> -</ul> diff --git a/files/uk/learn/tools_and_testing/index.html b/files/uk/learn/tools_and_testing/index.html deleted file mode 100644 index 2cb51ee8d2..0000000000 --- a/files/uk/learn/tools_and_testing/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Tools and testing -slug: Learn/Tools_and_testing -tags: - - Accessibility - - Automation - - Beginner - - CSS - - CodingScripting - - HTML - - JavaScript - - Landing - - Learn - - NeedsTranslation - - Testing - - Tools - - Topic - - TopicStub - - cross browser - - user testing -translation_of: Learn/Tools_and_testing ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.</p> - -<p>On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p> - -<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p> - -<div class="note"> -<p><strong>Note</strong>: We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.</p> -</div> - - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use many the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.</p> - -<p>In addition, you should start with the first module in this topic, which gives a useful overview of the general area.</p> - -<h2 id="Modules">Modules</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a></dt> - <dd>Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a></dt> - <dd>JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. This module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a></dt> - <dd>All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt> - <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd> -</dl> diff --git a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html deleted file mode 100644 index 61bc35ac77..0000000000 --- a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Розуміння інструментів веб-розробки на стороні клієнта -slug: Learn/Tools_and_testing/Understanding_client-side_tools -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools -original_slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Get started now, with our "Client-side tooling overview"</a></strong></p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Client-side tooling overview</a></dt> - <dd>In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Command line crash course</a></dt> - <dd>In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Package management basics</a></dt> - <dd>In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introducing a complete toolchain</a></dt> - <dd>In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Deploying our app</a></dt> - <dd>In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.</dd> -</dl> diff --git a/files/uk/mdn/about/index.html b/files/uk/mdn/about/index.html deleted file mode 100644 index 687b08f8cb..0000000000 --- a/files/uk/mdn/about/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Про MDN -slug: MDN/About -tags: - - MDN Meta - - Путівник - - Спільнота -translation_of: MDN/About -original_slug: MDN/Про ---- -<div>{{MDNSidebar}}</div> - -<div><font><font>{{IncludeSubNav ("/uk/docs/MDN")}}</font></font></div> - -<p><font><font>MDN Web Docs — це постійно оновлюваний навчальний майданчик з веб-технологій та програмного забезпечення, яке живить {{Glossary("Тенета", "всесвітнє павутиння")}}, зокрема:</font></font></p> - -<ul> - <li><font><font>Веб-стандарти, як-от </font></font><a href="/uk/docs/Web/CSS" title="/ en-US / docs / CSS"><font><font>CSS</font></font></a><font><font>, </font></font><a href="/uk/docs/Web/HTML" title="/ en-US / docs / HTML"><font><font>HTML</font></font></a><font><font> та </font></font><a href="/uk/docs/Web/JavaScript" title="/ en-us / docs / JavaScript"><font><font>JavaScript</font></font></a></li> - <li><a href="/uk/docs/Web/Застосунки" title="/ en-US / docs / Apps"><font><font>Розробка web-застосунків</font></font></a></li> - <li><font><font><a href="/uk/Add-ons" title="/ en-us / docs / add-ons">Розробка додатків Firefox</a></font></font></li> -</ul> - -<h2 id="Наша_мета"><font><font>Наша мета</font></font></h2> - -<p><font><font>Мета MDN дуже проста: надати розробникам всі необхідні відомості для створення проектів у всесвітній </font></font><font><font>мережі. Якщо є відкрита технологія, доступна для <a href="/uk/docs/Web">тенет</a>, ми маємо її задокументувати</font></font><font><font>.</font></font></p> - -<p><font><font>Ми також надаємо документацію продуктів Mozilla і відомості те, як</font></font><a href="/uk/docs/Mozilla"><font><font> складати проекти Mozilla та брати участь у їх розробці.</font></font></a></p> - -<p><font><font>Якщо ви не впевнені, чи слід висвітлювати на MDN якусь тему, прочитайте: </font></font><a href="/uk/docs/MDN/Contribute/Guidelines/Does_this_belong_on_MDN"><font><font>чи належить це MDN?</font></font></a></p> - -<h2 id="Як_можна_допомогти"><font><font>Як можна допомогти?</font></font></h2> - -<p><font><font>Допомога MDN не конче потребує фахових навичок з написання коду чи письменницького хисту! Існує чимало різних способів допомоги: від загальної пере́вірки статей на змістовність та легкочитність до набору тексту та додавання зразків коду. Насправді, шляхів допомоги так багато, що ми цьому присвятили окрему сторінку «</font></font><a href="/uk/docs/MDN/з_чого_почати"><font><font>Початок роботи</font></font></a><font><font>», яка допоможе вам обрати завдання залежно від того, що вам цікаво та скільки часу ви готові приділити цій справі.</font></font></p> - -<p><font><font>Ви також можете допомогти </font><font><a href="/uk/docs/MDN/About/Promote">розповівши про MDN</a> у власному блозі чи веб-сайті.</font></font></p> - -<h2 id="Спільнота_MDN"><font><font>Спільнота MDN</font></font></h2> - -<p><font><font>Наша спільнота є всесвітньою! До неї належать люди з усього світу, носії низки різних мов. Якщо ви хочете дізнатись про нас більше, чи вам потрібна якась допомога з MDN, не соромтеся звернутись до </font></font><a href="https://discourse.mozilla-community.org/c/mdn"><font><font>нашого форуму</font></font></a><font><font> або </font></font><a href="irc://irc.mozilla.org#mdn"><font><font>каналу IRC</font></font></a><font><font>! Крім того, ми маємо обліковий запис <a href="http://twitter.com/MozDevNet">@MozDevNet</a> у Twitter. Там можна стежити за нашою діяльністю </font></font><font><font>або навіть </font><font>надсилати нам повідомлення, якщо раптом щось не так, або ви хочете лишити відгук (чи то пак щиру подяку) нашим учасникам та укладачам!</font></font></p> - -<h2 id="Використання_вмісту_MDN"><font><font>Використання вмісту MDN</font></font></h2> - -<p><font><font>Вміст MDN є безкоштовним та поширюється на умовах ліцензії відкритого доступу.</font></font></p> - -<h3 id="Авторські_права_та_ліцензії"><font><font>Авторські права та ліцензії</font></font></h3> - -<p><font><font>Вміст MDN повністю доступний під різними ліцензіями відкритого доступу. </font><font>Цей розділ охоплює різновиди вмісту, який ми надаємо, та ліцензії, що на нього поширюються.</font></font></p> - -<h4 id="Документація_та_статті"><font><font>Документація та статті</font></font></h4> - -<p><font><font><strong>Вікі-документи MDN</strong> було укладено за участю багатьох авторів, як у межах Mozilla Foundation, так і поза ними. Якщо не зазначено інше, вміст доступний на умовах </font></font><a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/"><font><font>ліцензії Creative Commons Attribution-ShareAlike</font></font></a><font><font> (CC-BY-SA), v2.5 або будь-якої пізнішої версії. </font><font>Будь ласка, наводьте «Mozilla Contributors» та посилання (якщо в мережі) або URL (якщо для друку) на відповідну вікі-сторінку, яку мали за джерело. </font><font>Наприклад, передруковуючи цю статтю, можна написати таке:</font></font></p> - -<blockquote><a href="https://developer.mozilla.org/uk/docs/MDN/Про"><font><font>Про MDN</font></font></a><font><font> від </font></font><a href="https://developer.mozilla.org/uk/docs/MDN/Про$history"><font><font>Mozilla Contributors</font></font></a><font><font> ліцензовано під </font></font><a href="http://creativecommons.org/licenses/by-sa/2.5/"><font><font>CC-BY-SA 2.5</font></font></a><font><font>.</font></font></blockquote> - -<p><font><font>Зверніть увагу, що в наведеному прикладі «Mozilla Contributors» є посиланням на історію цитованої сторінки. Докладніше д</font><font>ив. у статті </font></font><a href="http://wiki.creativecommons.org/Marking/Users"><font><font>Поради щодо ліцензійних позначок</font></font></a><font><font>.</font></font></p> - -<div class="note"> -<p><font><font>Див. </font></font><a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org"><font><font>вміст MDN на WebPlatform.org</font></font></a><font><font> для отримання відомостей про передрук та ліцензійні позначки статей MDN на сторінках <a href="http://webplatform.org">webplatform.org</a>.</font></font></p> -</div> - -<h4 id="Приклади_й_уривки_коду"><font><font>Приклади й уривки коду</font></font></h4> - -<p><font><font>Зразки коду, додані 20 серпня 2010 року чи пізніше, перебувають у </font></font><a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain"><font><font>відкритому доступі</font></font></a><font><font> (</font></font><a href="https://creativecommons.org/publicdomain/zero/1.0/"><font><font>CC0</font></font></a><font><font>). Загалом згадка про л</font><font>іцензію не потрібна, та якщо ви хочете, можете зазначити таке: "Всі авторські права передаються у суспільне надбання. http://creativecommons.org/publicdomain/zero/1.0/".</font></font></p> - -<p><font><font>На зразки коду, додані раніше 20 серпня 2010 року, поширюються умови </font></font><a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php"><font><font>ліцензії MIT</font></font></a><font><font>; ви маєте лише доповнити шаблон ліцензації MIT таким рядком: "© <дата останньої версії вікі-сторінки> <ім'я особи, що додала її до вікі>".</font></font></p> - -<h4 id="Внесок"><font><font>Внесок</font></font></h4> - -<p><font><font>Якщо ви хочете взяти участь в укладанні документації, вам доведеться погодитись на поширення вашого внеску на умовах ліцензії Attribution-ShareAlike (або іншої ліцензії, що може бути зазначена на сторінці, яку ви редагуєте) та зразків коду на умовах </font></font><a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/"><font><font>Creative Commons CC-0</font></font></a><font><font> (суспільне надбання). Будь-який внесок у документацію MDN означає вашу згоду на поширення власного доробку на умовах цих ліцензій</font><font>.</font></font></p> - -<p><font><font>Деякі старі статті використовують інші ліцензії, про що свідчить відповідна позначка</font><font> </font></font><a href="/uk/docs/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a> наприкінці кожної такої сторінки.</p> - -<div class="warning"> -<p><font><font>Для створення нових сторінок вживати інші ліцензії не дозволено.</font></font></p> -</div> - -<p><strong><font><font>Авторське право на кожен внесок належить авторові, якщо він не передавав його іншій особі</font></font></strong><font><font>.</font></font></p> - -<p><font><font>Якщо маєте сумніви чи запитання щодо викладеного тут, зв'яжіться з </font></font><a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto: eshepherd@mozilla.com"><font><font>очільниками MDN</font></font></a><font><font>.</font></font></p> - -<h4 id="Товарні_знаки_й_логотипи"><font><font>Товарні знаки й логотипи</font></font></h4> - -<hr> -<p>Дія ліцензії Creative Commons не поширюється на товарні знаки й логотипи Mozilla Foundation, як і на вигляд та оздоблення цього сайту. Вони, як витвір окремого авторства, не є частиною вмісту MDN, та ліцензовані на інших умовах. Якщо деякі з них ви хочете використати разом із текстом статей, чи маєте якісь питання щодо ліцензійних умов, ви мусите звернутись до Mozilla Foundation за адресою <a href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> - -<h3 id="Посилання_на_MDN"><font><font>Посилання на MDN</font></font></h3> - -<p>Різні види посилань та відповідні поради див. у статті <a href="/uk/docs/MDN/About/Linking_to_MDN">посилання на MDN</a>.</p> - -<h2 id="Завантаження_вмісту"><font><font>Завантаження вмісту</font></font></h2> - -<p><font><font>Ви можете завантажити </font></font><a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz"><font><font>повне дзеркало MDN</font></font></a><font><font> (2,1 Гб на лютий 2017 року).</font></font></p> - -<h3 id="Окремі_сторінки"><font><font>Окремі сторінки</font></font></h3> - -<p><font><font>Ви можете завантажити вміст окремої сторінки MDN, додавши до URL-адреси <a href="/uk/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">відповідні параметри</a>, що вказують бажаний формат.</font></font></p> - -<h3 id="Сторонні_засоби"><font><font>Сторонні засоби</font></font></h3> - -<p><font><font>Ви можете переглядати вміст MDN за допомогою сторонніх засобів, як-от </font></font><a href="http://kapeli.com/dash"><font><font>Dash</font></font></a><font><font> (для macOS) та </font></font><a href="http://zealdocs.org/"><font><font>Zeal</font></font></a><font><font> (для Linux та Windows).</font></font></p> - -<p><font><font>Поза тим, <a href="https://kapeli.com/">Kapeli</a></font></font><font><font> поширює </font></font><font><font><a href="https://kapeli.com/mdn_offline">офлайнові документи MDN</a> що</font></font><font><font> охоплюють HTML, CSS, JavaScript, SVG та XSLT.</font></font></p> - -<h2 id="Негаразди_з_MDN_Web_Docs"><font><font>Негаразди з MDN Web Docs</font></font></h2> - -<p><font><font>Про те, куди і як звертатися з повідомленням про помилки в роботі чи на сторінках документації MDN, див. у статті </font></font><a href="/uk/docs/MDN/Contribute/Howto/Report_a_problem"><font><font>як повідомити про помилку в MDN</font></font></a><font><font>.</font></font></p> - -<h2 id="Історія_MDN_Web_Docs"><font><font>Історія MDN Web Docs</font></font></h2> - -<p><font><font>MDN Web Docs (раніше </font></font><em><font><font>Mozilla Developer Network (MDN)</font></font></em><font><font>, а до того </font></font><em><font><font>Mozilla Developer Center (MDC),</font></font></em><font><font> також відомий як </font></font><em><font><font>Devmo</font></font></em><font><font>) з'явився на початку 2005 року, коли </font></font><a class="external" href="http://www.mozillafoundation.org"><font><font>Mozilla Foundation</font></font></a><font><font> отримала від AOL ліцензію на використання вмісту Netscape </font></font><a href="https://web.archive.org/web/*/devedge.netscape.com" title="Проект: en / DevEdge"><font><font>DevEdge</font></font></a><font><font>. </font><font>Вміст DevEdge опрацювали і все, що становило цінність, добровольці згодом перенесли до MDN.</font></font></p> - -<p>Докладнішу історію MDN, зокрема оповідки декого з причетних осіб, викладено в статті про наше <a href="/uk/docs/MDN_at_ten">святкування десятої річниці</a>.</p> - -<h2 id="Про_Mozilla"><font><font>Про Mozilla</font></font></h2> - -<p><font><font>Якщо вас цікавить хто ми є і як бути частиною Mozilla, чи просто де нас шукати, — ви прийшли куди треба. Дізнайтеся, що нас спонукає і що робить особливими, на сторінці нашої </font></font><a href="https://www.mozilla.org/uk/mission/"><font><font>місії</font></font></a><font><font>.</font></font></p> diff --git a/files/uk/mdn/contribute/getting_started/index.html b/files/uk/mdn/contribute/getting_started/index.html deleted file mode 100644 index 08d86d068b..0000000000 --- a/files/uk/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: З чого почати на MDN -slug: MDN/Contribute/Getting_started -tags: - - MDN Meta - - Вступ - - Початківець - - Путівник -translation_of: MDN/Contribute/Getting_started ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<div>Ми — відкрита спільнота розробників та редакторів, що створюють ресурси для кращого вебу, незалежно від компанії, {{glossary("Browser", "переглядача")}} та платформи. Будь-хто може долучитися й кожна нова особа нас посилює. Разом ми можемо й надалі запроваджувати новації в царині веб-технологій, що слугуватимуть спільній меті. Все починається саме тут, завдяки вам.<br> -Кожна частина MDN (від коду, що уможливлює роботу сайту, до прикладів, зразків коду та документації) створена спільнотою розробників та редакторів. Усі можуть запропонувати щось від себе, і ми сподіваємося, що ви приєднаєтесь до нас!</div> - -<h2 id="Три_прості_кроки_до_MDN">Три прості кроки до MDN</h2> - -<p>MDN побудована за принципом Вікіпедії, де будь-хто може додавати й редагувати вміст. Вам не треба бути програмістом чи багато знати про технології. Є безліч завдань, що потребують вирішення: від простих, таких як коректура та виправлення помилок, до складних, як написання документації API. Цей путівник допоможе вам зробити перші кроки та з'ясувати, чим саме ви можете найбільше посприяти поліпшенню MDN.</p> - -<p>Брати учать у розвитку MDN легко і цілком безпечно. Навіть якщо ви десь схибите, це легко виправити; якщо ви не певні того, як щось має виглядати, або маєте прогалини в знаннях граматики, не хвилюйтеся про це! У нас є команда людей, робота яких — пильнувати, щоб вміст MDN був якісним наскільки це можливо. Завжди хтось буде поруч, щоб переконатися, що ваше викладення є охайним та зрозумілим. Поширюйте свої знання, діліться тим, на чому знаєтесь найліпше, а решта спільноти допоможе зробити вашу роботу навіть кращою.</p> - -<div class="note"> -<p><strong>Заувага:</strong> Над перекладом MDN українською мовою працюють лише добровольці (жодної команди постійних учасників немає) але ви завжди можете покладатися на допомогу більш досвідчених членів україномовної частини спільноти.</p> -</div> - -<h3 id="Крок_1_Створіть_обліковий_запис_на_MDN">Крок 1: Створіть обліковий запис на MDN</h3> - -<p>Щоб взяти участь у творенні MDN, вам потрібен обліковий запис. Докладно про це читайте у статті <a href="/uk/docs/MDN/Contribute/Howto/Create_an_MDN_account">«Як створити обліковий запис MDN»</a>. Завважте, що для створення профілю MDN необхідно мати <a href="https://github.com/join">обліковий запис на GitHub</a>, бо зараз ми використовуємо GitHub для аутентифікації.</p> - -<p>Якщо ваша задача потребує створення нових сторінок, читайте <a href="/uk/docs/MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки#Отримання_дозволу_на_створення_сторінки">відповідний розділ</a> статті <a href="/uk/docs/MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки">«Як створювати й редагувати сторінки»</a> про те, як отримати відповідний дозвіл. З міркувань безпеки нові користувачі спершу позбавлені цієї можливості.</p> - -<h3 id="Крок_2_Оберіть_завдання">Крок 2: Оберіть завдання</h3> - -<p>Тепер, коли ви увійшли в систему, прочитайте опис {{anch("Можливі типи завдань", "різних типів завдань")}} й оберіть те, що вам найбільш до вподоби. Ви можете обрати будь-яке завдання, що подобається, і почати робити свій внесок.</p> - -<h3 id="Крок_3_Виконайте_завдання">Крок 3: Виконайте завдання</h3> - -<p>Тепер, коли ви знаєте, що саме хочете робити, просто знайдіть якусь сторінку чи то приклад коду, що потребує вашої участі, та виконайте своє завдання!</p> - -<p>Не переймайтеся надмірно довершеністю зробленого. Інші учасники спільноти працюють зокрема й над виправленням помилок, що їх ви можете припуститися. Якщо у Вас виникли запитання під час роботи, на сторінці «<a href="/uk/docs/MDN/Community">Спільнота</a>» Ви знайдете списки розсилки та канали чатів, де можна отримати відповідь.</p> - -<div class="note"> -<p><strong>Заувага:</strong> Якщо ви хочете перевірити якісь зміни на MDN перш ніж робити щось «насправді», у нас саме для того є сторінка «<strong><a href="/uk/docs/Sandbox">Пісочниця</a></strong>». Будьте ласкаві, грайтеся лише там. Не варто робити непотрібних змін на звичайних сторінках, аби побачити, що станеться; це створює безлад, який комусь доведеться прибирати, чи навіть гірше — спантеличує читачів, які щось вивчають або намагаються знайти.</p> -</div> - -<p>Як завершите розпочате завдання, можете братися до наступного. Або ж зверніть увагу на <a href="#Інші_речі_які_ви_можете_зробити_на_MDN">інші речі, які ви можете зробити на MDN</a>.</p> - -<h2 id="Можливі_типи_завдань">Можливі типи завдань</h2> - -<p>Існує кілька напрямків, які ви можете обрати, щоб внести свій внесок у розвиток MDN залежно від вашого хисту й уподобань. Хоча деякі завдання можуть бути складними, у нас є багато простих. Чимало завдань потребує лише п'яти хвилин (або й менше!) вашого часу. Нижче наведено різні типи завдань та приблизний час, що кожне з них зазвичай потребує.</p> - -<h3 id="Варіант_1_Мені_подобаються_слова">Варіант 1: Мені подобаються слова</h3> - -<p>Ви можете допомогти нам перевірити чи зредагувати наявні документи, а також позначити їх належними мітками.</p> - -<ul> - <li><a href="/uk/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Зробіть опис для сторінки</a> (5-15 хвилин)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Do_an_editorial_review">Зробіть редакційний огляд</a> (5–30 хвилин)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Додайте новий запис до Словника</a> (15 хвилин-1 година)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Напишіть статтю, що допоможе людям дізнатися про web</a> (1-3 години)</li> -</ul> - -<div class="note"><strong>Заувага:</strong> Якщо ви перевіряєте статті або пишете нові, ознайомтеся, будь ласка, спершу зі <a href="/uk/docs/MDN/Contribute/Guidelines/Style_guide">Style Guide</a>. Це допоможе забезпечити однорідність та послідовність викладення.</div> - -<h3 id="Варіант_2_Мені_подобається_код">Варіант 2: Мені подобається код</h3> - -<p>Нам потрібно більше зразків коду! Ви також можете допомогти із розробкою <a href="/uk/docs/MDN/Kuma">Kuma</a> — платформи MDN.</p> - -<ul> - <li><a href="/uk/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Перетворення зразків коду в "Живі"</a> (30 хвилин)</li> - <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Прочитайте ознайомчий путівник</a> (30 хвилин)</li> - <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Налаштуйте середовище збирання Kuma</a> (1 година)</li> - <li><a href="https://github.com/mozilla/kuma#readme">Запропонуйте свої зміни до коду Kuma</a> (1 година)</li> -</ul> - -<h3 id="Варіант_3_Мені_однаково_подобається_писати_слова_і_код">Варіант 3: Мені однаково подобається писати слова і код</h3> - -<p>У нас є завдання, які вимагають технічних та мовних навичок, як написання нових статей, перевірка на технічну точність або адаптація документів.</p> - -<ul> - <li><a href="/uk/docs/MDN/About/Promote">Рекламуйте MDN на власному веб-сайті</a> (5 хвилин)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Do_a_technical_review">Зробіть технічний огляд</a> (30 хвилин)</li> - <li><a href="/uk/docs/Contribute_to_docs_that_are_currently_needed">Напишіть нову статтю з теми, що має попит</a> (година чи більше)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Створіть взаємодіяльну вправу, що допоможе людям дізнатися про web</a> (година чи більше)</li> - <li><a href="/uk/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Виправте помилку документації</a> з <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN-категорії в Bugs Ahoy</a> (година чи більше)</li> -</ul> - -<h3 id="Варіант_4_Я_хочу_перекласти_MDN_своєю_мовою">Варіант 4: Я хочу перекласти MDN своєю мовою</h3> - -<p>Всю роботу з перекладу й <abbr title="локалізації">умісцевлення</abbr> MDN здійснює наша дивовижна спільнота добровольців.</p> - -<ul> - <li><a href="/uk/docs/MDN/Contribute/Localize/Translating_pages">Перекладіть сторінку</a> (2 години) (зважайте на <a href="/uk/docs/MDN/Doc_status/l10nPriority">першочерговість</a>)</li> - <li>Зв'яжіться з іншими перекладачами Вашою мовою, згаданими у статті <a href="/uk/docs/MDN/Contribute/Localize/Проекти_з_локалізації#uk_Українська">«Проекти з локалізації»</a> (30 хвилин)</li> -</ul> - -<h3 id="Варіант_5_Я_знайшов_хибну_інформацію_але_не_знаю_як_це_виправити">Варіант 5: Я знайшов хибну інформацію, але не знаю, як це виправити</h3> - -<p>Ви можете повідомити про негаразди <a class="external" href="https://bugzilla.mozilla.org/form.doc">надіславши звіт</a>. (5 хвилин)</p> - -<h2 id="Інші_речі_які_ви_можете_зробити_на_MDN">Інші речі, які ви можете зробити на MDN</h2> - -<ul> - <li><a href="/uk/docs/MDN/Community">Приєднатися до спільноти MDN</a>.</li> - <li><a href="/uk/profile">Заповніть ваш профіль</a> щоб інші могли дізнатись про вас більше.</li> - <li>Дізнайтеся більше про <a href="/uk/docs/MDN/Contribute">внесок в MDN</a>.</li> -</ul> diff --git a/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html b/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html deleted file mode 100644 index 900b4fa71f..0000000000 --- a/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Як створювати й редагувати сторінки -slug: MDN/Contribute/Howto/Create_and_edit_pages -tags: - - Вступ - - Початківець - - Путівник -translation_of: MDN/Contribute/Howto/Create_and_edit_pages -original_slug: MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">Ця стаття знайомить новачків із тим, як здійснюється редагування наявних сторінок та створення нових.</span></p> - -<h2 id="Редагування_наявних_сторінок">Редагування наявних сторінок</h2> - -<p>Редагування сторінки:</p> - -<ul> - <li>Клікніть на кнопку<strong> Редагувати</strong> в правому верхньому куті сторінки.</li> - <li>Потім сторінка перезавантажиться з інтерфейсом редактора, в якому можна додавати або видаляти інформацію відразу на сторінці.</li> - <li>Ви можете додавати параграфи, видаляти текст, вставляти заголовки і використовувати інші основні функції, які необхідні для написання та редагування. Дивіться керівництво <a href="/en-US/docs/MDN/Contribute/Editor/Basics">Editor UI elements</a> в <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor guide</a> щоб отримати більше інформації про використання вбудованого MDN редактора.</li> -</ul> - -<h3 id="Попередній_перегляд_змін">Попередній перегляд змін</h3> - -<p>Щоб продивитись, як ваші зміни будуть відображатись:</p> - -<ul> - <li>Клікніть на кнопку <strong>Попередній перегляд</strong> (в режимі редагування) над заголовком сторінки.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Це відкриває сторінку попереднього перегляду, яка показує ваші зміни в новому вікні або вкладці</span></span>.</li> - <li><span class="tlid-translation translation" lang="uk"><span title="">Кожен раз, коли ви натискаєте цю кнопку, вона оновлює сторінку попереднього перегляду з останніми змінами</span></span>.</li> -</ul> - -<p>Будьте уважні! Попередній перегляд сторінки <strong>не зберігає ваші зміни</strong>, тому не закривайте вкладку з редактором, поки не збережете свою роботу.</p> - -<h3 id="Коментар_до_ревізії">Коментар до ревізії</h3> - -<p>Після попереднього перегляду змін ви захочете <em>зберегти вашу ревізію (версію)</em>. Перед тим, як <strong>зберегти</strong>, подивіться на текстовий блок з коментарями до ревізії, що знаходиться внизу сторінки і залиште коментар, щоб пояснити іншим учасникам, чому ви зробили будь-які зміни. Наприклад, ви можливо, додали новий розділ, змінили деякі слова, щоб зробити термінологію більш послідовною, переписали абзац для уточнення мови або видалили інформацію, оскільки вона була зайвою.</p> - -<h3 id="Зміст">Зміст</h3> - -<p>В розділі "У цій статті" знаходиться автоматично створений список посилань до заголовків на сторінці. Формулювання цих посилань можна змінювати, редагуючи заголовки. Також можна видалити вміст секції або зменшити кількість посилань в ній, вибравши "Редагувати назву сторінки та властивості" і змінити значення спадного списку пункту "зміст".</p> - -<h3 id="Мітки">Мітки</h3> - -<p>Ви можете додавати або видаляти теги, які описують вміст сторінки і функцію під розділом редагування сторінки. Дивіться розділ<a href="/en-US/docs/MDN/Contribute/Tagging"> Як правильно поставити теги сторінок</a> для отримання інформації про теги.</p> - -<h3 id="Потрібна_перевірка">Потрібна перевірка?</h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо експерт або досвідчений дописувач повинен переглянути ваші зміни, ви можете надіслати запит на технічний огляд (для коду, API чи технологій), редакційний огляд (прозу, граматику та вміст), переконавшись, що відповідний прапорець встановлено перед збереженням</span>.</span></p> - -<h3 id="Вкладення_файлів">Вкладення файлів</h3> - -<p>Якщо ви хочете <strong>долучити файл</strong><em> </em> <span class="tlid-translation translation" lang="uk"><span title="">до існуючої сторінки або додати ілюстрацію для подальшого роз'яснення, його можна ввести внизу сторінки.</span> <span title="">Завантажуючи зображення, будь ласка, використовуйте інструмент для оптимізації зображень, щоб зробити файл якомога меншим для завантаження.</span> <span title="">Це покращує час завантаження сторінки та сприяє загальній продуктивності MDN.</span> <span title="">Ви можете скористатись улюбленим інструментом, якщо він у вас є.</span></span> В іншому випадку ми пропонуємо <a href="https://tinypng.com/">TinyPNG</a>, зручний веб-інструмент.</p> - -<h3 id="Оприлюднити_скасувати_чи_продовжити_редагування">Оприлюднити, скасувати чи продовжити редагування</h3> - -<p>Коли ви закінчите редагування і будете задоволені своїм попереднім переглядом, ви <span class="tlid-translation translation" lang="uk"><span title="">ви можете опублікувати свою роботу та коментарі, натиснувши <em>зелену</em> кнопку</span></span> <strong>Оприлюднити</strong> <span class="tlid-translation translation" lang="uk"><span title="">праворуч від заголовка сторінки або внизу сторінки.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете продовжувати працювати, натисніть кнопку</span></span> <strong>Оприлюднити та продовжити редагування</strong>, <span class="tlid-translation translation" lang="uk"><span title="">що публікує ваші зміни, зберігаючи інтерфейс редагування відкритим</span></span>.</p> - -<p>Якщо ви передумали, ви можете скасувати свої зміни, натиснувши <em>червону</em> кнопку<strong> Відхилити</strong>. <span class="tlid-translation translation" lang="uk"><span title="">Зауважте, що відкидання змін <em>назавжди</em> відкидає їх.</span></span></p> - -<p>Натискання <strong>Enter</strong> в полі редагування коментарів еквівалентне натисканню <strong>Оприлюднити та продовжити редагування</strong>.</p> - -<div class="note"> -<p>Якщо ви намагаєтесь зберегти свою сторінку і ваші зміни відхиляються як недійсні, коли ви намагаєтесь зберегти їх, але вміст насправді підходить для MDN, вам слід звернутися на <a href="mailto:mdn-admins@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">email the MDN admin team</a>, щоб допомогли розмістити ваш контент.</p> -</div> - -<h2 id="Отримання_дозволу_на_створення_сторінки">Отримання дозволу на створення сторінки</h2> - -<p>For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to go about getting the page created. There are two options:</p> - -<ul> - <li><strong>Ask for the page to be created for you.</strong> To do this, <a href="https://bugzilla.mozilla.org/enter_bug.cgi?bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_fx_iteration=---&cf_fx_points=---&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&flag_type-4=X&flag_type-607=X&flag_type-800=X&flag_type-803=X&form_name=enter_bug&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Unspecified&priority=--&product=Developer%20Documentation&rep_platform=Unspecified&short_desc=Create%20page%3A%20&status_whiteboard=create-page&target_milestone=---&version=unspecified">file a documentation request bug</a> with the subject "Create page: <page title>". Be sure to fill out the URL field with the location on MDN where you'd like the page to go if you know where to put it. You should include in the comment text some information about why you need the page created.</li> - <li><strong>Request page creation privileges.</strong> If you request page creation privileges and they're granted to you, you'll be able to add new pages yourself by following the instructions here. To request these privileges, <a href="mailto:mdn-admins@mozilla.org">email the MDN admin</a> team with your request. Be sure to include your username, why you would like to have the ability to create new pages (for instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary). You should also have already made some useful contributions to the site content, and should have been a contributor for some length of time (the length of time and the other factors are all considered together, so there isn't a fixed time period here).</li> -</ul> - -<h2 id="Створення_нової_сторінки">Створення нової сторінки</h2> - -<p>Once you have page-creation permission, you can start creating new pages.</p> - -<p>If you do not know where to put a new article, <strong>do not worry about it!</strong> Put it anywhere and we will find it and move it to where it belongs or merge it into existing content if that makes the most sense. You also do not need to worry about making it perfect. We have happy helper gnomes that will help make your content clean and luscious.</p> - -<p>There are a few ways to create a new page:</p> - -<ul> - <li><a href="#Missing_page_link">"Missing page" link</a></li> - <li><a href="#New_page_without_link">New page without link</a></li> - <li><a href="#Subpage_of_an_existing_page">Subpage of an existing page</a></li> - <li><a href="#Clone_of_an_existing_page">Clone of an existing page</a></li> - <li><a href="#Link_from_an_existing_page">Link from an existing page</a></li> -</ul> - -<dl> -</dl> - -<h3 id="Посилання_на_відсутню_сторінку">Посилання на відсутню сторінку</h3> - -<p>As with most wikis, on MDN it is possible to create a link to a page that doesn't yet exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.</p> - -<p>To create a page from a "missing page" link:</p> - -<ol> - <li>Make sure that you are logged into MDN, and have page-creation permission. (If you aren't logged in, clicking a "missing page" link gives a 404 (page not found) error.)</li> - <li>Click the "missing page" link. If you have page creation permission, the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor UI</a> opens, ready for you to create the missing page.</li> - <li>Write the content of the page, and save it.</li> -</ol> - -<h3 id="Нова_сторінка_без_посилань">Нова сторінка без посилань</h3> - -<p><em>To create a new page without linking from another page</em>, enter a unique page name in the URL field of your browser. For example, if you enter:</p> - -<pre class="language-html">https://developer.mozilla.org/uk/docs/FooBar</pre> - -<p>MDN creates a new page with the title "FooBar" and opens the editor so you can add content to the new page. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article for how to use the editor mode.</p> - -<p><em>To create a new page without linking from another page</em>:</p> - -<ol> - <li>Make sure that you are logged in, and have page-creation permission.</li> - <li>Enter the following in the URL field of your browser.</li> -</ol> - -<pre class="language-html">https://developer.mozilla.org/uk/docs/new</pre> - -<p>MDN creates a new page with a place for a title and opens the editor so you can add content to the new page. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article for how to use the editor mode.</p> - -<h3 id="Підстаття_наявної_статті">Підстаття наявної статті</h3> - -<p>To create a page that you want to be below an existing page in the page hierarchy:</p> - -<ol> - <li>On the "parent" page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), and click <strong>New sub-page</strong>. An editor view opens for creating a new document.</li> - <li>Type a title for the document in the <strong>Title</strong> field.</li> - <li>Change the <strong>Slug</strong> field if needed (for example, if the title is very long and you want a shorter URL). This field is automatically filled by the editor, by substituting underscores for spaces in the title. In this case, you can change only the last part of the URL of the document.</li> - <li>In the <strong>TOC</strong> field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.</li> - <li>Write content of the page in the editor pane, and save your changes. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article for how to use the editor mode.</li> -</ol> - -<h3 id="Створення_клона_наявної_сторінки">Створення клона наявної сторінки</h3> - -<p>If there is an existing page whose format you want to use for your new page, you can "clone" that page and then change the content.</p> - -<ol> - <li>On the original page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), and click <strong>Clone this page</strong>. An editor view opens for creating a new document.</li> - <li>Change the <strong>Title</strong> of the page as appropriate for the new content. The <strong>Slug</strong> field is updated automatically as you change the <strong>Title</strong> field.</li> - <li>If needed, change the path portion of the <strong>Slug</strong> field, to put the new document in a different part of the document hierarchy. (In most cases, this is not needed, because the cloned page has similar content to the original, and therefore should be located in a similar place.)</li> - <li>In the <strong>TOC</strong> field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.</li> - <li>Write content of the page in the editor pane, and save your changes. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article for how to use the editor mode.</li> -</ol> - -<h3 id="Посилання_з_наявної_сторінки">Посилання з наявної сторінки</h3> - -<p>This method is a bit of a hybrid. You can create a link on another page, and then click the link you just inserted, to create the new page.</p> - -<ol> - <li>Enter the name of the new page anywhere (that makes sense) in the text of an existing page.</li> - <li>Highlight the name and <strong>click the Link icon (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="height: 28px; width: 29px;">) </strong>in the editor's toolbar. The <strong>"Update Link"</strong> dialog opens, with the highlighted text in the<strong> "Link To"</strong> field.</li> - <li>"/en-US/docs/" is inserted by default at the beginning of the URL field.<em> Enter the name </em>of the page after "/en-US/docs/". (The page name doesn't have to be the same as the link text.)</li> - <li>Click OK to create and insert the link.</li> -</ol> - -<p>If the page does not already exist, the link is displayed in red. If the page <em>does</em> already exist, the link is displayed in blue. If you want to create a new page but the page title you want is already taken, check first if it makes more sense to help edit and improve the page that is already there. Otherwise, think of a different title for your new page and create a link for it. Refer to the <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> for guidelines.</p> - -<p>To add content to your new page, click on the red link you just created (after saving and closing the editor). The new page opens in editor mode, so you can start writing. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article for how to use the editor mode.</p> - -<h2 id="Оновлення_вмісту_сторінки">Оновлення вмісту сторінки</h2> - -<p>MDN's support for KumaScript macros and transclusion of content from one page into another can sometimes be hampered slightly by the need for caching of generated pages for performance reasons. Pages are built from their source, and that output is cached for future requests. From then on, any macros (templates) or transclusions (using the macro<span class="templateLink"><code><a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a></code></span> on that page will not reflect changes made to the macro, the macro's output, or the contents of the transcluded material.</p> - -<ul> - <li>To update a page manually, you can do a force-refresh in your browser. MDN detects this and triggers a page rebuild, pulling in updated macro output and transcluded page content.</li> - <li>You can also configure pages to periodically be rebuilt automatically. This should not be done unless you expect the page to need updating frequently. See <a href="/en-US/docs/MDN/Contribute/Tools/Page_regeneration">Page regeneration</a> for detailed information.</li> -</ul> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Editor">MDN editor guide</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a></li> -</ul> diff --git a/files/uk/mdn/contribute/howto/index.html b/files/uk/mdn/contribute/howto/index.html deleted file mode 100644 index 5bde5d4a0a..0000000000 --- a/files/uk/mdn/contribute/howto/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Покрокові путівники -slug: MDN/Contribute/Howto -tags: - - Landing - - MDN Meta -translation_of: MDN/Contribute/Howto ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p>Кожна з наведених статей являє собою покроковий путівник для досягнення певної мети пов'язаної із внеском до MDN.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/uk/mdn/contribute/index.html b/files/uk/mdn/contribute/index.html deleted file mode 100644 index b265149f28..0000000000 --- a/files/uk/mdn/contribute/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Внесок до MDN -slug: MDN/Contribute -tags: - - Landing - - MDN Meta - - Путівник -translation_of: MDN/Contribute ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p><span id="result_box" lang="uk"><span>Ласкаво просимо!</span> <span>Відвідавши цю сторінку, ви зробили перший крок до того, щоб стати учасником MDN!</span></span></p> - -<p><span class="seoSummary">Наведені тут вказівки охоплюють всі питання щодо участі в творенні MDN, зокрема, настанови зі стилю, посібники з використання нашого редактора та інструментів тощо. Будь ласка, зверніть увагу, що перш ніж редагувати або створювати будь-які сторінки, Ви маєте ознайомитись та погодитись з <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">умовами Mozilla</a>. </span></p> - -<p>Якщо ви раніше не допомагали MDN, зверніться спершу до статті <a href="/uk/docs/MDN/з_чого_почати">«З чого почати на MDN»</a> — вона допоможе Вам з вибором першого завдання і його виконанням.</p> - -<p>{{LandingPageListSubPages()}}</p> diff --git a/files/uk/mdn/guidelines/index.html b/files/uk/mdn/guidelines/index.html deleted file mode 100644 index d16a0b0be8..0000000000 --- a/files/uk/mdn/guidelines/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Путівники -slug: MDN/Guidelines -tags: - - MDN Meta - - Путівник -translation_of: MDN/Guidelines ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p><span class="seoSummary">Перелічені тут путівники наводять докладні відомості щодо того, як слід писати й оформлювати документацію MDN, як мають виглядати зразки коду та інший вміст.</span> Наслідуючи їх ви можете бути певні, що ваше викладення буде виразним та легкочитним.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/uk/mdn/guidelines/writing_style_guide/index.html b/files/uk/mdn/guidelines/writing_style_guide/index.html deleted file mode 100644 index f14340877a..0000000000 --- a/files/uk/mdn/guidelines/writing_style_guide/index.html +++ /dev/null @@ -1,727 +0,0 @@ ---- -title: Настанови зі стилю -slug: MDN/Guidelines/Writing_style_guide -tags: - - MDN Meta - - Style guide - - Настанови зі стилю - - Путівник -translation_of: MDN/Guidelines/Writing_style_guide -original_slug: MDN/Guidelines/Настанови_зі_стилю ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p><span class="seoSummary">Щоб зробити викладення документації на MDN Web Docs однорідним, виразним та легкочитним, в цих настановах зазначено, як слід писати, форматувати й упорядковувати текст. Втім, це радше посібник, аніж перелік суворих вимог.</span> Звісно, нас більше цікавить вміст, аніж форма викладення, тож не переймайтесь надмірно докладним вивченням настанов зі стилю. Але й не дивуйтесь, якщо хтось із сумлінних добровольців згодом виправить ваш доробок задля дотримання наведених тут правил.</p> - -<p>Мовознавчі настанови цього посібника стосуються здебільшого англійської мови. Для інших мов можна й варто створювати окремі стильові посібники. Їх слід оприлюднювати як підстатті основної сторінки перекладацької команди.</p> - -<p>Стандарти стилю, що стосуються вмісту на інших (окрім MDN) сайтах, наведено у <a href="https://www.mozilla.org/en-US/styleguide/">Єдиному посібнику зі стилю Mozilla</a>.</p> - -<h2 id="Основи">Основи</h2> - -<p>Найкраще місце для початку в будь-якому великому керівництві - це певні базові текстові стандарти, які допомагають дотримуватись сумісності документації. Наступні розділи описуються деякі із цих основ, які допоможуть вам.</p> - -<h3 id="Назви_сторінок">Назви сторінок</h3> - -<p>Назви сторінок використовуються в результатах пошуку, а також для структурування ієрархії сторінок у списку "хлібних крихт" зверху сторінки. Назви сторінок (які відображаються зверху сторінки, а також у результатах пошуку) можуть відрізнятись від "slug" (унікальний ідентифікатор) соторінки, яка є частиною URL адреси після "<em><locale>/docs/</em>".</p> - -<h4 id="Регістр_заголовків_сторінок_та_розділів">Регістр заголовків сторінок та розділів</h4> - -<p>Заголовки сторінок та заголовки розділів мають починатись з великої літери (використовується лише для першого слова в реченні та власних імен), але не кожне слово:</p> - -<ul> - <li><span class="correct"><strong>Правильно</strong></span>: "Новий спосіб прокидувань в JavaScript"</li> - <li><span class="incorrect"><strong>Неправильно</strong></span>: "Новий Спосіб Прокидувань В JavaScript"</li> -</ul> - -<p>У нас є багато старих сторінок, які було написано до встановлення цього правила. За бажанням ви можете оновити їх, аби вони стали більш читабильними. Поступово ми доберемось до їх редагування.</p> - -<h4 id="Вибір_заголовків_та_коротких_заголовків.">Вибір заголовків та коротких заголовків.</h4> - -<p>Унікальний ідентифікатор має бути коротким; коли створюєте новий рівень ієрархії, компонент нового рівня у вигляді "slug" ідентифікатора має складатись із одного-двох слів.</p> - -<p>Заголовки сторінок, з іншої сторони, можуть бути такими довгими на скільки це потрібно і мають описувати суть статті.</p> - -<h4 id="Створення_нових_піддерев">Створення нових піддерев</h4> - -<p>Коли вам потрібно додати якісь статті до певної теми чи області обговорення, ви можете зробити це створивши цільову сторінку, після цього додавайте підсторінки для кожної окремої статті. Цільова сторінка має описуватись за допомогою одного або двох абзаців, які розкривають тему чи технологію, потім відобразіть список підсторінок з поясненням до кожної з них. Ви можете автоматизувати вставку сторінок в список, використовуючи макроси, які ми створили.</p> - -<p>For example, consider the <a href="/uk/docs/Web/JavaScript">JavaScript</a> guide, which is structured as follows:</p> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Introduction" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> -</ul> - -<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p> - -<h3 id="General_article_content_guidelines">General article content guidelines</h3> - -<p>When writing any document, it's important to know how much to say. If you ramble on too long, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article. We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article <a href="/uk/docs/MDN/Contribute/Howto/Write_for_SEO">How to write for SEO on MDN</a>.</p> - -<p>The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.</p> - -<h4 id="Consider_your_audience">Consider your audience</h4> - -<p>Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.</p> - -<h4 id="Provide_a_useful_summary">Provide a useful summary</h4> - -<p>Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about. In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.</p> - -<h5 id="Example_Too_short!">Example: Too short!</h5> - -<p>This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.</p> - -<div class="example-bad"> -<p><strong><code>CanvasRenderingContext2D.strokeText()</code></strong> draws a string.</p> -</div> - -<h5 id="Example_Too_long!">Example: Too long!</h5> - -<p>Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties. Instead, the summary should focus on the <code>strokeText()</code> method, and should refer to the appropriate guide where the other details are offered.</p> - -<div class="example-bad"> -<p>When called, the Canvas 2D API method <strong><code>CanvasRenderingContext2D.strokeText()</code></strong> strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.</p> - -<p>The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.</p> - -<p>The placement of the text relative to the specified coordinates are determined by the context's <code>textAlign</code>, <code>textBaseline</code>, and <code>direction</code> properties. <code>textAlign</code> controls the placement of the string relative to the X coordinate specified; if the value is <code>"center"</code>, then the string is drawn starting at <code>x - (stringWidth / 2)</code>, placing the specified X-coordinate in the middle of the string. If the value is <code>"left"</code>, the string is drawn starting at the specified value of <code>x</code>. And if <code>textAlign</code> is <code>"right"</code>, the text is drawn such that it ends at the specified X-coordinate.</p> - -<p>(etc etc etc...)</p> - -<p>You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.</p> - -<p>You can call the <strong><code>fillText()</code></strong> method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.</p> -</div> - -<h5 id="Example_Much_better!">Example: Much better!</h5> - -<p>Here we see a much better overview for the <code>strokeText()</code> method.</p> - -<div class="example-good"> -<p>The {{domxref("CanvasRenderingContext2D")}} method <code><strong>strokeText()</strong></code>, part of the <a href="/uk/docs/Web/API/Canvas_API">Canvas 2D API</a>, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.</p> - -<p>For more details and further examples, see {{SectionOnPage("/uk/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, <a href="/uk/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p> -</div> - -<h4 id="Include_all_relevant_examples">Include all relevant examples</h4> - -<p>More pages should have examples than should not have them. The majority of pages most likely deserve multiple examples, in fact. It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.</p> - -<p>Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.</p> - -<p>In addition, each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually. The text following each piece of code should explain anything relevant, using an appropriate level of detail. If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there. If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.</p> - -<p>When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p> - -<h4 id="Overly-short_articles_are_hard_to_find">Overly-short articles are hard to find</h4> - -<p>If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250-300 words. Don't artificially inflate a page that simply can't reasonably be made longer than that, but treat this guideline as a target to shoot for as a minimum when possible.</p> - -<h3 id="Sections_paragraphs_and_newlines">Sections, paragraphs, and newlines</h3> - -<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.</p> - -<p>The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.</p> - -<p>Don't create single subsections — you don't subdivide a topic into one. It's either two subheadings or more or none at all.</p> - -<p>Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.</p> - -<h3 id="Lists">Lists</h3> - -<p>Lists should be written in a similar format across all contributions. Correct procedures should include suitable punctuation and sentence structure regardless of the list format. However dependent on the type of list you are writing, you must adjust your format accordingly. Refer to the documentation below to understand the differences of each.</p> - -<h4 id="Bulleted_Lists">Bulleted Lists</h4> - -<p>Bulleted lists should be used for grouping purposes to create concise but effective pieces of information. Each new piece of information must start with a '•' to signify a new piece. Bulleted lists must follow standard punctuation usage, pay attention to the use of full stops; they must be included at the end of each sentence just like standard writing practice.</p> - -<p>An example of a correctly structured bulleted list:</p> - -<div class="example-good"> -<p><em>In this example we should include:</em></p> - -<ul> - <li><em>A condition, with a brief explanation.</em></li> - <li><em>A similar condition, with a brief explanation.</em></li> - <li> - <p><em>Yet another condition, some further explanation.</em></p> - </li> -</ul> -</div> - -<p>Note how the format remains the same from bullet to bullet. Create a bullet point, state a condition that has relevence to your indented topic and add some pausing punctuation in order to follow up the condition with a concise explanation.</p> - -<h4 id="Numbered_Lists">Numbered Lists</h4> - -<p>Instruction lists must follow suitable numbering and format. It is important to include these attributes as with instructions, being clear is a key priority. Create the list in a similar style to a bulleted list, however numbered or instruction lists can be extensive where necessary, meaning correct punctuation is vital as you will be forming complex sentences.</p> - -<p>An example of a correctly structured numbered list:</p> - -<blockquote> -<p><em>In order for you to structure a correct numbered list you must:</em></p> - -<p><em>1. Begin with creating an introductory heading to lead into the instructions. This way we can provide the user with context before beginning the instructions.</em></p> - -<p><em>2. Start creating your instructions, listing your instructions with numbers. This is a standard format of a numbered list that is easily recognizable by the user. Your instructions may be quite extensive, so it is important to write effectively and use correct punctuation where necessary.</em></p> - -<p><em>3. After you have finished your instructions, close off the numbered list with a brief explanation of the outcome upon completion.</em></p> - -<p><em>This is an example of writing your closing explanation. We have created a short numbered list which provides instructive steps to produce a numbered list with the correct formatting. </em></p> -</blockquote> - -<p>Numbered lists are almost exclusive for instructive purposes, so before writing consider your approach based on the context of the information you are trying to relay.</p> - -<h3 id="Text_formatting_and_styles">Text formatting and styles</h3> - -<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> - -<div class="note">The "Note" style is used to call out important notes, like this one.</div> - -<div class="warning">Similarly, the "Warning" style creates warning boxes like this.</div> - -<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> - -<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> - -<div class="note"> -<p><strong>Note</strong>: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our <a href="/uk/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a>.</p> -</div> - -<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> - -<p>Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p> - -<pre class="brush: js notranslate">if (condition) { - /* handle the condition */ -} else { - /* handle the "else" case */ -} -</pre> - -<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> - -<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION - || class.YET_ANOTHER_CONDITION ) { - /* something */ -} - -var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] - .createInstance(Components.interfaces.nsIToolkitProfileService); -</pre> - -<h4 id="Inline_code_formatting">Inline code formatting</h4> - -<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p> - -<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. The parentheses help differentiate methods from other code terms.</p> - -<h4 id="Syntax_highlighting">Syntax highlighting</h4> - -<p><img alt="Screenshot of the 'Syntax Highlighter' menu." src="https://mdn.mozillademos.org/files/12682/Language%20list.png" style="border-style: solid; border-width: 1px; float: right; margin: 2px 4px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.</p> - -<p>The following example shows text with JavaScript formatting:</p> - -<div class="line number2 index1 alt1"> -<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) - document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> -</div> - -<p>If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:</p> - -<pre class="brush: plain notranslate">x = 42;</pre> - -<h4 id="Syntax_definitions">Syntax definitions</h4> - -<p>If you want to insert a syntax definition, you can choose the "Syntax Box" option from the "Styles" drop-down menu in the editor toolbar. This will give the syntax definition a special formatting distinguishing it from normal code.</p> - -<h4 id="Blocks_not_referring_to_code">Blocks not referring to code</h4> - -<p>There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without class. Those cases include things like tree structures:</p> - -<pre class="notranslate">root/ - - folder1/ - file1 - - folder2/ - file2 - file3 -</pre> - -<p>To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.</p> - -<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> - -<p>There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.</p> - -<dl> - <dt>Element names</dt> - <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> - <dt>Attribute names</dt> - <dd>Use <strong>bold face</strong>.</dd> - <dt>Attribute definitions</dt> - <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> - <dt>Attribute values</dt> - <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. For example: When the <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> - <dt>Labeling attributes</dt> - <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd> -</dl> - -<h3 id="Latin_abbreviations">Latin abbreviations</h3> - -<h4 id="In_notes_and_parentheses">In notes and parentheses</h4> - -<ul> - <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and notes. Use periods in these abbreviations, followed by a comma or other appropriate punctuation. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g., Firefox) can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="In_running_text">In running text</h4> - -<ul> - <li>In regular text (i.e., text outside of notes or parentheses), use the English equivalent of the abbreviation. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Abbrev</th> - <th>Latin</th> - <th>English</th> - </tr> - <tr> - <td>cf.</td> - <td><em>confer</em></td> - <td>compare</td> - </tr> - <tr> - <td>e.g.</td> - <td><em>exempli gratia</em></td> - <td>for example</td> - </tr> - <tr> - <td>et al.</td> - <td><em>et alii</em></td> - <td>and others</td> - </tr> - <tr> - <td>etc.</td> - <td><em>et cetera</em></td> - <td>and so forth, and so on</td> - </tr> - <tr> - <td>i.e.</td> - <td><em>id est</em></td> - <td>that is, in other words</td> - </tr> - <tr> - <td>N.B.</td> - <td><em>nota bene</em></td> - <td>note well</td> - </tr> - <tr> - <td>P.S.</td> - <td><em>post scriptum</em></td> - <td>postscript</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p>Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> -</div> - -<h3 id="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> - -<h4 id="Capitalization_and_periods">Capitalization and periods</h4> - -<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: XUL</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> -</ul> - -<h4 id="Expansion">Expansion</h4> - -<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/uk/docs/Glossary">glossary</a> entry describing the technology.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> -</ul> - -<h4 id="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> - -<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> -</ul> - -<h4 id="Versus_vs._and_v.">"Versus", "vs.", and "v."</h4> - -<p>The contraction "vs." is preferred.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: this vs. that</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: this v. that</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: this versus that</li> -</ul> - -<h3 id="Capitalization">Capitalization</h3> - -<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.</p> - -<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p> - -<h3 id="Contractions">Contractions</h3> - -<p>Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't") if you prefer.</p> - -<h3 id="Pluralization">Pluralization</h3> - -<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> -</ul> - -<h3 id="Hyphenation">Hyphenation</h3> - -<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> - -<ul> - <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> - <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> -</ul> - -<h3 id="Gender-neutral_language">Gender-neutral language</h3> - -<p>It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't appropriate.<br> - <br> - Let's take the following example:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.</p> -</blockquote> - -<p>Both versions are gender-specific. To fix this, use gender-neutral pronouns:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.</p> -</blockquote> - -<div class="note"> -<p>MDN allows the use of this very common syntax (which is controversial among usage authorities), to make up for the lack of a neutral gender in English. The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "<a href="https://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> -</div> - -<p>You can use both genders:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> -</blockquote> - -<p>making the users plural:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> -</blockquote> - -<p>The best solution, of course, is to rewrite and eliminate the pronouns:</p> - -<blockquote> -<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> -</blockquote> - -<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This solution can make translation easier for both readers and localizers.</p> - -<h3 id="Numbers_and_numerals">Numbers and numerals</h3> - -<h4 id="Dates">Dates</h4> - -<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> -</ul> - -<p>Alternately, you can use the YYYY/MM/DD format.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> -</ul> - -<h4 id="Decades">Decades</h4> - -<p>For decades, use the format "1990s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> -</ul> - -<h4 id="Plurals_of_numerals">Plurals of numerals</h4> - -<p>For plurals of numerals add "s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 486s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> -</ul> - -<h4 id="Commas">Commas</h4> - -<p>In running text, use commas only in five-digit and larger numbers.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> -</ul> - -<h3 id="Punctuation">Punctuation</h3> - -<h4 id="Serial_comma">Serial comma</h4> - -<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> -</ul> - -<div class="note"> -<p>This is in contrast to the <a href="https://www.mozilla.org/en-US/styleguide/" title="https://mozilla-l10n.github.io/styleguides/uk/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> -</div> - -<h3 id="Spelling">Spelling</h3> - -<p>For words with variant spellings, always use their American English spelling. In general, use the first entry at <a href="http://www.dictionary.com/">Dictionary.com</a>, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English; for example, if you <a href="http://dictionary.reference.com/browse/honour">look up "honour"</a>, you find the phrase "Chiefly British" followed by a link to the American standard form, "<a href="http://dictionary.reference.com/browse/honor">honor</a>". Do not use variant spellings.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> -</ul> - -<h3 id="Terminology">Terminology</h3> - -<dl> -</dl> - -<h4 id="HTML_elements">HTML elements</h4> - -<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> -</ul> - -<h4 id="Parameters_vs._arguments">Parameters vs. arguments</h4> - -<p>The preferred term on MDN is <strong>parameters</strong>. Please avoid the term "arguments" for consistency if at all possible.</p> - -<h4 id="User_interface_actions">User interface actions</h4> - -<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> -</ul> - -<h3 id="Voice">Voice</h3> - -<p>While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> - -<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> - -<h3 id="Links">Links</h3> - -<p>Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to <a href="/uk/docs/MDN/Contribute/Editor/Links">creating and editing links on MDN</a> in our editor guide.</p> - -<p>We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content. You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).</p> - -<p>There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing <kbd>Ctrl</kbd>+<kbd>K</kbd> (<kbd>Cmd</kbd>-<kbd>K</kbd> on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.</p> - -<p>When deciding what text to use as a link, there are a few guidelines you can follow:</p> - -<ul> - <li>Whenever a macro exists which will create the link you need, and you are able to do so, please do. <a href="/uk/docs/MDN/Contribute/Editor/Links#Using_link_macros">Using macros to create links</a> will not only help you get it right, but will allow future improvements to MDN to automatically be applied to your link.</li> - <li>For an API name, use the entire string of the API term as written in your content. The easiest way to do this is to <a href="/uk/docs/MDN/Contribute/Editor/Links#Linking_to_documentation_for_APIs">use the appropriate macro</a> to construct a properly-formatted link for you.</li> - <li>For a term for which you're linking to a page defining or discussing that term, use the name of the term and no additional text as the link's text. For example: - <ul> - <li><span class="correct"><strong>Correct</strong></span>: You can use <a href="/uk/docs/Web/JavaScript">JavaScript</a> code to create dynamic applications on the Web.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: You can use <a href="/uk/docs/Web/JavaScript">JavaScript code</a> to create dynamic applications on the Web.</li> - </ul> - </li> - <li>Otherwise, when adding a useful link to prose, try to choose an action and object phrase, such as: - <ul> - <li><span class="correct"><strong>Correct</strong></span>: If you'd like to <a href="/uk/docs/Mozilla/Developer_guide">contribute to the Firefox project</a>, your first step is to <a href="/uk/docs/Mozilla/Developer_guide/Build_Instructions">download and build Firefox</a>.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: <a href="/uk/docs/Mozilla/Developer_guide">If you'd like to contribute to the Firefox project</a>, your first step is to <a href="/uk/docs/Mozilla/Developer_guide/Build_Instructions">download and build</a> Firefox.</li> - </ul> - </li> -</ul> - -<h4 id="URL_schemes">URL schemes</h4> - -<p>For security reasons, you should only create links that use the following schemes:</p> - -<ul> - <li><code>http://</code></li> - <li><code>https://</code></li> - <li><code>ftp://</code></li> - <li><code>mailto:</code></li> -</ul> - -<p>Others may or may not work, but are not supported and will probably be removed by editorial staff.</p> - -<div class="note"> -<p>In particular, be sure not to use the <code>about:</code> or <code>chrome://</code> schemes, as they will not work. Similarly, the <code>javascript:</code> scheme is blocked by most modern browsers, as is <code>jar:</code>.</p> -</div> - -<h3 id="Page_tags">Page tags</h3> - -<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/uk/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> - -<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> - -<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> - -<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> - -<p>To remove a tag, just click the little "X" icon in the tag.</p> - -<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> - -<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> - -<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> - -<p>Use the following tags for pages that are not current:</p> - -<ul> - <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> - <li><em>Obsolete</em>: Use for content that is technically superseded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> - <li><em>Archive</em>: Use for content that is technically superseded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/uk/docs/Archive">Archive</a> section.</li> -</ul> - -<h3 id="SEO_summary">SEO summary</h3> - -<p>The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p> - -<p>By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the <a href="/uk/docs/MDN/Contribute/Editor/Basics">"SEO summary" style in the WYSIWYG editor</a>.</p> - -<h3 id="Landing_pages">Landing pages</h3> - -<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/uk/docs/Web/CSS" title="CSS">CSS</a> or <a href="/uk/docs/Web/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> - -<ol> - <li>A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.</li> - <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> - <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> -</ol> - -<h4 id="Creating_a_page_link_list">Creating a page link list</h4> - -<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> - -<pre class="brush: html notranslate"><div class="row topicpage-table"> - <div class="section"> - ... left column contents ... - </div> - <div class="section"> - ... right column contents ... - </div> -</div></pre> - -<p>The left column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> - -<p>The right column should contain one or more of the following sections, in order:</p> - -<dl> - <dt>Getting help from the community</dt> - <dd>This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".</dd> - <dt>Tools</dt> - <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> - <dt>Related topics</dt> - <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> -</dl> - -<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> - -<h2 id="Using_inserting_images">Using, inserting images</h2> - -<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> - -<ol> - <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> - <li>Create an image in the WYSIWYG editor</li> - <li>In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image</li> - <li>Press OK.</li> -</ol> - -<h2 id="Other_references">Other references</h2> - -<h3 id="Preferred_style_guides">Preferred style guides</h3> - -<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/styleguide/introduction">Economist style guide</a> or, failing that, the <a href="https://www.amazon.com/Chicago-Manual-Style-16th/dp/0226104206">Chicago Manual of Style</a>.</p> - -<h3 id="Preferred_dictionary">Preferred dictionary</h3> - -<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>colour</em>).</p> - -<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/uk/docs/MDN/Community">MDC mailing list</a> or <a href="/uk/docs/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> - -<h3 id="MDN-specific">MDN-specific</h3> - -<ul> - <li><a href="/uk/docs/MDN/Contribute/Structures/Шаблони/Загальновживані_шаблони">Commonly-used macros</a> on MDN, with explanations.</li> -</ul> - -<h3 id="Лексика_граматика_й_правопис">Лексика, граматика й правопис</h3> - -<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> - -<ul> - <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> - <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> - <li><a href="https://brians.wsu.edu/common-errors-in-english-usage/">Common Errors in English</a></li> - <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> - <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> - <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> - <li><a href="http://english.stackexchange.com/">English Language and Usage StackExchange</a>: Question and answer site for English language usage.</li> -</ul> diff --git a/files/uk/mdn/index.html b/files/uk/mdn/index.html deleted file mode 100644 index 0381c1bf31..0000000000 --- a/files/uk/mdn/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Проект MDN -slug: MDN -tags: - - Landing - - MDN Meta -translation_of: MDN ---- -<div>{{MDNSidebar}}</div> - -<p><strong>Веб-документація MDN</strong> — це вікі, в якій ми описуємо відкритий Інтернет, технології Mozilla, Firefox OS та інші теми, присвячені веб-розробці. Будь-хто може взяти участь у створенні та редагуванні вмісту вікі. Геть не обов'язково бути програмістом або мати досконалі знання про описувані технології; є безліч різних завдань, від простих (коректура та виправлення помилок) до складних (написання документації з API).</p> - -<p class="summary">Мета проекту веб-документації MDN — надати <em>розробникам інформацію</em> необхідну для <em>полегшення</em> створення проектів на <em>веб-платформі</em>. Ми запрошуємо вас допомогти нам!</p> - -<p>Нам потрібна ваша допомога! Це легко. Вам не потрібно просити дозволу чи боятися зробити помилку. Проте, ознайомтеся зі <a href="/uk/docs/MDN/Community">спільнотою MDN</a>; ми тут, щоб допомогти вам! Наведена нижче інформація допоможе вам розпочати.</p> - -<ul class="card-grid"> - <li><span><a href="/uk/docs/MDN/з_чого_почати">Швидкий старт для новачків</a></span> - - <p>Вперше натрапили на MDN і бажаєте дізнатися, як зробити її ще краще? Почніть звідси!</p> - </li> - <li><span><a href="/uk/docs/MDN/Contribute">Я впевнений користувач</a></span> - <p>Доступ до нашого повного й детального посібника для учасників спільноти.</p> - </li> - <li><span><a class="new" href="/uk/docs/MDN/Promote" rel="nofollow">Розповісти іншим</a></span> - <p>Якщо вам подобається MDN, допоможіть нам популяризувати його! Отримайте матеріали, інструменти та посібники для просування MDN.</p> - </li> -</ul> diff --git a/files/uk/mdn/structures/index.html b/files/uk/mdn/structures/index.html deleted file mode 100644 index 021aba74ea..0000000000 --- a/files/uk/mdn/structures/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Документові структури -slug: MDN/Structures -tags: - - Landing - - MDN Meta - - Structures -translation_of: MDN/Structures ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p>На сторінках MDN можна знайти чимало різних повторюваних структур, що призначені для послідовного й упорядкованого викладення інформації у статтях MDN. Тут наведено статті, що описують ці структури, тож ви, як автор MDN, можете їх впізнавати, вживати й змінювати відповідним чином для документів, які ви створюєте, редагуєте чи перекладаєте.</p> - -<p>{{LandingPageListSubPages()}}</p> diff --git a/files/uk/mdn/structures/macros/commonly-used_macros/index.html b/files/uk/mdn/structures/macros/commonly-used_macros/index.html deleted file mode 100644 index 1a9ebb10c0..0000000000 --- a/files/uk/mdn/structures/macros/commonly-used_macros/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Загальновживані шаблони -slug: MDN/Structures/Macros/Commonly-used_macros -tags: - - Structures - - Довідка - - Макрос -translation_of: MDN/Structures/Macros/Commonly-used_macros -original_slug: MDN/Structures/Шаблони/Загальновживані_шаблони ---- -<div>{{MDNSidebar}}</div> - -<div></div> - -<p><span class="seoSummary">На цій сторінці подано багато макросів загального призначення, які створені для використання на платформі MDN. Інформацію про використання цих макросів дивіться в розділі<a href="/en-US/docs/MDN/Contribute/Content/Macros"> Використання макросів</a>, а також <a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_link_macros">Використання посилань макросів</a>.</span> Подивіться <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Other">Інші макроси</a> для інформації про макроси, які рідко використовуються, використовуються тільки в особливих контекстах або важаються застарілими. Також є <a href="https://wiki.developer.mozilla.org/en-US/dashboards/macros">повний список всіх макросів для MDN</a>. </p> - -<p>Див. також <a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS посібник стилів</a> для стилів, які можуть бути доступні для вашого використання.</p> - -<h2 id="Посилання">Посилання</h2> - -<h3 id="Створення_єдиного_гіперпосилання">Створення єдиного гіперпосилання</h3> - -<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">Зазвичай немає необхідності використовувати макроси для створення посилань довільної форми. Для створення посилань використовуйте кнопку <strong>Link </strong>(Вставити / Редагувати посилання)<strong> </strong>в інтерфейсі редактора.</p> - -<ul> - <li>{{TemplateLink("Glossary")}} макрос створює посилання на запис зазначеного об'єкта в MDN <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary">glossary</a>. Даний макрос приймає один обов'язковий і два додаткових параметри: - - <ol> - <li>Ім'я параметра (наприклад, "HTML").</li> - <li>Текст для відображення в замість назви параметру (використовується рідко). {{optional_inline}}</li> - <li>Коли цей параметр вказаний і є ненульовим, то традиційний стиль, зазвичай вживаний до посилань на глосарій, не застосовується. {{optional_inline}}</li> - </ol> - - <ul> - <li><code>\{{Glossary("HTML")}}</code> вихід {{Glossary("HTML")}}</li> - <li><code>\{{Glossary("CSS", "Cascading Style Sheets")}}</code> вихід {{Glossary("CSS", "Cascading Style Sheets")}}</li> - <li><code>\{{Glossary("HTML", "", 1)}}</code> вихід {{Glossary("HTML", "", 1)}}</li> - </ul> - </li> - <li>{{TemplateLink("anch")}} - створює посилання на внутрішній розділ сторінки: - <ul> - <li><code>\{{anch("Посилання на сторінки в довідках")}}</code>; </li> - </ul> - </li> -</ul> - -<h3 id="Посилання_на_сторінки_в_довіднику">Посилання на сторінки в довіднику</h3> - -<p>Існують різноманітні макроси для з'єднання зі сторінками в певних довідкових областях MDN.</p> - -<ul> - <li>{{TemplateLink("cssxref")}} посилання на сторінку у <a href="/en-US/docs/CSS_Reference" title="en-US/docs/CSS_Reference">CSS Довіднику</a>.<br> - Наприклад: <code>\{{cssxref("cursor")}}</code>, приведе в: {{ cssxref("cursor") }}.</li> - <li>{{TemplateLink("domxref")}} посилання на сторінки в документації DOM; якщо ви додасте круглі дужки в наприкінці, шаблон буде знати, що посилання виглядає як ім'я функції. наприклад, <span class="plain"><span class="nowiki">\{{domxref("document.getElementsByName()")}}</span></span> приведе в: {{ domxref("document.getElementsByName()") }} тим часом як <code>\{\{domxref("Node")\}\}</code> приведе в: {{ domxref("Node") }}.</li> - <li>{{TemplateLink("event")}} посилання на сторінки в довіднику про події DOM, наприклад: \{{event("change")}} приведе в: {{event("change")}}.</li> - <li>{{TemplateLink("HTMLElement")}} посилання на елемент HTML в довіднику HTML.</li> - <li>{{TemplateLink("htmlattrxref")}} посилання на HTML атрибут, або глобальне опис атрибута, якщо Ви вказуєте тільки ім'я атрибута або атрибут пов'язаний з певним елементом, якщо Ви вказуєте ім'я атрибута і ім'я елемента. Наприклад, <code>\{\{htmlattrxref("lang")\}\} </code>створить це посилання: {{htmlattrxref("lang")}}.<code> </code> <code>\{\{htmlattrxref("type","input")\}\}</code> створить це посилання: {{htmlattrxref("type","input")}}.</li> - <li>{{TemplateLink("jsxref")}} посилання на сторінку в <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/Web/JavaScript/Reference">JavaScript довыднику</a>.</li> - <li>{{TemplateLink("SVGAttr")}} посилання на певний атрибут SVG. Наприклад, <code>\{\{SVGAttr("d")\}\}</code> створює цей зв'язок: {{SVGAttr("d")}}.</li> - <li>{{TemplateLink("SVGElement")}} посилання на елемент SVG в довіднику SVG.</li> - <li>{{TemplateLink("HTTPHeader")}} посилання на <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a>.</li> - <li>{{TemplateLink("HTTPMethod")}} посилання на <a href="/en-US/docs/Web/HTTP/Methods">HTTP метод запиту</a>.</li> - <li>{{TemplateLink("HTTPStatus")}} посилання на <a href="/en-US/docs/Web/HTTP/Status">HTTP код статусу відповіді</a>.</li> -</ul> - -<h3 id="Посилання_на_помилки_і_IRC">Посилання на помилки і IRC</h3> - -<ul> - <li>Помилки - <ul> - <li>{{TemplateLink("bug")}} дозволяє легко посилатися на помилку на bugzilla.mozilla.org, використовуючи цей синтаксис:<code>\{\{Bug(123456)\}\}</code>. Це дає Вам: {{ Bug(123456) }}.</li> - <li>{{TemplateLink("WebkitBug")}} вставляє посилання на помилку в базу даних помилок WebKit. Наприклад: <code>\{\{WebkitBug(31277)\}\}</code> додасть {{ WebkitBug(31277) }}.</li> - </ul> - </li> - <li>{{TemplateLink("IRCLink")}} вставляє посилання на вказаний канал IRC, в комплекті з підказкою, яка говорить що потрібен клієнт IRC.</li> -</ul> - -<h3 id="Навігаційні_інструменти_для_багатосторінкових_довідників">Навігаційні інструменти для багатосторінкових довідників</h3> - -<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, або {{TemplateLink("PreviousNext")}} забезпечує управління навігацією для елементів, що входять в послідовність. Для односпрямованих шаблонів єдиним необхідним параметром є розташування wiki попередньої і наступної статті в послідовності. Для {{TemplateLink("PreviousNext")}}, два параметра, які потрібні, - це розташування відповідних статей в wiki-каталозі. Перший параметр відноситься до попередньої статті, а другий - до наступної.</p> - -<h2 id="Зразки_коду">Зразки коду</h2> - -<h3 id="Зразки_наживо">Зразки наживо</h3> - -<ul> - <li>{{TemplateLink("EmbedLiveSample")}} дозволяє вбудовувати вивід прикладу коду на сторінку, як це описано в <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Зразки наживо</a>.</li> - <li>{{TemplateLink("LiveSampleLink")}}створює посилання на сторінку, яка містить висновок зразка коду на сторінку, як описано в розділі <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Зразки наживо</a>.</li> -</ul> - -<h3 id="Файли_з_прикріпленими_прикладами">Файли з прикріпленими прикладами</h3> - -<ul> - <li>{{TemplateLink("Embed_text")}} шаблон дозволяє вставити приєднаний текстовий файл в тіло статті. Це корисно, якщо ви хочете мати фрагменти коду, які можна завантажити, але які також відображаються у вмісті статті. Ви можете додатково вказати мову підсвічування синтаксису; якщо ви його не вкажете, текст буде вставлений в неформатованому вигляді. Перший параметр - ім'я файлу який прикріплений; другий, якщо він передбачений, - мова для застосування синтаксичного маркера, такий як "javascript", "svg" або "cpp".</li> - <li>{{TemplateLink("EmbedSVG")}} вбудовує прикріплений XML-файл у вигляді зображення SVG на відповідному місці на сторінці. Вкажіть ім'я прикріпленого SVG-файлу. Ви можете використовувати це в комплексі з {{TemplateLink("Embed_text")}} щоб показати джерело, а потім відобразити вивід того ж файлу.</li> -</ul> - -<h2 id="Створення_бічної_панелі">Створення бічної панелі</h2> - -<p>Існують шаблони практично для кожної великої бібліотеки сторінок. Зазвичай вони посилаються на головну сторінку довідника / керівництва / підручника (це часто необхідно, тому що наші хлібні крихти іноді не можуть цього зробити) і поміщають статтю в відповідну категорію.</p> - -<ul> - <li>{{TemplateLink("CSSRef")}} створює бічну панель для довідкових сторінок CSS.</li> - <li>{{TemplateLink("HTMLRef")}} створює бічну панель для довідкових сторінок HTML.</li> - <li>{{TemplateLink("APIRef")}} створює бічну панель для довідкових сторінок Web API.</li> -</ul> - -<h2 id="Загальне_форматування">Загальне форматування</h2> - -<h3 id="Вбудовані_індикатори_для_документації_API">Вбудовані індикатори для документації API</h3> - -<p>{{TemplateLink("optional_inline")}} та {{TemplateLink("ReadOnlyInline")}} використовуються в документації API, зазвичай при описі списку властивостей об'єкта або параметрів функції.</p> - -<p>Використання: <code>\{{optional_inline()}}</code> або <code>\{{ReadOnlyInline()}}</code>. Наприклад: </p> - -<dl> - <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt> - <dd>Вказує, якщо <code>true</code>, що об'єкт є призначеним для користувача.</dd> - <dt>parameterX {{ optional_inline() }}</dt> - <dd>Бла-бла-бла...</dd> -</dl> - -<h2 id="Позначки_про_статус_та_сумісність">Позначки про статус та сумісність</h2> - -<h3 id="Вбудовані_індикатори_без_додаткових_параметрів">Вбудовані індикатори без додаткових параметрів</h3> - -<h4 id="Нетипові">Нетипові</h4> - -<p>{{TemplateLink("non-standard_inline")}} вставляє в рядок мітку, яка вказує на те, що API ні стандартизований і не перебуває на стандартній платформі.</p> - -<h5 id="Синтаксис"><strong>Синтаксис</strong></h5> - -<p><code>\{{non-standard_inline}}</code></p> - -<h5 id="Приклади">Приклади</h5> - -<ul> - <li>Іконка: {{non-standard_inline}}</li> -</ul> - -<h4 id="Експериментальний">Експериментальний</h4> - -<p>{{TemplateLink("experimental_inline")}} вставляє позначку в рядку, що вказує на те, що API застосовується недостатньо широко і може змінитися в майбутньому.</p> - -<h5 id="Синтаксис_2"><strong>Синтаксис</strong></h5> - -<p><code>\{{Experimental_Inline}}</code></p> - -<h5 id="Приклади_2">Приклади</h5> - -<ul> - <li>Іконка: {{Experimental_Inline}}</li> -</ul> - -<h3 id="Вбудовані_індикатори_що_підтримують_вказівку_технології">Вбудовані індикатори, що підтримують вказівку технології</h3> - -<p>У таких макросах параметром (при зазначенні) повинен бути будь-який з рядків "html", "js", "css" або "gecko" з подальшим номером версії.</p> - -<h4 id="Вилучені_елементи">Вилучені елементи</h4> - -<p>{{TemplateLink("deprecated_inline")}} поміщає в рядок маркування вилучений, щоб запобігти використанню офіційно застарілого API. <strong>Зауваження</strong><strong>:</strong> "Deprecated" означає, що елемент більше не повинен використовуватися, але все одно повинен функціонувати. Якщо ви маєте на увазі, що він більше не працює, використовуйте термін "obsolete."</p> - -<p>Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).</p> - -<h5 id="Синтаксис_3"><strong>Синтаксис</strong></h5> - -<p><code>\{{deprecated_inline}}</code> or<code> \{{deprecated_inline("gecko5")}}</code></p> - -<h5 id="Приклади_3">Приклади</h5> - -<ul> - <li>Іконка: {{deprecated_inline}}</li> - <li>Значок: {{deprecated_inline("gecko5")}}</li> -</ul> - -<h4 id="Застарілі_елементи">Застарілі елементи</h4> - -<p>{{TemplateLink("obsolete_inline")}} поміщає в рядок маркування застарілий, щоб запобігти використанню, наприклад, функції, методу чи властивості, які офіційно застаріли.</p> - -<p>Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).</p> - -<h5 id="Синтаксис_4"><strong>Синтаксис</strong></h5> - -<p><code>\{{obsolete_inline}}</code> or<code> \{{obsolete_inline("js1.8.5")}}</code></p> - -<h5 id="Приклади_4">Приклади</h5> - -<ul> - <li>Іконка: {{obsolete_inline}}</li> - <li>Значок: {{obsolete_inline("js1.8.5")}}</li> -</ul> - -<h3 id="Шаблонні_значки">Шаблонні значки</h3> - -<p>Ці макроси в переважно застосовуються на <a href="/en-US/docs/WebAPI">WebAPI</a> сторінках. Перегляньте {{anch("Creating new badges")}} для інформації про створення нового значка.</p> - -<h3 id="Індикатори_заголовків_сторінок_або_розділів">Індикатори заголовків сторінок або розділів</h3> - -<p>Ці шаблони мають ту ж семантику, що і їх вбудовані аналоги, описані вище. Шаблони повинні бути розміщені безпосередньо під заголовком головної сторінки або під навігатором по хлібним крихтам, якщо такий доступен, на сторінці лінків. Вони також можуть бути використані для розмітки розділів на сторінці.</p> - -<ul> - <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li> - <li>{{TemplateLink("SeeCompatTable")}} слід використовувати на сторінках, що містять розділ "Сумісність з браузером". Приклад: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li> - <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li> - <li>{{TemplateLink("deprecated_header")}} з параметром:<code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).</li> - <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li> - <li>{{TemplateLink("obsolete_header")}} з параметром: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).</li> -</ul> - -<h3 id="Зазначення_того_що_функція_доступна_у_web_workers">Зазначення того, що функція доступна у web workers</h3> - -<p>The {{TemplateLink("AvailableInWorkers")}} макрос вставляє відповідне поле для приміток, що вказує на те, що функція є доступною у <a href="/en-US/docs/Web/API/Web_Workers_API">Web worker</a> контекст.</p> - -<ol> -</ol> - -<ol> -</ol> diff --git a/files/uk/mdn/structures/macros/index.html b/files/uk/mdn/structures/macros/index.html deleted file mode 100644 index 73ae20c1c9..0000000000 --- a/files/uk/mdn/structures/macros/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Шаблони -slug: MDN/Structures/Macros -tags: - - Kuma - - KumaScript - - MDN Meta - - Structures - - Путівник -translation_of: MDN/Structures/Macros -original_slug: MDN/Structures/Шаблони ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">Платформа <a href="/uk/docs/MDN/Kuma">Kuma</a>, що на ній працює MDN, має потужний механізм шаблонів (макросів), <a href="/uk/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a>, який уможливлює автоматизацію чималої кількості речей. Ця сторінка надає інформацію про вжиток шаблонів MDN всередині статей.</span></p> - -<p><a href="/uk/docs/MDN/Contribute/Tools/KumaScript">Путівник з KumaScript</a> пропонує поглиблені знання з ужитку шаблонів на MDN, тож ця стаття є радше оглядовою.</p> - -<h2 id="Як_працюють_шаблони">Як працюють шаблони</h2> - -<p>Шаблони MDN написані мовою <a href="/uk/docs/Web/JavaScript">JavaScript</a> та виконуються у серверному середовищі <a href="https://nodejs.org/uk/">Node.js</a>. Задля уможливлення взаємодії шаблонів із вікі-платформою та її вмістом ми створили низку бібліотек, що надають відповідні можливості та служби. Як хочете дізнатись більше, зверніться до <a href="/uk/docs/MDN/Contribute/Tools/KumaScript">Путівника з KumaScript</a>.</p> - -<h2 id="Вжиток_шаблонів">Вжиток шаблонів</h2> - -<p>Власне для того, аби використати шаблон, ви просто оточуєте його ім'я разом із параметрами в круглих дужках (якщо є) парою подвійних фігурних дужок:</p> - -<pre class="notranslate">\{{macroname(перелік-параметрів)}}</pre> - -<p>Кілька зауважень щодо викликів шаблонів:</p> - -<ul> - <li>Імена шаблонів є регістронезалежними, тож <strong>Glossary</strong> й <strong>glossary</strong> не розрізняються;</li> - <li>Параметри відокремлюються комами;</li> - <li>За відсутності параметрів круглі дужки можна не вживати, тож <code>\{{macroname()}}</code> й <code>\{{macroname}}</code> є тотожними;</li> - <li>Числові параметри можна подавати в лапках чи ні, як подобається. Утім, якщо вам треба передати, наприклад, номер версії, що містить кілька розділових крапок, лапки обов'язкові;</li> - <li>Якщо ви отримали помилку, спершу перегляньте уважно свій код. Як знайти причину все ж не вдається, дивіться статтю <a href="/uk/docs/MDN/Contribute/Tools/KumaScript/Усунення_помилок_KumaScript">Усунення помилок KumaScript</a>.</li> -</ul> - -<p>Для шаблонів діє окремий кеш: для кожної множини вхідних даних (вказаних параметрів та значень з середовища, як-от адреса сторінки, де ужито шаблон) результат одноразово обчислюється та зберігається для подальшого використання. Отже шаблон насправді викликається лише тоді, коли змінюються вхідні дані.</p> - -<div class="note"> -<p><strong>Заувага</strong>: Ви можете здійснити примусове обчислення всіх шаблонів на сторінці, перезавантаживши сторінку у веб-переглядачі зі скиданням кешів (зазвичай <kbd>Ctrl</kbd> + <kbd>F5</kbd> або <kbd>Shift</kbd> + <kbd>F5</kbd>).</p> -</div> - -<p>Шаблони можуть бути як простими (наприклад, вставка великого шматка тексту чи залучення вмісту з іншої частини MDN), так і вельми складними (як-от пошук по різних частинах сайту й побудова цілого покажчика за знайденим вмістом із належним оформленням та додаванням посилань).</p> - -<p>Про найпоширеніші шаблони ви можете довідатись на сторінці <a href="/uk/docs/MDN/Contribute/Structures/Шаблони/Загальновживані_шаблони">Загальновживані шаблони</a>. Також є і <a href="/uk/docs/templates">повний їх перелік</a>. Багато шаблонів має вбудовану документацію (коментарі у коді на початку файлу).</p> - -<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/uk/mdn/tools/index.html b/files/uk/mdn/tools/index.html deleted file mode 100644 index 9030b49d4d..0000000000 --- a/files/uk/mdn/tools/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: MDN tools -slug: MDN/Tools -tags: - - Landing - - MDN Meta - - NeedsTranslation - - TopicStub -translation_of: MDN/Tools ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>MDN offers a number of features that make it easier to track progress, manage content, and keep up with the latest changes to the site.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/uk/mdn/tools/kumascript/index.html b/files/uk/mdn/tools/kumascript/index.html deleted file mode 100644 index 5141e040b4..0000000000 --- a/files/uk/mdn/tools/kumascript/index.html +++ /dev/null @@ -1,500 +0,0 @@ ---- -title: KumaScript -slug: MDN/Tools/KumaScript -tags: - - Guide - - Kuma - - KumaScript - - MDN Meta - - NeedsContent - - NeedsTranslation - - Site-wide - - Tools - - TopicStub -translation_of: MDN/Tools/KumaScript ---- -<div>{{MDNSidebar}}</div><h2 id="Overview">Overview</h2> - -<p><span class="seoSummary">On the <a href="/en-US/docs/MDN/Kuma">Kuma</a> platform that powers MDN, the template system for automating aspects of content on the wiki is called <a class="link-https" href="https://github.com/mdn/kumascript" title="https://github.com/mdn/kumascript">KumaScript</a>. KumaScript is powered by server-side JavaScript, implemented using <a class="external" href="https://nodejs.org/en/" title="https://nodejs.org/en/">Node.js</a>.</span> This article provides basic information on how to use KumaScript.</p> - -<p>For a detailed overview and Q&A of KumaScript, watch the MDN dev team's <a href="https://vreplay.mozilla.com/replay/showRecordDetails.html?sortBy=date&viewCount=1&currentPage=1&groupBy=combo&roomFilter=&usernameFilter=&searchFilter=&usernameFullFilter=&myManager=-1&adminManager=0&webCast=0&command=&recId=1082&auxMessage=&auxMessage1=&lang=en&langChanged=&tenantFilter=&securityTab=">KumaScript Fireside Chat</a> (the meeting starts at 10 minutes into the video). KumaScript replaced DekiScript, which was the template language for MindTouch, the previous platform used by MDN.</p> - -<h3 id="What_is_KumaScript">What is KumaScript?</h3> - -<ul> - <li>A way to reuse and localize content that appears repeatedly between documents (e.g., compatibility labels, section navigation, warning banners).</li> - <li>A way to build documents out of content pulled from other documents.</li> - <li>A way to fetch and include content from other web sites and services (e.g., Bugzilla).</li> -</ul> - -<h3 id="What_KumaScript_is_not">What KumaScript is not</h3> - -<ul> - <li>KumaScript does not support interactive scripting of the kind that can accept form submissions.</li> - <li>KumaScript does not have access to a database, files, or any other way to store information persistently.</li> - <li>KumaScript does not support site personalization based on the user currently logged in.</li> - <li>KumaScript does not have access to user information, only to the content and metadata of a wiki page being viewed.</li> -</ul> - -<h2 id="Basics">Basics</h2> - -<p>KumaScript is used on MDN in <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">embedded JavaScript templates</a>. These templates can be invoked in document content by any MDN author, through the use of macros.</p> - -<p>A script in KumaScript is a <em>template</em>, and each template is a file in <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of the KumaScript repository</a> on Github. A <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/hello.ejs" title="hello.ejs">template</a> looks like this:</p> - -<pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> -Hello #<%= i %> -<% } %></pre> - -<p>Invoking a template is done with a <em>macro</em>, which can be used anywhere in any wiki content. A macro looks like this:</p> - -<pre class="notranslate">\{{ hello("3") }}</pre> - -<p>The output of the macro looks like this:</p> - -<pre class="notranslate">Hello #0 -Hello #1 -Hello #2</pre> - -<h3 id="Macro_syntax">Macro syntax</h3> - -<p>KumaScript templates are invoked in document content with macros, like this:</p> - -<pre class="notranslate">\{{ templateName("arg0", "arg1", ..., "argN") }} -</pre> - -<p>Macro syntax consists of these rules:</p> - -<ul> - <li>Macros start and end with <code>\{{</code> and <code>\}}</code> characters.</li> - <li>The first part of the macro is the name of a template. The lowercase value of this name should match the lowercase value of one of the filenames under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>.</li> - <li>A template can accept parameters, and this parameter list starts and ends with parentheses.</li> - <li>All non-numeric parameters must be in quotes. Numbers can be left unquoted.</li> -</ul> - -<h4 id="Using_JSON_as_a_macro_parameter">Using JSON as a macro parameter</h4> - -<p>As a semi-experimental feature (not guaranteed to work), you can supply a JSON object for the first and only parameter, like so:</p> - -<pre class="notranslate">\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }} -</pre> - -<p>The data from this macro is available in template code as an object in the <code>$0</code> argument (e.g., <code>$0.Alpha</code>, <code>$0.Beta</code>, <code>$0.Foo</code>). This also allows you to express complex data structures in macro parameters that are hard or impossible to do with a simple list of parameters.</p> - -<p>Note that this parameter style is very picky — it must adhere to <a href="http://json.org/" title="http://json.org/">JSON syntax</a> exactly, which has some requirements about escaping characters that are easy to miss (e.g., all forward slashes are escaped). When in doubt, <a href="http://jsonlint.com/" title="http://jsonlint.com/">try running your JSON through a validator</a>.</p> - -<h4 id="How_to_write_in_text">How to write "\{{" in text</h4> - -<p>Since the character sequence "<code>\{{</code>" is used to indicate the start of a macro, this can be troublesome if you actually just want to use "<code>\{{</code>" and "<code>}}</code>" in a page. It will probably produce <code>DocumentParsingError</code> messages.</p> - -<p>In this case, you can escape the first brace with a backslash, like so: <code>\\{</code></p> - -<h3 id="Template_syntax">Template syntax</h3> - -<p>Each KumaScript template is a file under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>. You create and edit these files as you would the files of any open-source project on GitHub (see <a href="https://github.com/mdn/kumascript">the KumaScript README</a> for more information).</p> - -<p>KumaScript templates are processed by an <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">embedded JavaScript template engine</a> with a few simple rules:</p> - -<ul> - <li>Within a template, the parameters passed in from the macro are available as the variables <code>$0</code>, <code>$1</code>, <code>$2</code>, and so on. The entire list of parameters is also available in a template as the variable <code>arguments</code>.</li> - <li>Most text is treated as output and included in the output stream.</li> - <li>JavaScript variables and expressions can be inserted into the output stream with these blocks: - <ul> - <li><code><%= expr %></code> — the value of a JavaScript expression is escaped for HTML before being included in output (e.g., characters like <code><</code> and <code>></code> are turned into <code>&lt;</code> and <code>&gt;</code>).</li> - <li><code><%- expr %></code> — the value of a JavaScript expression is included in output without any escaping. (Use this if you want to dynamically build markup or use the results of another template that may include markup.)</li> - <li>It is an error to include semicolons inside these blocks.</li> - </ul> - </li> - <li>Anything inside a <code><% %></code> block is interpreted as JavaScript. This can include loops, conditionals, etc.</li> - <li>Nothing inside a <code><% %></code> block can ever contribute to the output stream. But, you can transition from JS mode to output mode using <code><% %></code>—for example: - <pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> -Hello #<%= i %> -<% } %> -</pre> - - <p>Note how the JavaScript code is contained in <code><% ... %></code>, and output happens in the space between <code>%> ... <%</code>. The <code>for</code> loop in JS can begin with one <code><% %></code> block, transition to output mode, and finish up in a second <code><% %></code> JS block.</p> - </li> - <li>For more details on EJS syntax, <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">check out the upstream module documentation</a>.</li> -</ul> - -<h3 id="Tips">Tips</h3> - -<p>You can see a list of macros and how they are used on MDN on the <a href="/en-US/dashboards/macros">macros dashboard</a>.</p> - -<h2 id="Advanced_Features">Advanced Features</h2> - -<p>Beyond the basics, the KumaScript system offers some advanced features.</p> - -<h3 id="Environment_variables">Environment variables</h3> - -<p>When the wiki makes a call to the KumaScript service, it passes along some context on the current document that KumaScript makes available to templates as variables:</p> - -<dl> - <dt><code>env.path</code></dt> - <dd>The path to the current wiki document</dd> - <dt><code>env.url</code></dt> - <dd>The full URL to the current wiki document</dd> - <dt><code>env.id</code></dt> - <dd>A short, unique ID for the current wiki document</dd> - <dt><code>env.files</code></dt> - <dd>An array of the files attached to the current wiki document; each object in the array is as described under {{ anch("File objects") }} below</dd> - <dt><code>env.review_tags</code></dt> - <dd>An array of the review tags on the article ("technical", "editorial", etc.)</dd> - <dt><code>env.locale</code></dt> - <dd>The locale of the current wiki document</dd> - <dt><code>env.title</code></dt> - <dd>The title of the current wiki document</dd> - <dt><code>env.slug</code></dt> - <dd>The URL slug of the current wiki document</dd> - <dt><code>env.tags</code></dt> - <dd>An array list of tag names for the current wiki document</dd> - <dt><code>env.modified</code></dt> - <dd>Last modified timestamp for the current wiki document</dd> - <dt><code>env.cache_control</code></dt> - <dd><code>Cache-Control</code> header sent in the request for the current wiki document, useful in deciding whether to invalidate caches</dd> -</dl> - -<h4 id="File_objects">File objects</h4> - -<p>Each file object has the following fields:</p> - -<dl> - <dt><code>title</code></dt> - <dd>The attachment's title</dd> - <dt><code>description</code></dt> - <dd>A textual description of the current revision of the file</dd> - <dt><code>filename</code></dt> - <dd>The file's name</dd> - <dt><code>size</code></dt> - <dd>The size of the file in bytes</dd> - <dt><code>author</code></dt> - <dd>The username of the person who uploaded the file</dd> - <dt><code>mime</code></dt> - <dd>The MIME type of the file</dd> - <dt><code>url</code></dt> - <dd>The URL at which the file can be found</dd> -</dl> - -<h4 id="Working_with_tag_lists">Working with tag lists</h4> - -<p>The <code>env.tags</code> and <code>env.review_tags</code> variables return arrays of tags. You can work with these in many ways, of course, but here are a couple of suggestions.</p> - -<h5 id="Looking_to_see_if_a_specific_tag_is_set">Looking to see if a specific tag is set</h5> - -<p>You can look to see if a specific tag exists on a page like this:</p> - -<pre class="brush: js notranslate">if (env.tags.indexOf("tag") != −1) { - // The page has the tag "tag" -} -</pre> - -<h5 id="Iterating_over_all_the_tags_on_a_page">Iterating over all the tags on a page</h5> - -<p>You can also iterate over all the tags on a page, like this:</p> - -<pre class="brush: js notranslate">env.tag.forEach(function(tag) { - // do whatever you need to do, such as: - if (tag.indexOf("a") == 0) { - // this tag starts with "a" - woohoo! - } -});</pre> - -<h3 id="APIs_and_Modules">APIs and Modules</h3> - -<p>KumaScript offers some built-in methods and APIs for KumaScript macros. Macros can also use <code>module.exports</code> to export new API methods.</p> - -<p>API changes require updating the KumaScript engine or macros via a pull request to the <a href="https://github.com/mdn/kumascript">KumaScript repository</a>.</p> - -<h4 id="Built-in_methods">Built-in methods</h4> - -<p>This manually-maintained documentation is likely to fall out of date with the code. With that in mind, <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L175" title="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L208">you can always check out the latest state of built-in APIs in the KumaScript source</a>. But here is a selection of useful methods exposed to templates:</p> - -<dl> - <dt><code>md5(string)</code></dt> - <dd>Returns an MD5 hex digest of the given string.</dd> - <dt><code>template("name", ["arg0", "arg1", ..., "argN"])</code></dt> - <dd>Executes and returns the result of the named template with the given list of parameters.</dd> - <dd>Example: <code><%- template("warning", ["foo", "bar", "baz"]) %></code>.</dd> - <dd>Example using the <code>domxref</code> macro: <code><%- template("domxref", ["Event.bubbles", "bubbles"]) %></code>.</dd> - <dd>This is a JavaScript function. So, if one of the parameters is an arg variable like $2, do not put it in quotes. Like this: <code><%- template("warning", [$1, $2, "baz"]) %></code>. If you need to call another template from within a block of code, do not use <code><%</code> ... <code>%></code>. Example: <code>myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";</code></dd> - <dt><code>require(name)</code></dt> - <dd>Loads another template as a module; any output is ignored. Anything assigned to <code>module.exports</code> in the template is returned.</dd> - <dd>Used in templates like so: <code><% var my_module = require('MyModule'); %></code>.</dd> - <dt><code>cacheFn(key, timeout, function_to_cache)</code></dt> - <dd>Using the given key and cache entry lifetime, cache the results of the given function. Honors the value of <code>env.cache_control</code> to invalidate cache on <code>no-cache</code>, which can be sent by a logged-in user hitting shift-refresh.</dd> - <dt><code>request</code></dt> - <dd>Access to <a class="link-https" href="https://github.com/mikeal/request" title="https://github.com/mikeal/request"><code>mikeal/request</code></a>, a library for making HTTP requests. Using this module in KumaScript templates is not yet very friendly, so you may want to wrap usage in module APIs that simplify things.</dd> - <dt><code>log.debug(string)</code></dt> - <dd>Outputs a debug message into the script log on the page (i.e. the big red box that usually displays errors).</dd> -</dl> - -<h4 id="Built-in_API_modules">Built-in API modules</h4> - -<p>There's only one API built in at the moment, in the <code>kuma</code> namespace. You can see the most up to date list of methods under <code>kuma</code> from <a href="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L74">the KumaScript source code</a>, but here are a few:</p> - -<dl> - <dt><code>kuma.inspect(object)</code></dt> - <dd>Renders any JS object as a string, handy for use with <code>log.debug()</code>. See also: <a href="http://nodejs.org/api/util.html#util_util_inspect_object_options">node.js <code>util.inspect()</code></a>.</dd> -</dl> - -<dl> - <dt><code>kuma.htmlEscape(string)</code></dt> - <dd>Escapes the characters <code>&, <, >, "</code> to <code>&amp, &lt;, &gt;, &quot;</code>, respectively.</dd> - <dt><code>kuma.url</code></dt> - <dd>See also: <a href="http://nodejs.org/api/url.html">node.js <code>url</code> module</a>.</dd> - <dt><code>kuma.fetchFeed(url)</code></dt> - <dd>Fetch an RSS feed and parse it into a JS object. See also: <a href="https://github.com/mdn/kumascript/blob/master/macros/InsertFeedLinkList.ejs"><code>InsertFeedLinkList</code></a></dd> -</dl> - -<h4 id="Creating_modules">Creating modules</h4> - -<p>Using the built-in <code>require()</code> method, you can load a template as a module to share common variables and methods between templates. A module can be defined in a template like this:</p> - -<pre class="notranslate"><% -module.exports = { - add: function (a, b) { - return a + b; - } -} -%> -</pre> - -<p>Assuming this template is saved under <a href="https://github.com/mdn/kumascript/tree/master/macros">https://github.com/mdn/kumascript/tree/master/macros</a> as <code>MathLib.ejs</code>, you can use it in another template like so:</p> - -<pre class="notranslate"><% -var math_lib = require("MathLib"); -%> -The result of 2 + 2 = <%= math_lib.add(2, 2) %> -</pre> - -<p>And, the output of this template will be:</p> - -<pre class="notranslate">The result of 2 + 2 = 4 -</pre> - -<h4 id="Auto-loaded_modules">Auto-loaded modules</h4> - -<p>There are a set of modules editable as wiki templates that are automatically loaded and made available to every template. This set is defined in the configuration file for the KumaScript service - any changes to this requires an IT bug to edit configuration and a restart of the service.</p> - -<p>For the most part, these attempt to provide stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:</p> - -<ul> - <li><code>mdn.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/MDN-Common.ejs" title="MDN:Common">MDN-Common</a></li> - <li><code>Page.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Page.ejs" title="DekiScript:Page">DekiScript-Page</a></li> - <li><code>String.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-String.ejs" title="DekiScript:String">DekiScript-String</a></li> - <li><code>Uri.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Uri.ejs" title="DekiScript:Uri">DekiScript-Uri</a></li> - <li><code>Web.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Web.ejs" title="DekiScript:Web">DekiScript-Web</a></li> - <li><code>Wiki.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/DekiScript-Wiki.ejs" title="DekiScript:Wiki">DekiScript-Wiki</a></li> -</ul> - -<p><strong>Note:</strong> You might notice that the DekiScript modules use a built-in method named <code>buildAPI()</code>, like so:</p> - -<pre class="notranslate"><% module.exports = buildAPI({ - StartsWith: function (str, sub_str) { - return (''+str).indexOf(sub_str) === 0; - } -}); %> -</pre> - -<p>The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, <code>buildAPI()</code> is a hack to try to cover common case variations in DekiScript calls found in legacy templates.</p> - -<div class="note"> -<p>With that in mind, please do not use <code>buildAPI()</code> in new modules.</p> -</div> - -<h2 id="Tips_and_caveats">Tips and caveats</h2> - -<h3 id="Debugging">Debugging</h3> - -<p>A useful tip when debugging. You can use the <code>log.debug()</code> method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:</p> - -<pre class="notranslate"><%- log.debug("Some text goes here"); %> -</pre> - -<p>You can, of course, create more complex output using script code if it's helpful.</p> - -<h3 id="Caching">Caching</h3> - -<p>KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged-in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:</p> - -<ul> - <li>Hit Refresh in your browser. This causes KumaScript to invalidate its cache for the content on the current page by issuing a request with a <code>Cache-Control: max-age=0</code> header.</li> - <li>Hit Shift-Refresh in your browser. This causes KumaScript to invalidate cache for the current page, as well as for any templates or content used by the current page by issuing a request with a <code>Cache-Control: no-cache</code> header.</li> -</ul> - -<h3 id="Використання_пошуку_за_ключовими_словами_задля_відкриття_сторінок_шаблонів">Використання пошуку за ключовими словами задля відкриття сторінок шаблонів</h3> - -<p>When using templates, it's common to open the template's code in a browser window to review the comments at the top, which are used to document the template, its parameters, and how to use it properly. To quickly access templates, you can create a Firefox <a href="http://kb.mozillazine.org/Using_keyword_searches">search keyword</a>, which gives you a shortcut you can type in the URL box to get to a template more easily.</p> - -<p>To create a search keyword, open the bookmarks window by choosing "Show all bookmarks" in the Bookmarks menu, or by pressing <kbd>Control</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> (<kbd>Command</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> on Mac). Then from the utility ("Gear") menu in the Library window that appears, choose "New Bookmark...".</p> - -<p>This causes the bookmark editing dialog to appear. Fill that out as follows:</p> - -<dl> - <dt>Name</dt> - <dd>A suitable name for your search keyword; "Open MDN Template" is a good one.</dd> - <dt>Location</dt> - <dd><kbd>https://github.com/mdn/kumascript/blob/master/macros/%s</kbd></dd> - <dt>Tags {{optional_inline}}</dt> - <dd>A list of tags used to organize your bookmarks; these are entirely optional and what (if any) tags you use is up to you.</dd> - <dt>Keyword</dt> - <dd>The shortcut text you wish to use to access the template. Ideally, this should be something short and quick to type, such as simply "t" or "mdnt".</dd> - <dt>Description {{optional_inline}}</dt> - <dd>A suitable description explaining what the search keyword does.</dd> -</dl> - -<p>The resulting dialog looks something like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14432/Screen%20Shot%202016-11-28%20at%203.08.39%20PM.png" style="height: 289px; width: 500px;"></p> - -<p>Then click the "Add" button to save your new search keyword. From then on, typing your keyword, then a space, then the name of a macro will open that macro in your current tab. So if you used "t" as the keyword, typing <kbd>t ListSubpages</kbd> will show you the page at {{TemplateLink("ListSubpages")}}.</p> - -<h2 id="Cookbook">Cookbook</h2> - -<p>This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.</p> - -<h3 id="Force_templates_used_on_a_page_to_be_reloaded">Force templates used on a page to be reloaded</h3> - -<p>It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.</p> - -<h3 id="Recovering_from_Unknown_Error">Recovering from "Unknown Error"</h3> - -<p>Sometimes, you'll see a scripting message like this when you load a page:</p> - -<pre class="notranslate">Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'></pre> - -<p>This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&format=itrequest">file an IT bug</a> for Mozilla Developer Network to ask for an investigation.</p> - -<h3 id="Broken_wiki.languages_macros">Broken wiki.languages() macros</h3> - -<p>On some pages, you'll see a scripting error like this:</p> - -<pre class="notranslate">Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but... -</pre> - -<p>If you edit the page, you'll probably see a macro like this at the bottom of the page:</p> - -<pre class="notranslate">\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }} -</pre> - -<p>To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <code><!-- --></code> to preserve the information, like so:</p> - -<pre class="notranslate"><!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) --> -</pre> - -<p>Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.</p> - -<h3 id="Finding_the_Current_Pages_Language">Finding the Current Page's Language</h3> - -<p>In KumaScript, the locale of the current document is exposed as an environment variable:</p> - -<pre class="notranslate">var lang = env.locale; -</pre> - -<p>The <code>env.locale</code> variable should be reliable and defined for every document.</p> - -<h3 id="Reading_the_contents_of_a_page_attachment">Reading the contents of a page attachment</h3> - -<p>You can read the contents of an attached file by using the <code>mdn.getFileContent()</code> function, like this:</p> - -<pre class="notranslate"><% - var contents = mdn.getFileContent(fileUrl); - ... do stuff with the contents ... -%> -</pre> - -<p>or</p> - -<pre class="notranslate"><%-mdn.getFileContent(fileObject)%> -</pre> - -<p>In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array <code>env.files</code>. So, for example, to embed the contents of the first file attached to the article, you can do this:</p> - -<pre class="notranslate"><%-mdn.getFileContent(env.files[0])%> -</pre> - -<div class="note"><strong>Note:</strong> You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.</div> - -<p>If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.</p> - -<h3 id="Localizing_template_content">Localizing template content</h3> - -<p>Templates are not translated like wiki pages, rather any single template might be used for any number of locales.</p> - -<p>So the main way to output content tailored to the current document locale is to pivot on the value of <code>env.locale</code>. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:</p> - -<h4 id="Ifelse_blocks_in_KumaScript">If/else blocks in KumaScript</h4> - -<p>The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:</p> - -<pre class="notranslate"><% if ("fr" == env.locale) { %> -<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a> -<% } else if ("ja" == env.locale) { %> -<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a> -<% } else if ("pl" == env.locale) { %> -<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a> -<% } else if ("de" == env.locale) { %> -<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a> -<% } else { %> -<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a> -<% } %> -</pre> - -<p>Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.</p> - -<p>My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:</p> - -<pre class="notranslate">%s#<span#^M<span#g -%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g -%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [# -%s#)</span> </span>#]) %> -</pre> - -<p>Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.</p> - -<h4 id="String_variables_and_switch">String variables and switch</h4> - -<p>Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:</p> - -<pre class="notranslate"><% -var s_title = 'Firefox for Developers'; -switch (env.locale) { - case 'de': - s_title = "Firefox für Entwickler"; - break; - case 'fr': - s_title = "Firefox pour les développeurs"; - break; - case 'es': - s_title = "Firefox para desarrolladores"; - break; -}; -%> -<span class="title"><%= s_title %></span> -</pre> - -<h4 id="Use_mdn.localString">Use <code>mdn.localString()</code></h4> - -<p>A recent addition to the <code>MDN:Common</code> module is <code>mdn.localString()</code>, used like this:</p> - -<pre class="notranslate"><% -var s_title = mdn.localString({ - "en-US": "Firefox for Developers", - "de": "Firefox für Entwickler", - "es": "Firefox para desarrolladores" -}); -%> -<span class="title"><%= s_title %></span> -</pre> - -<p>This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/macros/CSSRef.ejs" title="CSSRef">CSSRef</a>), a switch statement might help keep all the strings grouped by locale and more easily translated that way.</p> - -<p>When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://kuma.readthedocs.io/en/latest/" title="Getting started with Kuma">Getting started with Kuma</a></li> - <li><a href="https://github.com/mdn/kumascript" title="Project:en/KumaScript reference">KumaScript reference</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/MDN/Kuma" title="https://wiki.mozilla.org/MDN/Kuma">Kuma wiki</a></li> -</ul> diff --git a/files/uk/mdn/tools/kumascript/troubleshooting/index.html b/files/uk/mdn/tools/kumascript/troubleshooting/index.html deleted file mode 100644 index 2764ae5e87..0000000000 --- a/files/uk/mdn/tools/kumascript/troubleshooting/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Усунення помилок KumaScript -slug: MDN/Tools/KumaScript/Troubleshooting -tags: - - KumaScript - - MDN Meta - - Tools - - Помилки - - Путівник -translation_of: MDN/Tools/KumaScript/Troubleshooting -original_slug: MDN/Tools/KumaScript/Усунення_помилок_KumaScript ---- -<div>{{MDNSidebar}}</div><div class="summary"> -<p>Помилки <a href="/uk/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a>, ці моторошні червоні прямокутники, що часом муляють око на сторінках, можуть відлякувати деяких читачів. Але, на щастя, кожен, хто має облікового записа MDN, може відредагувати статтю й виправити такі помилки. Якщо сторінка містить помилки, вона одразу потрапляє у перелік <a href="/uk/docs/with-errors">документів з помилками</a>. Редактори сайту постійно переглядають той перелік й виправляють помилки. Ця сторінка наводить чотири різновиди помилок KumaScript та деякі можливі кроки для їх усунення.</p> -</div> - -<h2 id="Помилка_розбору_документа_DocumentParsingError">Помилка розбору документа (DocumentParsingError)</h2> - -<p>Помилка <code>DocumentParsingError</code> трапляється тоді, коли в KumaScript виникає проблема з розбором самого документа. Зазвичай це синтаксична помилка в <a href="/uk/docs/MDN/Contribute/Content/Macros">шаблоні</a>.</p> - -<p>Слід перевірити:</p> - -<dl> - <dt>Ужиток фігурних дужок там, де не здійснюється виклик шаблону;</dt> - <dd>Якщо вам в документі потрібна фігурна дужка, але це не виклик шаблону, можна її заекранувати за допомогою \ ось так: \\{.</dd> - <dt>Ужиток особливих символів у параметрі шаблону;</dt> - <dd>Якщо вам потрібен символ " або \ всередині параметра шаблону, його необхідно заекранувати за допомогою \ ось так: \".</dd> - <dt>Відсутність ком між параметрами шаблону;</dt> - <dd>Параметри шаблону мають бути відокремлені одне від одного комою ось так: \{\{anch("top", "Нагору")}}.</dd> - <dt>Використання теґів HTML всередині шаблону;</dt> - <dd>Застосування стилів до шаблону може зламати його. Наприклад, кінцевий теґ </code> може виявитися всередині породженого шаблоном вмісту. Перевірте код сторінки, щоб це з'ясувати, та видаліть непотрібне оформлення.</dd> -</dl> - -<ul> -</ul> - -<h2 id="Помилка_завантаження_шаблону_TemplateLoadingError">Помилка завантаження шаблону (TemplateLoadingError)</h2> - -<p>Помилка <code>TemplateLoadingError</code> трапляється тоді, коли в KumaScript виникає проблема з пошуком відповідного шаблону за іменем.</p> - -<p>Слід перевірити:</p> - -<dl> - <dt>Помилково написане ім'я або ужиток перейменованого шаблону.</dt> - <dd>Повний перелік наявних шаблонів ви можете знайти у <a href="https://github.com/mdn/kumascript/tree/master/macros">репозиторії на GitHub</a>.</dd> -</dl> - -<div class="note"> -<p><strong>Порада</strong>: Ви можете зробити пошук шаблонів швидшим й зручнішим, скориставшись механізмом search keyword у Firefox (або відповідним у іншому переглядачі). Дивіться покроковий путівник в розділі {{SectionOnPage("/uk/docs/MDN/Contribute/Tools/KumaScript", "Використання пошуку за ключовими словами задля відкриття сторінок шаблонів")}}.</p> -</div> - -<p>Помилка <code>TemplateExecutionError</code> трапляється тоді, коли KumaScript натрапляє на помилку під час виконання самого шаблону. Такі помилки можуть виправити лише адміністратори, тож вам слід лише надіслати відповідний звіт.</p> - -<p>Перед тим, як надсилати звіт про помилки, переконайтеся, що їх досі не виправлено. Для цього ви можете змусити KumaScript надати вам останню версію сторінки, перезавантаживши її зі скиданням кешів (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>R</kbd> у Linux/Windows, <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>R</kbd> на Mac).</p> - -<p>Якщо проблема лишається, <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&component=General#h=detail|bug">повідомте про ваду</a>, додавши URL-посилання на сторінку й текст помилки.</p> - -<h2 id="Невідома_помилка_Error_Unknown">Невідома помилка (Error & Unknown)</h2> - -<p>Так позначаються помилки, які не належать до жодного з наведених різновидів.</p> - -<p>Переконайтеся, що виправлень досі немає, а тоді повідомте про вади так само, як у випадку з <a href="#TemplateExecutionError">TemplateExecutionError</a>.</p> diff --git a/files/uk/mdn/yari/index.html b/files/uk/mdn/yari/index.html deleted file mode 100644 index 11cc621995..0000000000 --- a/files/uk/mdn/yari/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 'Kuma: wiki-платформа MDN' -slug: MDN/Yari -tags: - - Kuma - - MDN Meta -translation_of: MDN/Kuma -original_slug: MDN/Kuma ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p>Платформа Kuma — це код, що ґрунтується на <a href="/uk/docs/Learn/Server-side/Django">Django</a> та вможливлює роботу MDN Web Docs.</p> - -<p>{{SubpagesWithSummaries}}</p> - -<h2 id="Ознайомлення_з_Kuma">Ознайомлення з Kuma</h2> - -<p>Щоб ознайомитися з Kuma:</p> - -<ul> - <li>Відвідайте проект <a href="https://github.com/mozilla/kuma">Kuma на Github</a>.</li> - <li>Перегляньте <a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">Contribution Guide.</a></li> - <li>Як буде потреба, зверніться до <a href="http://kuma.readthedocs.org/en/latest/">повної документації з Kuma</a>.</li> -</ul> diff --git a/files/uk/mozilla/add-ons/index.html b/files/uk/mozilla/add-ons/index.html deleted file mode 100644 index 955878627f..0000000000 --- a/files/uk/mozilla/add-ons/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Додатки -slug: Mozilla/Add-ons -tags: - - Mozilla - - Додатки - - Розширення -translation_of: Mozilla/Add-ons ---- -<p>{{AddonSidebar}}</p> - -<div class="summary">Змінення та розширення застосунків Mozilla</div> - -<p><span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey, and Thunderbird.</span><strong> </strong>There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.</p> - -<p>Add-ons can greatly affect the behavior of the application that hosts them. We've developed a <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">set of guidelines</a> to help ensure that they provide a good experience to users. These guidelines apply for all sorts of add-ons, whether they are hosted at <a href="https://addons.mozilla.org/">addons.mozilla.org</a> or not.</p> - -<hr> -<h2 id="Розробка_розширень">Розробка розширень</h2> - -<p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add new features to the browser, such as a different way to manage tabs, and they can modify web content to improve the usability or security of particular websites.</p> - -<p>There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and legacy extensions.</p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Add-on SDK extensions</a></span><br> - Extensions built using a set of high-level JavaScript APIs, which don't require a browser restart to install.</li> - <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Restartless extensions</a></span><br> - Extensions which don't require a browser restart to install.</li> - <li><a href="/en-US/Add-ons/Overlay_Extensions"><span>Legacy extensions</span></a><br> - Legacy extensions which require a browser restart to install, generally using <a href="/en-US/docs/Mozilla/Tech/XUL/Overlays">XUL overlays</a>.</li> -</ul> - -<div class="note"> -<p><strong>WebExtensions</strong></p> - -<p>We're working on a system called WebExtensions, which is a new way to develop WebExtensions for Firefox, that will be largely compatible with the system used by Chrome and Opera.</p> - -<p>In the future this will be the preferred way to develop extensions for Firefox.</p> - -<p>At the moment the implementation of this is experimental, but you can <a href="/en-US/Add-ons/WebExtensions">see the docs here</a> if you want to give it a spin.</p> -</div> - -<p>If you can, it's advisable to use the Add-on SDK, which uses the restartless extension mechanism but simplifies certain tasks and cleans up after itself. If the Add-on SDK isn't sufficient for your needs, implement a manual restartless extension instead.</p> - -<p>For more information on choosing which technique to use, read this <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">comparison</a>.</p> - -<h3 id="Зневадження">Зневадження</h3> - -<p>Extension development is hard without being able to debug to see what lines errors were made on. You must enable the developer preferences in order for the logs to be show in the Browser Console. For desktop see here: <a href="/en-US/docs/Mozilla/Add-ons/Setting_up_extension_development_environment#Development_preferences">Setting up an extension development environment</a>.</p> - -<p>For desktop follow <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment">Setting Up a Development Environment</a>, for Mobile (Android/iOS) follow <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE </a>which uses the "Browser Toolbox" from within the desktop WebIDE to catch errors occuring on the mobile device, for Firefox OS also use the WebIDE.</p> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Recommended_practices">Recommended practices</h3> - -<p>No matter how you develop an extension, there are some guidelines you can follow to help ensure your extension provides as good a user experience as possible.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Performance</a></dt> - <dd>Ensuring your extension is fast, responsive and memory-efficient.</dd> - <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Security</a></dt> - <dd>Ensuring your extension doesn't expose the user to malicious websites.</dd> - <dt><a href="/en-US/Add-ons/Extension_etiquette">Etiquette</a></dt> - <dd>Ensuring your extension plays nicely with other extensions.</dd> -</dl> -</div> - -<div class="column-half"> -<h3 id="Application-specific">Application-specific</h3> - -<p>Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> - <dd>Developing extensions for the Thunderbird mail client.</dd> - <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox for Android</a></dt> - <dd>Developing extensions for Firefox for Android.</dd> - <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> - <dd>Developing extensions for the <a href="http://www.seamonkey-project.org/">SeaMonkey</a> software suite.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Оприлюднення_нових_додатків">Оприлюднення нових додатків</h2> - -<p>Mozilla operates a platform for reviewing, signing, and distributing add-ons and themes at <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, also known as AMO.</p> - -<p>You don't have to list your add-on on AMO, but starting in Firefox 43, you must submit your add-on to AMO so it can be reviewed and signed, or Firefox release users won't be able to install your add-on. If you do list your add-on on AMO, you can benefit from its visibility as a source for useful add-ons.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/Distribution">Signing and distributing your add-on</a>: how to get your add-on signed and published, whether it's listed on AMO or not.</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/AMO/Policy/Reviews">AMO review policies</a>: the checks that are made on add-ons when they are reviewed.</li> - <li><a href="/en-US/Add-ons/AMO/Add-ons_manager_API">AMO API</a>: the <a href="https://addons.mozilla.org">addons.mozilla.org</a> website has an API that allows you to retrieve data about a single add-on, groups of add-ons, or to search add-ons.</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/AMO/Policy/Featured">Policies for Featured add-ons</a>: featured add-ons are top-quality extensions and themes highlighted on <a class="external external-icon" href="https://addons.mozilla.org/en-US/firefox/extensions/?sort=featured">AMO</a>, Firefox's Add-ons Manager, and across other Mozilla websites.</li> - <li><a href="/en-US/Add-ons/AMO/Policy/Contact">AMO contact information</a></li> -</ul> - -<hr> -<h2 id="Інші_типи_додатків">Інші типи додатків</h2> - -<p><a href="/Add-ons/Themes/Background">Lightweight themes</a> are much simpler to implement than complete themes, but provide very limited customization.</p> - -<p>With <a href="/en-US/docs/Themes">complete themes</a> you can make much deeper modifications to the application UI. The documentation for complete themes is out of date, but is linked to here as a possible basis for updated documentation.</p> - -<p><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> are a simple and very specific type of add-on: they add new search engines to the browser's search bar.</p> - -<p><strong><a href="/en-US/docs/Plugins">Plugins</a> </strong>help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.</p> diff --git a/files/uk/mozilla/add-ons/webextensions/api/index.html b/files/uk/mozilla/add-ons/webextensions/api/index.html deleted file mode 100644 index 0bbd6f9878..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/api/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: JavaScript APIs -slug: Mozilla/Add-ons/WebExtensions/API -tags: - - NeedsTranslation - - TopicStub - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API ---- -<div>{{AddonSidebar}}</div> - -<div> -<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> - -<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p> - -<p>You can access the APIs using the <code>browser</code> namespace:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> - -<div> -<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> - <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> -<span class="punctuation token">)</span><span class="punctuation token">;</span> -setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> - -<div> -<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> - -<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p> - -<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> - -<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> - -<h2 id="JavaScript_API_listing">JavaScript API listing</h2> - -<p>See below for a complete list of JavaScript APIs:</p> -</div> - -<div>{{SubpagesWithSummaries}}</div> diff --git a/files/uk/mozilla/add-ons/webextensions/api/sessions/index.html b/files/uk/mozilla/add-ons/webextensions/api/sessions/index.html deleted file mode 100644 index 1a1c8fcf2c..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/api/sessions/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: sessions -slug: Mozilla/Add-ons/WebExtensions/API/sessions -tags: - - API - - Add-ons - - Extensions - - NeedsTranslation - - Non-standard - - Reference - - TopicStub - - WebExtensions - - sessions -translation_of: Mozilla/Add-ons/WebExtensions/API/sessions ---- -<div>{{AddonSidebar}}</div> - -<p>Use the sessions API to list, and restore, tabs and windows that have been closed while the browser has been running.</p> - -<p>The {{WebExtAPIRef("sessions.getRecentlyClosed()")}} function returns an array of {{WebExtAPIRef("tabs.Tab")}} and {{WebExtAPIRef("windows.Window")}} objects, representing tabs and windows that have been closed since the browser was running, up to the maximum defined in {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}.</p> - -<p>You can then restore a window or tab using the {{WebExtAPIRef("sessions.restore()")}} function. Restoring doesn't just reopen the tab: it also restores the tab's navigation history so the back/forward buttons will work.</p> - -<p>This API also provides a group of functions that enable an extension to store additional state associated with a tab or a window. Then, if the tab or window is closed and subsequently restored, the extension can retrieve the state. For example, a tab grouping extension might use this to remember which group a tab is in, so as to restore it into the right group if the user restores the tab.</p> - -<p>To use the sessions API you must have the "sessions" <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a>.</p> - -<h2 id="Types">Types</h2> - -<dl> - <dt>{{WebExtAPIRef("sessions.Filter")}}</dt> - <dd>Enables you to restrict the number of {{WebExtAPIRef("sessions.Session", "Session")}} objects returned by a call to {{WebExtAPIRef("sessions.getRecentlyClosed()")}}.</dd> - <dt>{{WebExtAPIRef("sessions.Session")}}</dt> - <dd> - <p>Represents a tab or window that the user has closed in the current browsing session.</p> - </dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}</dt> - <dd>The maximum number of sessions that will be returned by a call to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getRecentlyClosed" title="Returns an array Session objects, representing windows and tabs that were closed in the current browsing session (that is: the time since the browser was started)."><code>sessions.getRecentlyClosed()</code></a>.</dd> -</dl> - -<h2 id="Functions">Functions</h2> - -<dl> - <dt>{{WebExtAPIRef("sessions.forgetClosedTab()")}}</dt> - <dd>Removes a closed tab from the browser's list of recently closed tabs.</dd> - <dt>{{WebExtAPIRef("sessions.forgetClosedWindow()")}}</dt> - <dd>Removes a closed window from the browser's list of recently closed windows.</dd> - <dt>{{WebExtAPIRef("sessions.getRecentlyClosed()")}}</dt> - <dd>Returns an array of {{WebExtAPIRef("sessions.Session", "Session")}} objects, representing windows and tabs that were closed in the current browsing session (that is: the time since the browser was started).</dd> - <dt>{{WebExtAPIRef("sessions.restore()")}}</dt> - <dd> - <p>Restores a closed tab or window.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.setTabValue()")}}</dt> - <dd> - <p>Store a key/value pair associated with a given tab.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.getTabValue()")}}</dt> - <dd> - <p>Retrieve a previously stored value for a given tab, given its key.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.removeTabValue()")}}</dt> - <dd> - <p>Remove a key/value pair from a given tab.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.setWindowValue()")}}</dt> - <dd> - <p>Store a key/value pair associated with a given window.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.getWindowValue()")}}</dt> - <dd> - <p>Retrieve a previously stored value for a given window, given its key.</p> - </dd> - <dt>{{WebExtAPIRef("sessions.removeWindowValue()")}}</dt> - <dd> - <p>Remove a key/value pair from a given window.</p> - </dd> -</dl> - -<h2 id="Events">Events</h2> - -<dl> - <dt>{{WebExtAPIRef("sessions.onChanged")}}</dt> - <dd> - <p>Fired when a tab or window is closed.</p> - </dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.api.sessions")}}</p> - -<p>{{WebExtExamples("h2")}}</p> - -<div class="note"><strong>Acknowledgements</strong> - -<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/sessions"><code>chrome.sessions</code></a> API.</p> - -<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> -</div> - -<div class="hidden"> -<pre>// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> diff --git a/files/uk/mozilla/add-ons/webextensions/api/sessions/restore/index.html b/files/uk/mozilla/add-ons/webextensions/api/sessions/restore/index.html deleted file mode 100644 index f557ad46f1..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/api/sessions/restore/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: sessions.restore() -slug: Mozilla/Add-ons/WebExtensions/API/sessions/restore -tags: - - API - - WebExtensions - - Додатки - - Розширення -translation_of: Mozilla/Add-ons/WebExtensions/API/sessions/restore ---- -<div>{{AddonSidebar()}}</div> - -<p>Відновлює закрите вікно або вкладку. Відновлення є не просто перевідкриттям: воно також повертає історію переходів, тож кнопки вперед/назад також працюватимуть. Відновлення вікна відновить всі вкладки, які вікно мало перед закриттям.</p> - -<p>Це асинхронна функція, що повертає <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox brush:js">var restoringSession = browser.sessions.restore( - sessionId // рядок -) -</pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt><code>sessionId</code></dt> - <dd>Рядок, що містить ідентифікатор сесії для відновлення вікна чи вкладки. Його можна дістати із властивості <code>sessionId</code> об'єкта {{WebExtAPIRef("tabs.Tab", "Tab")}} чи {{WebExtAPIRef("windows.Window", "Window")}}, взятого з котрогось із об'єктів {{WebExtAPIRef("sessions.Session", "Session")}}, що їх масив вертає {{WebExtAPIRef("sessions.getRecentlyClosed()")}}.</dd> -</dl> - -<h3 id="Вертає">Вертає</h3> - -<p>Об'єкт <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>. Через нього буде передано об'єкт {{WebExtAPIRef("sessions.Session", "Session")}}, що відповідатиме відновленій сесії.</p> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("webextensions.api.sessions.restore")}}</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Цей код відновлює останню завершену сессію (вікно або вкладку):</p> - -<pre class="brush: js">function restoreMostRecent(sessionInfos) { - if (!sessionInfos.length) { - console.log("No sessions found") - return; - } - let sessionInfo = sessionInfos[0]; - if (sessionInfo.tab) { - browser.sessions.restore(sessionInfo.tab.sessionId); - } else { - browser.sessions.restore(sessionInfo.window.sessionId); - } -} - -function onError(error) { - console.log(error); -} - -browser.browserAction.onClicked.addListener(function() { - var gettingSessions = browser.sessions.getRecentlyClosed({ - maxResults: 1 - }); - gettingSessions.then(restoreMostRecent, onError); -}); -</pre> - -<p>{{WebExtExamples}}</p> - -<div class="note"><strong>Подяки</strong> - -<p>Цей API ґрунтується на <a href="https://developer.chrome.com/extensions/sessions"><code>chrome.sessions</code></a> API з Chromium.</p> - -<p>Дані про сумісність з Microsoft Edge надано корпорацією Microsoft і подано тут під ліцензією Creative Commons Attribution 3.0 United States License.</p> -</div> - -<div class="hidden"> -<pre>// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> diff --git a/files/uk/mozilla/add-ons/webextensions/index.html b/files/uk/mozilla/add-ons/webextensions/index.html deleted file mode 100644 index 3d759fc48c..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Browser extensions -slug: Mozilla/Add-ons/WebExtensions -tags: - - Extensions - - Landing - - NeedsTranslation - - TopicStub - - WebExtensions - - Додатки -translation_of: Mozilla/Add-ons/WebExtensions ---- -<div>{{AddonSidebar}}</div> - -<p>Розширення можуть розширювати і змінювати можливості веб-переглядача. Розширення для Firefox побудовані за допомогою WebExtension APIs, крос-браузерної системи для розробників розширень. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera and the <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a>. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> - -<p>If you have ideas or questions, or need help migrating a legacy add-on to use WebExtension APIs, you can reach us on the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or <a href="irc://irc.mozilla.org/extdev">#extdev</a> on <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="Починаємо">Починаємо</h2> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">What are extensions?</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Your second extension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Examples">Example extensions</a></li> -</ul> - -<h2 id="How_to">How to</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interact with the clipboard</a></li> -</ul> - -<h2 id="Користувацький_інтерфейс">Користувацький інтерфейс</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">Introduction</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Browser toolbar button</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Browser toolbar button with a popup</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Address bar button with a popup</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu items</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebars</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Bundled web pages</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notifications</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panels</a></li> -</ul> - -<h2 id="Концепції">Концепції</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Working with files</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">Using the devtools APIs</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a></li> -</ul> - -<h2 id="Перенесення">Перенесення</h2> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Developing for Firefox for Android</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Differences between desktop and Android</a></li> -</ul> - -<h2 id="Firefox_workflow">Firefox workflow</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensions and the Add-on ID</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Alternative_distribution_options">Alternative distribution options</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your extension</a></li> -</ul> -</div> - -<div class="section"> -<h2 id="Довідка">Довідка</h2> - -<h3 id="JavaScript_APIs">JavaScript APIs</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> -</ul> - -<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> - -<h3 id="Manifest_keys">Manifest keys</h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json overview</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li> -</ul> - -<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> -</div> -</div> diff --git a/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html b/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html deleted file mode 100644 index b415ba0b0b..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Interact with the clipboard -slug: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard -translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard ---- -<div>{{AddonSidebar}}</div> - -<p>Існує два шляхи взаємодії веб-додатків з буфером обміну: {{domxref("Document.execCommand()")}} метод і новітній асинхронний <a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a>.</p> - -<p>{{domxref("Document.execCommand()")}} може використовуватись, бажано з наступними командами:</p> - -<ul> - <li><code>document.execCommand("copy")</code></li> - <li><code>document.execCommand("cut")</code></li> - <li><code>document.execCommand("paste")</code></li> -</ul> - -<p>Clipboard API надає асинхронний доступ считування та запису прямо в буфер обміну. Наприклад, щоб зчитати текст з буферу обміну виконайте:</p> - -<pre class="brush: js">navigator.clipboard.readText().then(text => outputElem.innerText = text);</pre> - -<p>Ця команда запитує текст в буфері та, та коли відповідь надійде з буферу, вона буде записана прямісенько в елемент {{domxref("Node.innerText", "innerText")}}.</p> - -<div class="note"> -<p><strong>Примітка:</strong> Асинхронний Clipboard API метод нещодавно доданий в специфікацію, і може ще працювати не в усіх веб-оглядачах. Запевнетесь щодо кожного методу в таблиці сумісності перед тим як використовувати його.</p> -</div> - -<h2 id="Запис_в_буфер_обміну">Запис в буфер обміну</h2> - -<p>Існує два шляхи запису в буфер обміну. Ви можете використати {{domxref("Document.execCommand", "document.execCommand()")}} для запиту "cut" та "copy" дій, які замінюють контент в буфері із виділенним даними. Інша опція це Clipboard API's {{domxref("Clipboard.writeText()")}} чи {{domxref("Clipboard.write()")}}.</p> - -<h3 id="Використання_execCommand()">Використання execCommand()</h3> - -<p>{{domxref("Document.execCommand", "document.execCommand()")}} метод <code>"cut"</code> та <code>"copy"</code> команди можуть бути використані для заміни буферу із виділенними даними. Ці команди можуть бути виконані без будь яких дозволів, якщо ви використовуєте їх короткочасних обробниках дій користувача(наприклад, обробник кліку).</p> - -<p>Наприклад HTML:</p> - -<pre class="brush: html"><input id="input" type="text"/> -<button id="copy">Copy</button> -</pre> - -<p>Із кнопкою <code>"copy"</code> яка копіює контент {{HTMLElement("input")}} елементу, ви можете використати код такий як:</p> - -<pre class="brush: js">function copy() { - var copyText = document.querySelector("#input"); - copyText.select(); - document.execCommand("copy"); -} - -document.querySelector("#copy").addEventListener("click", copy);</pre> - -<p>Тому що <code>execCommand()</code> виклик знаходится всередені обробника кліку, вам не потрібні ніякі спеціальні дозволи.</p> - -<p>Однак, якщо наприклад замість того ви копіюєте з alarm:</p> - -<pre class="brush: js">function copy() { - var copyText = document.querySelector("#input"); - copyText.select(); - document.execCommand("copy"); -} - -browser.alarms.create({ - delayInMinutes: 0.1 -}); - -browser.alarms.onAlarm.addListener(copy);</pre> - -<p>Залежно від веб-оглядача, це може не спрацювати. У Firefox, це не спрацює, і ви побачете повідомлення помилки як:</p> - -<pre>document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.</pre> - -<p>Щоб надати можливість виконати це, вам потрібно запитати дозвол <code>"clipboardWrite"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. Тож: <code>"clipboardWrite"</code> дозволяє копіювати поза простих обробників дій користувача.</p> - -<h3 id="Використання_Clipboard_API">Використання Clipboard API</h3> - -<p>Clipboard API додає більшу гнучкість, в такому разі ви не обмежені лише в копіюванні поточного виділення в буфер обміну, ви маєте також можливість вказати будь яку інформацію внести в буфер.</p> - -<p>Використання API потребує дозволу "clipboardRead" чи "clipboardWrite" в вашому manifest.json файлі.</p> - -<p>Для страничних скриптів, Permissions API's потребує дозвіл <code>"clipboard-write"</code>. Ви можете запросити дозвіл з {{domxref("Permissions.query", "navigator.permissions.query()")}}:</p> - -<pre class="brush: js">navigator.permissions.query({name: "clipboard-write"}).then(result => { - if (result.state == "granted" || result.state == "prompt") { - /* write to the clipboard now */ - } -}); -</pre> - -<p>Ця функція приймає строку вводу та вносить ії в буфер обміну:</p> - -<pre class="brush: js">function updateClipboard(newClip) { - navigator.clipboard.writeText(newClip).then(function() { - /* clipboard successfully set */ - }, function() { - /* clipboard write failed */ - }); -} -</pre> - -<h3 id="Browser-specific_considerations">Browser-specific considerations</h3> - -<p>Буфер обміну та інші APIs активно розвиваются, тож існують варіанти серед веб-оглядачів як вони працюють.</p> - -<p>В Chrome:</p> - -<ul> - <li>Ви можете записувати в буфер обміну як інші операції з контекстом сторінки.</li> - <li>Вам не потрібні <code>"clipboardWrite"</code>, навіть поза функцією оброки дій користувача(event handler).</li> -</ul> - -<p>В Firefox:</p> - -<ul> - <li>Ви можете записувата в буфер з execCommand в усіх обробках контенту, <em>виключно в фонових сторінках</em>. В Firefox ви не можете виділяти текст чи ставити фокус на input в фонових сторінках, тож ви не можете записувати в буфер з execCommand у фонових сторінках. Clipboard Web API не має таких обмежень.</li> - <li>З версії 57 і вищче, ви можете копіювати зображення в буфер використовуючи <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData">clipboard.setImageData()</a></code> API.</li> - <li>Підтримка Clipboard API's {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} було додано Firefox 63.</li> - <li>Із використанням скриптів сторінок, Clipboard API доступна лише з HTTPS сторінками. В іншому випадку, використовуйте messaging між вашим контент скриптом та фоновим скриптом.</li> -</ul> - -<div class="blockIndicator note"> -<p><code>execCommand('copy')</code> API не підтримує <strong>Safari</strong></p> -</div> - -<h2 id="Зчитування_буферу_обміну">Зчитування буферу обміну</h2> - -<p><code>execCommand()</code> дозволяє виконати <code>"paste"</code> команду, яка дозволяє вставити поточний контент в буфері обміну в область редагування. Ви можете отримати більшу гнучкість із Clipboard API's {{domxref("Clipboard.read()")}} та {{domxref("Clipboard.readText()")}} методами.</p> - -<h3 id="Використання_execCommand()_2">Використання execCommand()</h3> - -<p>По-перше, вам потрібен дозвіл <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> визначно до вашого додатку. Це обов'язвокі умови навіть якщо <code>"paste"</code> команда виконується в обробнику дій користувача такі як {{event("click")}} чи {{event("keypress")}}.</p> - -<p>Наприклад HTML такий як:</p> - -<pre class="brush: html"><textarea id="output"></textarea> -<button id="paste">Paste</button> -</pre> - -<p>Щоб вставити контент в {{HTMLElement("textarea")}} з ID <code>"output"</code> з буферу обміну коли користувач нажме на кнопку <code>"paste"</code> {{HTMLElement("button")}}, використовуйте код:</p> - -<pre class="brush: js">function paste() { - var pasteText = document.querySelector("#output"); - pasteText.focus(); - document.execCommand("paste"); - console.log(pasteText.textContent); -} - -document.querySelector("#paste").addEventListener("click", paste);</pre> - -<h3 id="Використання_Clipboard_API_2">Використання Clipboard API</h3> - -<p>Clipboard API's {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} та {{domxref("Clipboard.read", "navigator.clipboard.read()")}} методи дозволяють вам зчитувати текст чи бінарні данні з буферу обміну. Вона надає можливість зчитувати данні в буфері без вставки його в елемент редагування.</p> - -<p>Щойно ви отримали <code>"clipboard-read"</code> дозвіл з <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>, ви можете зчитати данні дуже легко:</p> - -<pre class="brush: js">navigator.clipboard.readText().then(clipText => - document.getElementById("outbox").innerText = clipText);</pre> - -<p>Цей код витягує текст з буферу та замінює контент елементу з ID <code>"outbox"</code>.</p> - -<h3 id="Browser-specific_considerations_2">Browser-specific considerations</h3> - -<p>Firefox підтримує <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> з версії 54, але личше підтримує вставку в елементи в <a href="/en-US/docs/Web/Guide/HTML/Editable_content">content editable mode</a>, які в контент скриптах лише працюють з {{HTMLElement("textarea")}}. Для фонових скриптів, будь який елемент може бути змінений в режим редагування контенту.</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li> - <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> - <li>{{htmlattrxref("contenteditable")}}</li> -</ul> diff --git a/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html deleted file mode 100644 index eccf78994d..0000000000 --- a/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Що таке розширення? -slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -tags: - - Web-Розширення - - Розширення -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -original_slug: Mozilla/Add-ons/WebExtensions/Що_таке_Web_Розширення ---- -<div>{{AddonSidebar}}</div> - -<p>Розширення є частинками коду, які змінюють функціонування web-браузера. Вони написані з використанням стандартних web-технологій - JavaScript, HTML і CSS - плюс деяких спеціальних JavaScript API. Крім того, розширення можуть додавати нові функції до браузера або змінювати зовнішній вигляд або вміст конкретних web-сайтів.</p> - -<p>Розширення для Firefox створені з використанням API Web-розширень, крос-браузерної системи для розробки розширень. Значною мірою API сумісний з <a class="external external-icon" href="https://developer.chrome.com/extensions">API розширенням</a>, яке підтримується Google Chrome і Opera. Розширення написані для цих браузерів в більшості випадків запускатимуться у Firefox або Microsoft Edge з <a href="/uk/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">лише кількома змінами</a>. API також повністю сумісний з <a href="/uk/Firefox/Multiprocess_Firefox">багатопроцесовим Firefox</a>.</p> - -<p>В минулому, ви могли розробляти розширення Firefox використовуючи одне з трьох різних систем: <a href="/uk/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="/uk/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a>, або <a href="/uk/docs/Mozilla/Add-ons/SDK">Add-on SDK</a>. По закінченню Листопада 2017-го, API Web-розширення будуть єдиним способом розробки розширень Firefox, і інші системи не будуть підтримуватися.</p> - -<p>Якщо ви маєте ідеї або питання, чи вам потрібна допомога міграції успадкованого додатку на API Web-розширень, то ви можете зв'язатися з нами на <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons списку листування</a> або в <a href="irc://irc.mozilla.org/extdev">#extdev</a> на <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<h2 id="Що_далі">Що далі?</h2> - -<ul> - <li>Спробувати деякі приклади розширень, див. <a href="/uk/Add-ons/WebExtensions/Examples">Приклад розширень</a>.</li> - <li>Дізнатися про структуру розширення, див. <a href="/uk/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Анатомія розширення</a>.</li> - <li>Перейти до розробки простого розширення, див. <a href="/uk/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Ваше перше розширення</a>.</li> -</ul> diff --git a/files/uk/mozilla/firefox/experimental_features/index.html b/files/uk/mozilla/firefox/experimental_features/index.html deleted file mode 100644 index 9b68f1611f..0000000000 --- a/files/uk/mozilla/firefox/experimental_features/index.html +++ /dev/null @@ -1,537 +0,0 @@ ---- -title: Експериментальні функції в Firefox -slug: Mozilla/Firefox/Experimental_features -translation_of: Mozilla/Firefox/Experimental_features ---- -<div>{{FirefoxSidebar}}</div><p class="summary">In order to test new features, Mozilla publishes a test version of the Firefox browser, <a href="https://nightly.mozilla.org/">Firefox Nightly</a>, every day. Experimental features, for example implementations of proposed Web platform standards, are available. This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.</p> - -<p>To test these experimental features, you need to download <a href="https://nightly.mozilla.org/">Firefox Nightly</a> or <a href="https://www.mozilla.org/uk/firefox/developer/">Firefox Developer Edition</a>.</p> - -<h2 id="HTML">HTML</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - <tr> - <td><strong>Date and time inputs</strong><br> - The UI for the {{HTMLElement("input")}} <a href="/uk/docs/Web/HTML/Element/input/date">date</a> and <a href="/uk/docs/Web/HTML/Element/input/time">time</a> related input types.</td> - <td>Вимкнено<br> - <sub>(available since 51)</sub></td> - <td>Вимкнено<br> - <sub>(available since 51)</sub></td> - <td>Вимкнено<br> - <sub>(available since 51)</sub></td> - <td>---</td> - <td><code>dom.forms.datetime</code></td> - </tr> - </thead> -</table> - -<h2 id="CSS">CSS</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong><a href="/uk/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></strong></td> - <td>40</td> - <td>40</td> - <td>Увімкнено<br> - <sub>(available since 40, enabled by default since 52)</sub></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1217086">Вимкнено</a></td> - <td><code>layout.css.grid.enabled</code></td> - </tr> - <tr> - <td><strong>Subgrids</strong></td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>layout.css.grid-template-subgrid-value.enabled</code></td> - </tr> - <tr> - <td><strong>Logical values for <code>clear</code> and <code>float</code> CSS properties</strong><br> - The values {{cssxref("clear")}}<code>:</code> <code>inline-start</code> and <code>clear:</code> <code>inline-end</code> as well as {{cssxref("float")}}<code>:</code> <code>inline-start</code> and <code>float:</code> <code>inline-end</code> are making easier to create layouts that are agnostic to the text directionality.</td> - <td>45</td> - <td>45</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1253919">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1253919">Вимкнено</a></td> - <td><code>layout.css.float-logical-values.enabled</code></td> - </tr> - <tr> - <td><strong>Display stray control characters in CSS as hex boxes</strong><br> - This feature renders control characters (Unicode category Cc) other than <em>tab</em> (<code>U+0009</code>), <em>line feed</em> (<code>U+000A</code>), <em>form feed</em> (<code>U+000C</code>), and <em>carriage return</em> (<code>U+000D</code>) as a hexbox when they are not expected.</td> - <td>43</td> - <td>43</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">Вимкнено</a></td> - <td><code>layout.css.control-characters.enabled</code></td> - </tr> - <tr> - <td><strong>The <code>transform-box</code> property</strong><br> - Controls the box the relative values of {{cssxref("transform-origin")}} and {{cssxref("transform")}} relate too.</td> - <td>41</td> - <td>41</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1208550">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1208550">Вимкнено</a></td> - <td><code>svg.transform-box.enabled</code></td> - </tr> - <tr> - <td><strong>Basic shapes in </strong><code><strong>clip-path</strong></code><br> - Adds the functions <code>circle()</code>, <code>ellipse()</code>, and <code>polygon()</code> to the set of possible values for {{cssxref("clip-path")}}. This is a part of CSS Masks Level 1.</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1303654">Увімкнено</a><br> - <sub>(available since 47, enabled by default since 53)</sub></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1303654">Увімкнено</a><br> - <sub>(available since 47, enabled by default since 53)</sub></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Вимкнено</a><br> - <sub>(available since 47)</sub></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247229">Вимкнено</a><br> - <sub>(available since 47)</sub></td> - <td><code>layout.css.clip-path-shapes.enabled</code></td> - </tr> - <tr> - <td><strong>Positioned CSS Masks</strong><br> - A subset of CSS Masks that includes <a href="/uk/docs/Web/CSS/CSS_Masks">longhand properties of CSS Masks</a>, as well as a change in the shorthand property</td> - <td>51</td> - <td>51</td> - <td>53</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251161">Вимкнено</a><br> - <sub>(planned for 53)</sub></td> - <td>Controlled by a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).</td> - </tr> - <tr> - <td><strong>The <code>font-display</code> descriptor for <code>@font-face</code></strong><br> - To improve Web fonts performance, {{cssxref("@font-face")}} has an experimental {{cssxref("@font-face/font-display", "font-display")}} descriptor.</td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td><code>layout.css.font-display.enabled</code></td> - </tr> - <tr> - <td><strong>The <code>touch-action</code> CSS property</strong><br> - The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification and allows to specify how and in what way the user is able to manipulate an object by touch.</td> - <td>50</td> - <td>—</td> - <td>—</td> - <td>—</td> - <td><code>layout.css.touch_action.enabled</code></td> - </tr> - <tr> - <td> - <p><strong id="shape-outside">The <code>shape-outside</code> CSS property</strong><br> - The {{cssxref("shape-outside")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification and allows to specify a float area causing inline contents to wrap around a shape.</p> - - <p>Firefox currently implements the <code><shape-box></code> values ({{bug(1309467)}}) as well as the <code>circle()</code> ({{bug(1311244)}}) and <code>ellipse()</code> ({{bug(1326406)}}) functions.</p> - </td> - <td>Вимкнено<br> - <sub>(available since 53)</sub></td> - <td>—</td> - <td>—</td> - <td>—</td> - <td><code>layout.css.shape-outside.enabled</code></td> - </tr> - <tr> - <td><strong>The <code>contain</code> CSS property</strong><br> - The {{cssxref("contain")}} CSS property is part of the {{SpecName("CSS Containment")}} specification and allows to indicate that an element and its contents are independent of the rest of the document tree, allowing {{Glossary("User agent", "user agents")}} to optimize the rendering of a page.</td> - <td>Вимкнено<br> - <sub>(available since 45)</sub></td> - <td>Вимкнено<br> - <sub>(available since 45)</sub></td> - <td>Вимкнено<br> - <sub>(available since 45)</sub></td> - <td>Вимкнено<br> - <sub>(available since 45)</sub></td> - <td><code>layout.css.contain.enabled</code></td> - </tr> - </tbody> -</table> - -<h2 id="JavaScript">JavaScript</h2> - -<p id="ECMAScript_2016">See also <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a> for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong>Additions to the <code>ArrayBuffer</code> object</strong><br> - Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new <code>ArrayBuffer</code> whose contents have been taken from the <code>oldBuffer</code>'s data (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>).</td> - <td>36</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>None</td> - </tr> - <tr> - <td><strong>TypedObject objects</strong> (<a href="https://github.com/dslomov-chromium/typed-objects-es7">spec</a>)</td> - <td>Увімкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>None</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SIMD">SIMD</a> (<a href="https://github.com/johnmccutchan/ecmascript_simd">specification and polyfill</a>)</td> - <td>Увімкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>None</td> - </tr> - <tr> - <td><strong>Shared Memory objects</strong><br> - {{jsxref("SharedArrayBuffer")}}<br> - {{jsxref("Atomics")}}</td> - <td>Увімкнено<br> - <sub>(available since 46)</sub></td> - <td>Увімкнено<br> - <sub>(available since 51)</sub></td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td>Вимкнено<br> - <sub>(available since 46)</sub></td> - <td><code>javascript.options.shared_memory</code></td> - </tr> - </tbody> -</table> - -<h2 id="APIs">APIs</h2> - -<h3 id="Canvas_WebGL">Canvas & WebGL</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong><code>WEBGL_debug_renderer_info</code> extension</strong><br> - The {{domxref("WEBGL_debug_renderer_info")}} extension allows to transmit information useful to help debugging problems to the server.</td> - <td>42</td> - <td>42</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">Вимкнено</a></td> - <td><code>webgl.enable-debug-renderer-info</code></td> - </tr> - <tr> - <td><strong>OffscreenCanvas</strong><br> - The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and <a href="/uk/docs/Web/API/Web_Workers_API">worker</a> contexts.</td> - <td>Вимкнено<br> - <sub>(available since 44)</sub></td> - <td>Вимкнено<br> - <sub>(available since 44)</sub></td> - <td>Вимкнено<br> - <sub>(available since 44)</sub></td> - <td>Вимкнено<br> - <sub>(available since 44)</sub></td> - <td><code>gfx.offscreencanvas.enabled</code></td> - </tr> - <tr> - <td><strong><a href="/uk/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions</a></strong><br> - Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.</td> - <td>Вимкнено<br> - <sub>(available since 30)</sub></td> - <td>Вимкнено<br> - <sub>(available since 30)</sub></td> - <td>Вимкнено<br> - <sub>(available since 30)</sub></td> - <td>Вимкнено<br> - <sub>(available since 30)</sub></td> - <td><code>canvas.hitregions.enabled</code></td> - </tr> - </tbody> -</table> - -<h3 id="DOM"> DOM</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong>WebVR API</strong><br> - The <a href="/uk/docs/Web/API/WebVR_API">WebVR API</a> allows to control and use virtual reality devices.</td> - <td>46<br> - <sub>A major update of the interface happened in version 51.</sub></td> - <td>46<br> - <sub>A major update of the interface happened in version 51.</sub></td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>dom.vr.enabled</code></td> - </tr> - <tr> - <td><strong>FlyWeb</strong><br> - <a href="https://flyweb.github.io/">FlyWeb</a> is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.</td> - <td>51</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>dom.flyweb.enabled</code></td> - </tr> - <tr> - <td><code><strong>HTMLMediaElement.seekToNextFrame()</strong></code><br> - Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.</td> - <td>49<br> - <sub>(Fundamental update in version 50)</sub></td> - <td>49<br> - <sub>(Fundamental update in version 50)</sub></td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>media.seekToNextFrame.enabled</code></td> - </tr> - <tr> - <td><strong><code>GeometryUtils.getBoxQuads()</code></strong> ({{bug(917755)}})</td> - <td>31</td> - <td>31</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Вимкнено</a></td> - <td><code>layout.css.getBoxQuads.enabled</code></td> - </tr> - <tr> - <td><strong><code>GeometryUtils.convertPointFromNode()</code></strong>,<br> - <strong><code>GeometryUtils.RectFromNode()</code></strong>, and<br> - <code><strong>GeometryUtils.convertQuadFromNode()</strong></code><br> - ({{bug(918189)}})</td> - <td>31</td> - <td>31</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">Вимкнено</a></td> - <td><code>layout.css.convertFromNode.enabled</code></td> - </tr> - <tr> - <td><strong><code>Node.rootNode</code></strong><br> - The {{domxref("Node.rootNode")}} property 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.<br> - <em>This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.</em></td> - <td>48</td> - <td>48</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">Вимкнено</a></td> - <td><code>dom.node.rootNode.enabled</code></td> - </tr> - <tr> - <td><strong>Performance Observer API</strong><br> - The {{domxref("PerformanceObserver")}} interface is used to <em>observe</em> performance measurement events and be notified of new <a href="/uk/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">performance entries</a> as they are recorded in the browser's <em>performance timeline</em>.</td> - <td>49</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>dom.enable_performance_observer</code></td> - </tr> - <tr> - <td><strong>WebVTT Regions API</strong><br> - <a href="/uk/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.<br> - <em>This interface is considered to be in flux and isn't therefore activated in any version by default.</em></td> - <td>Вимкнено<br> - <sub>(Experimental implementation since version 30)</sub></td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>media.webvtt.regions.enabled</code></td> - </tr> - <tr> - <td><strong>Support for audio and video tracks</strong><br> - Implements {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElment.videoTracks")}}.<br> - <em>Firefox doesn't support multiple audio or video tracks, preventing the most common use cases for these properties to work properly. That's why these properties are not activated by default in any version.</em></td> - <td>Вимкнено<br> - <sub>(Experimental implementation since version 33)</sub></td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>media.track.enabled</code></td> - </tr> - <tr> - <td><strong>Better value for <code>Event.timestamp</code></strong><br> - The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, but the value is not the time since but since the reboot. This change allow for returning a timestamp relative to the Unix epoch.</td> - <td>32 (Windows)<br> - 43 (Linux)</td> - <td>32 (Windows)<br> - 43 (Linux)</td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">Вимкнено</a></td> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">Вимкнено</a></td> - <td><code>media.track.enabled</code></td> - </tr> - <tr> - <td><strong>Pointer Events</strong></td> - <td>50</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>dom.w3c_pointer_events.enabled</code></td> - </tr> - <tr> - <td><strong><code>MediaDevices.ondevicechange</code> and the <code>devicechange</code> event</strong><br> - The {{domxref("MediaDevices.ondevicechange")}} event handler and corresponding {{event("devicechange")}} event make it possible to detect and react when audio and video devices are attached to or removed from the computer.</td> - <td> - <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1308115">Вимкнено</a><br> - 51 (Mac)</p> - - <p>Увімкнено<br> - 52 (Mac)<br> - 52 (Windows)<br> - 52 (Linux)</p> - </td> - <td> - <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1308115">Вимкнено</a><br> - 51 (Mac)</p> - - <p>Увімкнено<br> - 52 (Mac)<br> - 52 (Windows)<br> - 52 (Linux)</p> - </td> - <td> - <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1308115">Вимкнено</a><br> - 51 (Mac)</p> - - <p>Увімкнено<br> - 52 (Mac)<br> - 52 (Windows)<br> - 52 (Linux)</p> - </td> - <td> - <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1308115">Вимкнено</a><br> - 51 (Mac)</p> - - <p>Увімкнено<br> - 52 (Mac)<br> - 52 (Windows)<br> - 52 (Linux)</p> - </td> - <td><code>media.ondevicechange.enabled</code></td> - </tr> - <tr> - <td><strong>Intersection Observer API</strong><br> - The {{domxref("Intersection Observer API")}} allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called.</td> - <td>Вимкнено<br> - <sub>(available since 53)</sub></td> - <td>---</td> - <td>---</td> - <td>---</td> - <td><code>dom.IntersectionObserver.enabled</code></td> - </tr> - <tr> - <td><strong><a href="/uk/docs/Web/API/Web_Animations_API">Web Animations API</a></strong><br> - The {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} and {{domxref("KeyframeEffect.KeyframeEffect()")}} constructors can be used to clone existing {{domxref("KeyframeEffectReadOnly")}} object instances by being given the object to clone as their only parameter (see {{bug(1273784)}}.) The <code>KeyframeEffect.clone()</code> method, which was meant to provide this functionality but was never implemented in Firefox, has been removed from the spec.</td> - <td>52</td> - <td>52</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>None</td> - </tr> - </tbody> -</table> - -<h2 id="Developer_Tools">Developer Tools</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Функція</th> - <th scope="col">Firefox Nightly</th> - <th scope="col">Firefox Developer Edition</th> - <th scope="col">Firefox Бета</th> - <th scope="col">Firefox Release</th> - <th scope="col">Переваги</th> - </tr> - </thead> - <tbody> - <tr> - <td><strong>Debugger rewrite in HTML</strong></td> - <td>52</td> - <td>52</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>devtools.debugger.new-debugger-frontend</code></td> - </tr> - <tr> - <td><strong>Console rewrite in HTML</strong></td> - <td>52</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>devtools.webconsole.new-frontend-enabled</code></td> - </tr> - <tr> - <td><strong>Responsive Design Mode rewrite in HTML</strong><br> - A rewrite of Responsive Design Mode using HTML adds new features like a device selector (applies size, UA, dPR), UI redesign, and there's more still to come.</td> - <td>52</td> - <td>52</td> - <td>52</td> - <td>52</td> - <td><code>devtools.responsive.html.enabled</code></td> - </tr> - <tr> - <td><strong>Experimental Performance tool options</strong><br> - Enables options in the UI for JIT optimizations, memory, etc.</td> - <td>41</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td>Вимкнено</td> - <td><code>devtools.performance.ui.experimental</code></td> - </tr> - <tr> - <td><strong>Layout side panel</strong><br> - The Layout side panel allows to inspect and manage different CSS layout types like <a href="/uk/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.</td> - <td>Вимкнено<br> - <sub>(available since 52)</sub></td> - <td>Вимкнено<br> - <sub>(available since 52)</sub></td> - <td>---</td> - <td>---</td> - <td><code>devtools.layoutview.enabled</code></td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/uk/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li> - <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li> - <li><a href="https://www.mozilla.org/uk/firefox/developer/">Firefox Developer Edition</a></li> -</ul> diff --git a/files/uk/mozilla/firefox/index.html b/files/uk/mozilla/firefox/index.html deleted file mode 100644 index 1fd1fae05f..0000000000 --- a/files/uk/mozilla/firefox/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Firefox -slug: Mozilla/Firefox -tags: - - Firefox - - Landing - - Mozilla - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Firefox ---- -<div>{{FirefoxSidebar}}</div> - -<p><a href="https://www.mozilla.org/firefox/">Firefox</a> is Mozilla's popular Web browser, available for multiple platforms including Windows, macOS, and Linux on the desktop and all Android and iOS mobile devices. With broad compatibility, the latest in Web technologies, and powerful development tools, Firefox is a great choice for both Web developers and end users.</p> - -<p>Firefox is an open source project; much of the code is contributed by our huge community of volunteers. <span class="seoSummary">Here you can learn about how to contribute to the Firefox project and you will also find links to information about the construction of Firefox add-ons, using the developer tools in Firefox, and other topics.</span></p> - -<div class="summary"> -<p>Learn how to create add-ons for <a href="https://www.mozilla.org/firefox/">Firefox</a>, how to develop and build Firefox itself, and how the internals of Firefox and its subprojects work.</p> -</div> - -<ul class="card-grid"> - <li><span>Developer release notes</span> - - <p><a href="/en-US/Firefox/Releases">Developer-focused release notes</a>; learn what new capabilities for both Web sites and add-ons arrive in each version of Firefox.</p> - </li> - <li><span>Project documentation</span> - <p>Get detailed information about <a href="/en-US/docs/Mozilla">the internals of Firefox</a> and its build system, so you can find your way around in the code.</p> - </li> - <li><span>Developer guide</span> - <p>Our <a href="/en-US/docs/Developer_Guide">developer guide</a> provides details on how to get and compile the Firefox source code, how to find your way around, and how to contribute to the project.</p> - </li> -</ul> - -<h2 id="Firefox_channels">Firefox channels</h2> - -<p>Firefox is available in five <strong>channels</strong>.</p> - -<h3 id="Firefox_Nightly">Firefox Nightly</h3> - -<p>Each night we build Firefox from the latest code in <a href="/en-US/docs/mozilla-central">mozilla-central</a>. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they're still under active development.</p> - -<p><a href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Nightly</a></p> - -<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3> - -<p>This is a version of Firefox tailored for developers. Every six weeks, we take the features in Firefox Nightly that are stable enough and create a new version of Firefox Developer Edition. We also add some extra features for developers that are only available in this channel.</p> - -<p><a href="/en-US/Firefox/Developer_Edition">Learn more about Firefox Developer Edition</a>.</p> - -<p><a href="https://www.mozilla.org/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> - -<h3 id="Firefox_Beta">Firefox Beta</h3> - -<p>After spending six weeks in Firefox Developer Edition, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what's destined to become the next released Firefox version.</p> - -<p><a href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Beta</a></p> - -<h3 id="Firefox">Firefox</h3> - -<p>After stabilizing for another six weeks in Beta, we're ready to ship the new features to hundreds of millions of users in a new release version of Firefox.</p> - -<p><a href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox</a></p> - -<h3 id="Firefox_Extended_Support_Release_(ESR)">Firefox Extended Support Release (ESR)</h3> - -<p>Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.</p> - -<p><a href="/en-US/Firefox/Firefox_ESR">Learn more about Firefox Extended Support Release</a>.</p> - -<p><a href="https://www.mozilla.org/firefox/organizations/all/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox ESR</a></p> - -<h2 id="Contents">Contents</h2> - -<p>{{LandingPageListSubpages}}</p> - -<h2 id="Firefox_profiles">Firefox profiles</h2> - -<p>If you find yourself using multiple Firefox channels—or just multiple configurations—on a regular basis, you should read how to <a href="/en-US/docs/Mozilla/Firefox/Multiple_profiles">use multiple Firefox profiles</a> by turning Firefox's Profile Manager and other profile management tools to your advantage.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://mail.mozilla.org/listinfo/firefox-dev">Mailing list</a></li> - <li><a href="https://wiki.mozilla.org/Release_Management/Calendar">Release schedule</a></li> -</ul> diff --git a/files/uk/mozilla/firefox/releases/53/index.html b/files/uk/mozilla/firefox/releases/53/index.html deleted file mode 100644 index 8345a0be47..0000000000 --- a/files/uk/mozilla/firefox/releases/53/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Firefox 53 для розробників -slug: Mozilla/Firefox/Releases/53 -tags: - - Примітки До Випуску -translation_of: Mozilla/Firefox/Releases/53 ---- -<div>{{FirefoxSidebar}}</div><p><span id="result_box" lang="uk"><span>Firefox 53 бу</span></span><span lang="uk"><span>в випущений 19 квітня 2017 року. У цій статті перераховані основні зміни, корисні не тільки для веб-розробників, але також для розробників Firefox і Gecko, разом із розробниками додатків.</span></span></p> - -<h2 id="Зміни_для_веб_розробників">Зміни для веб розробників</h2> - -<h3 id="Інструменти_для_розробників">Інструменти для розробників</h3> - -<ul> - <li><span id="result_box" lang="uk"><span>Уникання затримки прокрутки на підказках, наданих АПМ</span></span> ({{bug(1312103)}}).</li> - <li>Додана можливість <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Copy CSS Path">копіювати повний CSS-шлях</a> елементу ({{bug(1323700)}}).</li> - <li><span id="result_box" lang="uk"><span>Інструменти для розробників тепер підтримують css-color-4 ({{bug (1310681)}}).</span></span></li> - <li><span lang="uk"><span>Перегляд розмітки: додавано візуальну підказку між відкриваючим та закритваючим тегами згорнутого вузла ({{bug (1323193)}}).</span></span></li> -</ul> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Видалено {{property_prefix("-moz")}} prefixed variant of {{cssxref(":dir", ":dir()")}} pseudo-class ({{bug(1270406)}}).</li> - <li>{{cssxref("tab-size", "-moz-tab-size")}} does now accept {{cssxref("<length>")}} values ({{bug(943918)}}).</li> - <li>The <code>-moz</code> prefixed version of {{cssxref("text-align-last")}} got removed ({{bug(1276808)}}).</li> - <li>Enable mask longhands on SVG elements ({{bug(1319667)}}).</li> - <li>Додано <code>flow-root</code> значення до {{cssxref("display")}} властивості ({{bug(1322191)}}).</li> - <li>Додано {{cssxref("caret-color")}} властивість ({{bug(1063162)}}).</li> - <li>Реалізовано {{cssxref("place-items")}}/{{cssxref("place-self")}}/{{cssxref("place-content")}} shorthands ({{bug(1319958)}}).</li> - <li>[css-grid] align-self/justify-self:stretch/normal doesn't work on <table> grid items ({{bug(1316051)}}).</li> -</ul> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li>Non-standard {{jsxref("Statements/for_each...in", "for each...in")}} statement is removed only on nightly ({{bug(1293305)}}).</li> - <li>Removed non-standard {{jsxref("ArrayBuffer.slice()")}} (but kept the standardized version {{jsxref("ArrayBuffer.prototype.slice()")}}) ({{bug(1313112)}}).</li> -</ul> - -<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3> - -<h4 id="DOM_HTML_DOM">DOM & HTML DOM</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Canvas">Canvas</h4> - -<p><em>Без змін.</em></p> - -<h4 id="WebGL">WebGL</h4> - -<p><em>Без змін.</em></p> - -<h4 id="IndexedDB">IndexedDB</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Service_Workers">Service Workers</h4> - -<p><em>Без змін.</em></p> - -<h4 id="WebRTC">WebRTC</h4> - -<p><em>Без змін.</em></p> - -<h4 id="New_APIs">New APIs</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Others">Others</h4> - -<p><em>Без змін.</em></p> - -<h3 id="MathML">MathML</h3> - -<p><em>Без змін.</em></p> - -<h3 id="SVG">SVG</h3> - -<ul> - <li>Partly implemented {{domxref("SVGGeometryElement")}} interface ({{bug(1239100)}}).</li> -</ul> - -<h3 id="AudioVideo">Audio/Video</h3> - -<p><em>Без змін.</em></p> - -<h2 id="HTTP">HTTP</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Networking">Networking</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Безпека">Безпека</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<h3 id="Інтерфейси">Інтерфейси</h3> - -<p><em>Без змін.</em></p> - -<h3 id="XUL">XUL</h3> - -<p><em>Без змін.</em></p> - -<p><em>Без змін.</em></p> - -<h3 id="JavaScript_code_modules">JavaScript code modules</h3> - -<ul> - <li>The asynchronous <a href="../../../Add-ons/Add-on_Manager/AddonManager">AddonManager APIs</a> now support {{jsxref("Promise", "Promises")}} as well as callbacks ({{bug(987512)}}.</li> -</ul> - -<h3 id="XPCOM">XPCOM</h3> - -<p><em>Без змін.</em></p> - -<h3 id="Шнше">Шнше</h3> - -<p><em>Без змін.</em></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/uk/versions/53">Cайт сумісності для Firefox 53</a></li> -</ul> - -<h2 id="Більш_ранні_версії">Більш ранні версії</h2> - -<p>{{Firefox_for_developers(53)}}</p> diff --git a/files/uk/mozilla/firefox/releases/54/index.html b/files/uk/mozilla/firefox/releases/54/index.html deleted file mode 100644 index 8a7d95ede3..0000000000 --- a/files/uk/mozilla/firefox/releases/54/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Firefox 54 для розробників -slug: Mozilla/Firefox/Releases/54 -translation_of: Mozilla/Firefox/Releases/54 ---- -<div>{{FirefoxSidebar}}</div><article class="text-content" id="wikiArticle"> -<p>Реліз Firefox 54 від 13 червня 2017. У цій статті наведено перелік ключових змін, корисних для веб-розробників.</p> - -<h2 id="Зміни_для_веб-розробників">Зміни для веб-розробників</h2> - -<h3 id="Інструменти_для_розробників">Інструменти для розробників</h3> - -<p><em>Без змін.</em></p> - -<h3 id="HTML">HTML</h3> - -<p><em>Без змін.</em></p> - -<h3 id="CSS">CSS</h3> - -<p><em>Без змін.</em></p> - -<h3 id="JavaScript">JavaScript</h3> - -<p><em>Без змін.</em></p> - -<h3 id="ІнтерфейсиAPIDOM">Інтерфейси/API/DOM</h3> - -<h4 id="DOM_HTML_DOM">DOM & HTML DOM</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Canvas">Canvas</h4> - -<p><em>Без змін.</em></p> - -<h4 id="WebGL">WebGL</h4> - -<p><em>Без змін.</em></p> - -<h4 id="IndexedDB">IndexedDB</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Service_Workers">Service Workers</h4> - -<p><em>Без змін.</em></p> - -<h4 id="WebRTC">WebRTC</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Нові_API">Нові API</h4> - -<p><em>Без змін.</em></p> - -<h4 id="Інші">Інші</h4> - -<p><em>Без змін.</em></p> - -<h3 id="MathML">MathML</h3> - -<p><em>Без змін.</em></p> - -<h3 id="SVG">SVG</h3> - -<p><em>Без змін.</em></p> - -<h3 id="АудіоВідео">Аудіо/Відео</h3> - -<p><em>Без змін.</em></p> - -<h2 id="HTTP">HTTP</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Мережа">Мережа</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Безпека">Безпека</h2> - -<p><em>Без змін.</em></p> - -<h2 id="Зміни_для_доповненнь_і_розробників_Mozilla">Зміни для доповненнь і розробників Mozilla</h2> - -<h3 id="Інтерфейси">Інтерфейси</h3> - -<p><em>Без змін.</em></p> - -<h3 id="XUL">XUL</h3> - -<p><em>Без змін.</em></p> - -<h3 id="Модулі_JavaScript_коду">Модулі JavaScript коду</h3> - -<p><em>Без змін.</em></p> - -<h3 id="XPCOM">XPCOM</h3> - -<p><em>Без змін.</em></p> - -<h3 id="Інше">Інше</h3> - -<p><em>Без змін.</em></p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-US/versions/54">Cайт сумісності для Firefox 54</a></li> -</ul> - -<h2 id="Більш_ранні_версії">Більш ранні версії</h2> - -<p>{{Firefox_for_developers(53)}}</p> -</article> diff --git a/files/uk/mozilla/firefox/releases/56/index.html b/files/uk/mozilla/firefox/releases/56/index.html deleted file mode 100644 index de30397e9e..0000000000 --- a/files/uk/mozilla/firefox/releases/56/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Firefox 56 for developers -slug: Mozilla/Firefox/Releases/56 -translation_of: Mozilla/Firefox/Releases/56 ---- -<div>{{FirefoxSidebar}}</div><article class="text-content" id="wikiArticle"> -<p>Ця стаття надає інформацію щодо змін в Firefox 56, які стосуються розробників. Firefox 56 є поточною <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta">Beta версією Firefox</a>, і буде довершено <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">26 вересня 2017</a>.</p> - -<article class="text-content" id="wikiArticle"> -<h2 id="Зміни_для_розробників_Web">Зміни для розробників Web</h2> - -<h3 id="Засоби_розробника">Засоби розробника</h3> - -<p><em>Без змін.</em></p> - -<h3 id="HTML">HTML</h3> - -<ul> - <li>Реалізована властивість <code>labels</code> для елементів форми, які можуть мати мітки, наприклад {{domxref("HTMLInputElement.labels")}} ({{bug(556743)}}).</li> - <li>Реалізовано <code><link rel="preload"></code>; див. <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> для деталей ({{bug(1222633)}}).</li> -</ul> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Implemented the proprietary Mozilla-specific {{cssxref("<color>")}} values <code>-moz-win-accentcolor</code> and <code>-moz-win-accentcolortext</code> (see {{bug(1344910)}}), and the proprietary media query <code><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></code> (see {{bug(1379938)}}).</li> -</ul> - -<h3 id="SVG">SVG</h3> - -<p><em>No changes.</em></p> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl API</a> has been enabled on Firefox for Android ({{bug(1344625)}}).</li> -</ul> - -<h3 id="APIs">APIs</h3> - -<h4 id="New_APIs">New APIs</h4> - -<p><em>No changes.</em></p> - -<h4 id="DOM">DOM</h4> - -<ul> - <li>On Mac, {{domxref("Document.hidden")}} is now true when the window is behind another non-translucent application {{bug(1236512)}}.</li> - <li>The {{domxref("Gamepad.displayId")}} property has been implemented ({{bug(1375816)}}).</li> - <li>The {{domxref("CanvasRenderingContext2D.drawImage()")}} method has been updated so that smoothing occurs when downscaling even if <code>imageSmoothingEnabled</code> is <code>false</code>. This is not mandatory as per spec, but follows Chrome's behaviour. See {{bug(1360415)}}.</li> - <li>The {{domxref("PerformanceTiming.secureConnectionStart")}} property has been implemented ({{bug(772589)}}).</li> - <li>Firefox used to accept <code>iso-2022-jp-2</code> sequences silently when an <code>iso-2022-jp</code> {{domxref("TextDecoder.TextDecoder","TextDecoder()")}} was instantiated, however this has now been removed to simplify the API, as no other browsers support it and no pages seem to use it. ({{bug(715833)}}).</li> - <li>The 4ms clamping behaviour of {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval","setInterval()")}} has been updated to be more in line with other browsers, as described in <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Timeouts_throttled_to_%3E4ms">Timeouts throttled to >=4ms</a> ({{bug(1378586)}}).</li> - <li>The <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API's</a> {{domxref("Document.onvisibilitychange")}} handler has been added ({{bug("1333912")}}).</li> -</ul> - -<h4 id="DOM_events">DOM events</h4> - -<ul> - <li>{{domxref("GlobalEventHandlers.onwheel")}} is now available on {{domxref("HTMLElement")}} — it wasn't before ({{bug(1370550)}}).</li> -</ul> - -<h4 id="WebRTC">WebRTC</h4> - -<ul> - <li>Firefox now supports the {{domxref("RTCPeerConnection")}} properties which let you examine the current and pending configurations of the local and remote ends of the connection, to help manage changes in configuration: {{domxref("RTCPeerConnection.currentLocalDescription", "currentLocalDescription")}}, {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription", "currentRemoteDescription")}}, and {{domxref("RTCPeerConnection.pendingRemoteDescription", "pendingRemoteDescription")}}.</li> -</ul> - -<h3 id="Security">Security</h3> - -<p><em>No changes.</em></p> - -<h3 id="Plugins">Plugins</h3> - -<p><em>No changes.</em></p> - -<h3 id="Other">Other</h3> - -<ul> - <li>Gecko now encodes URLs internally as <a href="https://en.wikipedia.org/wiki/Punycode">punycode</a>, to avoid URL encoding problems (see {{bug("945240")}}, also see discussion in {{bug("942074")}}).</li> - <li>Firefox on Windows and Mac OS X can now be made to run in <a href="/en-US/docs/Mozilla/Firefox/Headless_mode">headless mode</a> using the <code>-headless</code> flag (see {{bug(1355150)}} and {{bug(1355147)}}).</li> -</ul> - -<h2 id="Removals_from_the_web_platform">Removals from the web platform</h2> - -<h3 id="HTML_2">HTML</h3> - -<ul> - <li>The {{htmlelement("isindex")}} element has been removed from the HTML parser, and from form submission ({{bug(1266495)}}).</li> - <li>The {{htmlelement("applet")}} element has been removed ({{bug(1279218)}}).</li> -</ul> - -<h3 id="APIs_2">APIs</h3> - -<ul> - <li>The {{domxref("KeyframeEffectReadOnly.spacing")}} property has been removed from the {{SpecName('Web Animations')}} spec, and therefore has been removed from Gecko as well ({{bug(1339690)}}).</li> -</ul> - -<h3 id="SVG_2">SVG</h3> - -<p><em>No changes.</em></p> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<h3 id="WebExtensions">WebExtensions</h3> - -<p><em>No changes.</em></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-US/versions/56">Site Compatibility for Firefox 56</a></li> -</ul> -</article> - -<ul> -</ul> - -<h2 id="Older_versions">Older versions</h2> - -<p>{{Firefox_for_developers(55)}}</p> -</article> diff --git a/files/uk/mozilla/firefox/releases/index.html b/files/uk/mozilla/firefox/releases/index.html deleted file mode 100644 index 76a543b9bb..0000000000 --- a/files/uk/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Firefox developer release notes -slug: Mozilla/Firefox/Releases -tags: - - Firefox - - Примітки До Випуску - - Список змін -translation_of: Mozilla/Firefox/Releases ---- -<div>{{FirefoxSidebar}}</div><p>Нижче ви знайдете посилання на примітки до випуску розробникам для кожної нової версії Firefox. Ці з любв'ю оброблені примітки містять детальну інформацію про те, які функції додані вдосконалені і які помилки були усунені в кожній версії Firefox. Все написано, щоб дати розробникам інформацію, необхідну їм найбільше. Ласкаво просимо.</p> - -<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> diff --git a/files/uk/mozilla/index.html b/files/uk/mozilla/index.html deleted file mode 100644 index cf62cf1852..0000000000 --- a/files/uk/mozilla/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - Advanced - - CodingScripting - - Landing - - Mozilla - - Додатки -translation_of: Mozilla ---- -<p><span class="seoSummary">Наведені нижче статті описують завантаження й побудову коду Mozilla. Також Ви знайдете корисні статті про те, як цей код працює, як здійснювати побудову додатків Mozilla різного призначення тощо.</span></p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/uk/orphaned/learn/how_to_contribute/index.html b/files/uk/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index e971a13d53..0000000000 --- a/files/uk/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Як зробити внесок до навчальної бази MDN? -slug: orphaned/Learn/How_to_contribute -translation_of: Learn/How_to_contribute -original_slug: Learn/How_to_contribute ---- -<div>{{LearnSidebar}}</div> - -<div>Якщо ви тут вперше або після довгих пошуків, це можливо тому що ви зацікавлені зробити власний внесок до області навчання MDN. Це гарні новини!</div> - -<p><span class="seoSummary">На цій сторінці ви знайдете все що вам потрібно для того щоб почати допомагати удосконалювати навчаний контент MDN. Є багато речей, які ви можете робити, залежно від кількості наявного часу та на якому етапі ви знаходитесь e <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">початківець</a>, <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">веб розробник</a>, або <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">вчитель</a>.</span></p> - -<div class="note"> -<p><strong>Примітка</strong>: Ви можете знайти мануал по написанню нової навчальної статті на сторінці <a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Як написати статтю, щоб допомогти людям вивчити Веб</a>.</p> -</div> - -<h2 id="Знайдіть_конкретні_завдання">Знайдіть конкретні завдання</h2> - -<p><strong>Поширеним спосіб, яким люди роблять внески до навчальної бази є читання стеттей, виправлення друкарських помилок та пропозиція покращень. Ми також відаємо додавання прикладів до нашого <a href="https://github.com/mdn/learning-area/">GitHub сховища</a>. Зв'яжіться з нами якщо ви хочете запитати що ще потрібно зробити. </strong></p> - -<p>Додавання внесків це чудовий спосіб розважитися під час вивчення нових речей. Якщо ви коли-небудь відчуваєте себе загубленим або маєте запитання, не соромтесь звернутися до нас в <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Навчальній темі для дискусій</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (see at the bottom of this page for details). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> is the topic driver for the Learning Area — you could also try pinging him directly.</p> - -<p>The following sections provide some general ideas of the types of tasks you can do.</p> - -<h2 id="Im_a_beginner">I'm a beginner</h2> - -<p>That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.</p> - -<p>Here are some suggested ways you can contribute:</p> - -<dl> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Add tags to our articles</a> (<em>5 min</em>)</dt> - <dd>Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">glossary entries</a> and <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">learning articles</a> without any tags to get started.</dd> - <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt> - <dd>As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, please bring it to our attention on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt> - <dd>This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!</dd> - <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt> - <dd>This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.</dd> -</dl> - -<h2 id="Im_a_web_developer">I'm a web developer</h2> - -<p>Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's often more important to be understandable than to be overly precise.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt> - <dd>As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt> - <dd>Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and you're good to go.</dd> - <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt> - <dd>This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours or more</em>)</dt> - <dd>MDN is lacking simple straightforward articles about using web technologies (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, code samples or interactive learning tools</a> (<em>? hours</em>)</dt> - <dd>All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with <a href="http://jsfiddle.net" rel="external">JSFiddle</a> or similar, to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd> -</dl> - -<h2 id="Im_a_teacher">I'm a teacher</h2> - -<p>MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>15 min</em>)</dt> - <dd>Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>1 hour</em>)</dt> - <dd>Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and go for it.</dd> - <dt><a href="/en-US/docs/tag/needsSchema">Add illustrations and/or schematics to articles</a> (<em>1 hour</em>)</dt> - <dd>As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the <a href="/en-US/docs/tag/needsSchema">articles that lack illustrative content</a> and pick one you'd like to create graphics for.</dd> - <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt> - <dd>This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours</em>)</dt> - <dd>We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, <abbr title="Multiple Choice Tests">quizzes</abbr> or interactive learning tools</a> (<em>? hours</em>)</dt> - <dd>All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Create learning pathways</a> (<em>? hours</em>)</dt> - <dd>In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> -</ul> diff --git a/files/uk/orphaned/mdn/community/index.html b/files/uk/orphaned/mdn/community/index.html deleted file mode 100644 index eff5aeb5e8..0000000000 --- a/files/uk/orphaned/mdn/community/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Приєднуйтесь до спільноти MDN -slug: orphaned/MDN/Community -tags: - - Внесок - - Керівництво - - Спільнота -translation_of: MDN/Community -original_slug: MDN/Community ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<div class="summary"> -<p>Мережа Розробників Mozilla (англ. Mozilla Developer Network, скорочено MDN) — це дещо більше, ніж просто вікі: це товариство, що спільними зусиллями створює якісний ресурс для розробників, які використовують відкриті веб-технології.</p> -</div> - -<p>Ми були б вдячні вам за ваш внесок у розвиток MDN, та навіть більш вдячні ми були б за вашу участь в житті спільноти MDN. Долучитися можна у три прості кроки:</p> - -<ol> - <li><a href="/uk/docs/MDN/Contribute/Howto/Create_an_MDN_account">Створіть обліковий запис MDN</a>.</li> - <li><a href="/uk/docs/MDN/Community/Conversations">Приєднайтесь до обговорень</a>.</li> - <li><a href="/uk/docs/MDN/Community/Whats_happening">Стежте за тим, що відбувається</a>.</li> -</ol> - -<h2 id="Як_працює_спільнота">Як працює спільнота</h2> - -<p>Нижче наведено статті, які описують та пояснюють роботу спільноти MDN.</p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/uk/docs/MDN/Community/Roles">Ролі спільноти</a></dt> - <dd class="landingPageList">Існує низка ролей у спільноті MDN, кожна з яких має певні обов'язки.</dd> - <dt class="landingPageList"><a href="/uk/docs/MDN/Community/Doc_sprints">Спринти з документування</a></dt> - <dd class="landingPageList">Це керівництво з організації спринтів з документування. Воно містить поради та настанови від людей, які організовували такі спринти, тож може допомогти вам організувати власні.</dd> - <dt class="landingPageList"><a href="/uk/docs/MDN/Community/Whats_happening">Стежте за тим, що відбувається</a></dt> - <dd class="landingPageList">MDN надано вам спільнотою <a class="external" href="https://wiki.mozilla.org/MDN">Мережі Розробників Mozilla</a>. Тут наведено декілька шляхів поширення інформації про те, що ми робимо.</dd> -</dl> - -<dl> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/uk/docs/MDN/Community/Conversations">Беріть участь в обговореннях</a></dt> - <dd class="landingPageList">Життя спільноти відбувається переважно на сайті MDN, проте "спільнота" існує також завдяки обговоренням (асинхронно) та онлайн чатам і зустрічам (синхронно).</dd> - <dt class="landingPageList"><a href="/uk/docs/MDN/Community/Working_in_community">Працюйте у спільноті</a></dt> - <dd class="landingPageList">Запорукою будь-якого дійсно вагомого внеску до документації MDN є розуміння того, як бути частиною спільноти і працювати злагоджено. Ця стаття надає поради, що допоможуть налагодити взаємодію як з іншими редакторами, так і з командами розробників.</dd> -</dl> -</div> -</div> diff --git a/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html b/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html deleted file mode 100644 index 5fbbfda66b..0000000000 --- a/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Як взяти учать в бета-тестуванні -slug: orphaned/MDN/Contribute/Howto/Be_a_beta_tester -tags: - - MDN Meta -translation_of: MDN/Contribute/Howto/Be_a_beta_tester -original_slug: MDN/Contribute/Howto/Бета_тестування ---- -<div>{{MDNSidebar}}</div><p>Час від часу, коли розробники <a href="/uk/docs/MDN/Kuma">Kuma</a> (платформа MDN) впроваджують якість зміни, ми завчасно надаємо доступ до останніх оновлень тим членам спільноти, що погодились брати участь в бета-тестуванні. Певно, що в режимі бета-тестування щось може не працювати як слід.</p> - -<h2 id="Як_розпочати_тестування">Як розпочати тестування</h2> - -<ol> - <li>Увійдіть до MDN (для цього вам потрібен <a href="/uk/docs/MDN/Contribute/Howto/Create_an_MDN_account">обліковий запис</a>);</li> - <li>Відкрийте випадне меню нагорі під зображенням вашого профілю наведенням вказівника миші;</li> - <li>Натисніть кнопку <strong>«Редагувати профіль»</strong> , щоб потрапити на сторінку редагування облікового запису:<br> - <img alt="" src="https://mdn.mozillademos.org/files/15725/edit-profile.png" style="height: 241px; margin: 20px 10px; width: 250px;"></li> - <li>Встановіть прапорець <strong>«Бета-тестувальник»</strong> нагорі сторінки:<br> - <img alt="Shows the location of the Beta Tester checkbox" src="https://mdn.mozillademos.org/files/15726/checkbox.png" style="box-shadow: #9e9e9e 2px 2px 7px 1px; height: 208px; margin: 20px 10px; width: 997px;"></li> - <li>Та не забудьте застосувати зміни, натиснувши кнопку <strong>«Оприлюднити»</strong> наприкінці сторінки.</li> -</ol> - -<h2 id="Як_припинити_тестування">Як припинити тестування</h2> - -<ol> - <li>Увійдіть до MDN, відкрийте сторінку редагування облікового запису;</li> - <li>Приберіть прапорець <strong>«Бета-тестувальник»</strong>;</li> - <li>Збережіть зміни, натиснувши кнопку <strong>«Оприлюднити»</strong> наприкінці сторінки.</li> -</ol> - -<h2 id="Як_лишити_відгук_щодо_тестування">Як лишити відгук щодо тестування</h2> - -<p>Є два способи залишити свій відгук щодо бета-тестування:</p> - -<ul> - <li>Лишити змістовний відгук на форумі обговорення MDN — дописати у <a href="https://discourse.mozilla-community.org/t/beta-redesign-feedback/16544">Beta feedback thread</a>;</li> - <li>Повідомити про ваду, зробивши такі кроки: - <ol> - <li>Створіть <a href="https://bugzilla.mozilla.org/createaccount.cgi">обліковий запис Bugzilla</a>, як не маєте його;</li> - <li>Створіть <a href="https://bugzilla.mozilla.org/form.mdn#h=detail%7Cbug">звіт про ваду MDN</a> у Bugzilla;</li> - <li>Згадайте слово «beta» в полі <strong>Summary</strong>, щоб допомогти розробникам MDN фільтрувати й упорядковувати звітовані вади;</li> - <li>Заповніть форму звіту наскільки можете повно й докладно;</li> - <li>Натисніть кнопку <strong>Submit</strong>.</li> - </ol> - </li> -</ul> diff --git a/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index f270f727b6..0000000000 --- a/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Як створити обліковий запис MDN -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - MDN Мета - - MDN профіль - - Документація - - Керівництво - - Початківець -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">Щоб редагувати вміст у MDN, вам потрібен профіль MDN. Вам не потрібен профіль, якщо ви хочете лише читати і знайти документи MDN. Цей посібник допоможе вам налаштувати профіль MDN.</span></p> - -<div class="pull-aside"> -<div class="moreinfo"><strong>Чому в MDN потрібна моя електронна адреса?</strong><br> -<br> -Вашу електронну адресу використовують для відновлення облікового запису та, якщо потрібно, адміністратори MDN, щоб зв'язатися з вами про ваш обліковий запис або вашу активність на сайті.<br> -<br> -Крім того, ви можете зареєструватися для отримання сповіщень (як от <a href="/uk/docs/MDN/Contribute/Howto/Watch_a_page">коли конкретні сторінки змінюються</a>) і повідомлення (наприклад, якщо ви вирішите приєднатися до нашої бета-тестової групи, ви можете отримувати електронні листи про нові функції, які потребують тестування).<br> -<br> -Ваша електронна адреса ніколи не відображається в MDN і буде використовуватися тільки відповідно до нашої <a href="https://www.mozilla.org/privacy/websites/">політики конфіденційності</a>.<br> - -<div class="note">Якщо ви входите в MDN через GitHub, і ви використовуєте електронну адресу "noreply" на GitHub, ви <em> не отримуватимете повідомлення від MDN (включаючи сповіщення, підписавшись на сторінки).</em></div> -<em> </em></div> -</div> - -<ol> - <li><em>У верхній частині кожної сторінки MDN ви знайдете кнопку, яка називається <strong>Увійти</strong>. Наведіть курсор (або натисніть на неї, якщо ви відвідуєте з мобільного пристрою), щоб відобразити список служб автентифікації, які ми підтримуємо для входу в MDN.</em></li> - <li><em>Виберіть службу, з якою ви ввійдете. На даний момент доступно лише GitHub. Зверніть увагу: якщо ви виберете GitHub, посилання на ваш профіль GitHub буде включено на вашу загальнодоступну сторінку профілю MDN.</em></li> - <li><em>Дотримуйтесь інструкцій GitHub, щоб підключити свій обліковий запис до MDN.</em></li> - <li><em>Після того, як служба автентифікації поверне вас до MDN, вам буде запропоновано ввести ім'я користувача та адресу електронної пошти. <em>Ваше ім'я користувача буде відображатися публічно, щоб відмітити вас за виконану вами роботу. Не використовуйте свою електронну адресу як своє ім'я користувача</em><strong>.</strong></em></li> - <li><em>Натисніть<strong>Створити свій профіль MDN</strong>.</em></li> - <li><em>Якщо адреса електронної пошти, вказана на кроці 4, не співпадає з вашою службою автентифікації, перевірте свою електронну пошту та натисніть посилання в електронному листі з підтвердженням, яке ми надішлемо вам.</em></li> -</ol> - -<p><em>Це воно! У вас є обліковий запис MDN, і ви можете відразу редагувати сторінки!</em></p> - -<p><em>Ви можете натиснути ваше ім'я у верхній частині будь-якої сторінки MDN, щоб переглянути свій загальнодоступний профіль. Звідти ви можете натиснути <strong>Редагувати</strong> щоб внести зміни або доповнення до вашого профілю.</em></p> - -<div class="note"> -<p><em>Нові імена користувачів не можуть містити пробіли або символ "@". Пам'ятайте, що ваше ім'я користувача буде відображатися публічно, щоб відзначити виконану вами роботу.</em></p> -</div> diff --git a/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index c5c9dc5ea5..0000000000 --- a/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Як робити редакційний огляд -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - MDN Meta - - Документація - - Путівник - - Редакційний огляд -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/uk/docs/MDN")}}</div> - -<p class="summary"><strong>Редакційний огляд </strong>полягає у виправленні одруків, помилок граматики й правопису, слововживання або фразеології. Не всі, хто творить MDN, є фахівцями мовознавства, та попри це вони можуть робити надзвичайно важливий змістовний внесок до статей, що відтак потребують перевірки на охайність та редактури. Саме це й має на меті редакційний огляд.</p> - -<p><span class="seoSummary">Ця стаття пояснює, як здійснювати редакційний огляд, щоб забезпечити охайність, точність та зрозумілість вмісту MDN.</span></p> - -<dl> - <dt>В чому полягає задача?</dt> - <dd>Перевірка на охайність та редактура статей, що відповідним чином позначені.</dd> -</dl> - -<dl> - <dt>Де саме це треба робити?</dt> - <dd>В окремих статтях, що <a href="/uk/docs/needs-review/editorial">позначені</a> як такі, що потребують <em>редакційного огляду</em>.</dd> -</dl> - -<dl> - <dt>Які знання є необхідними для виконання цієї задачі?</dt> - <dd>Належне знання граматики й правопису. Ви маєте пересвідчитися, що текст викладено зрозуміло та недвозначно, що він відповідає чинним граматиці й правопису, а також настановам <a href="/uk/docs/MDN/Contribute/Guidelines/Writing_style_guide">Путівника зі стилю MDN</a>.</dd> -</dl> - -<dl> - <dt>Які кроки задля цього потрібно зробити?</dt> - <dd> - <ol> - <li>Оберіть статтю для перевірки: - <ol> - <li>Відкрийте перелік статей, що <a href="/uk/docs/needs-review/editorial">потребують редакційної перевірки</a>. Це список сторінок, що мають відповідні позначки.</li> - <li>Клацніть на посилання, щоб відкрити відповідну статтю.<br> - <strong>Заувага</strong>: цей перелік оновлюється автоматично, але нечасто, тож він може містити деякі статті, що вже не потребують перевірки. Якщо обрана вами стаття не містить відповідного повідомлення, лишіть її та оберіть іншу.</li> - </ol> - </li> - <li>Перечитайте статтю, звертаючи увагу на можливі одруки, помилки правопису, граматики та слововживання. Можете обрати іншу статтю, якщо обрана вам з будь-яких причин не до вподоби.</li> - <li>Якщо жодної помилки немає, не потрібно відкривати редактор статті, щоб прибрати позначку про необхідність огляду. Натомість зверніться до меню «швидкий огляд» по лівий бік статті:<br> - <img alt="" src="https://mdn.mozillademos.org/files/15371/banner-editorial-review.png" style="height: 116px; margin-bottom: 20px; margin-top: 20px; width: 300px;"></li> - <li>Приберіть відповідну позначку та натисніть <strong>Зберегти</strong>.</li> - <li>Якщо ви знайшли помилки, які слід виправити: - <ol> - <li>Відкрийте <a href="/uk/docs/MDN/Contribute/Editor">редактор MDN</a>, натиснувши кнопку {{FontAwesomeIcon("icon-pencil")}} <strong>Редагувати</strong> на сторінці згори.</li> - <li>Виправте знайдені одруки, пунктуацію та слововживання. Щоб допомогти, вам не конче потрібно виправити все. Проте не забудьте лишити належний <em>коментар до редакції</em>, якщо ви не цілком певні, що виконали вичерпний огляд усієї статті.</li> - <li>Лишіть <strong>коментар до редакції</strong> наприкінці сторінки — щось на кшталт «<em>Редакційний огляд: виправлено одруки, граматичні помилки та правопис</em>». Це допоможе іншим членам спільноти дізнатись, що ви зробили й нащо.</li> - <li>Приберіть позначку <strong>Редакційна</strong> під заголовком <strong>Потрібна перевірка?</strong> — це розташовано просто над розділом <strong>Коментар до редакції</strong>.</li> - <li>Натисніть кнопку {{FontAwesomeIcon("icon-check")}} Оприлюднити.</li> - </ol> - </li> - </ol> - - <div class="note"> - <p><strong>Заувага</strong>: Внесені вами зміни можуть не з'явитися одразу після збереження — подекуди їх обробка може тривати деякий час.</p> - </div> - </dd> -</dl> diff --git a/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 49ee948e9e..0000000000 --- a/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Як зробити опис сторінки -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - MDN Meta - - Посібник - - Як -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div><p><span id="result_box" lang="uk"><span>Ви можете створити опис сторінки на MDN, які будуть використані у різний спосіб, у тому числі в результатах пошукової системи, на інших сторінках MDN, таких як актуальні цільові сторінки та підказки.</span> <span>Це має бути текст, який має сенс як в змісті сторінки, так і при відображенні в інших контекстах, без решти вмісту сторінки.</span></span></p> - -<p>Опис має <span id="result_box" lang="uk"><span>бути чітко визначено на сторінці.</span> <span>Якщо це не чітко визначено, то зазвичай використовується перше речення, яке не завжди є найкращим текстом для цієї мети.</span></span></p> - -<dl> - <dt><strong>У чому полягає завдання?</strong></dt> - <dd><span id="result_box" lang="uk"><span>Позначення тексту в межах сторінки, який можна використати як його опис в інших контекстах;</span> <span>це завдання може включати в себе написання відповідного тексту, якщо це необхідно.</span></span></dd> - <dt><strong>Де це потрібно зробити?</strong></dt> - <dd><span id="result_box" lang="uk"><span>На сторінках, які не мають опису або не дуже чудовий опис.</span></span></dd> - <dt><strong>Що потрібно знати аби виконати завдання?</strong></dt> - <dd>Спроможність <span id="result_box" lang="uk"><span>використання редактора MDN;</span> <span>хороші навички англійського письма;</span> <span>достатнє знайомство з темою сторінки, щоб написати гарне резюме.</span></span></dd> - <dt><strong>Як це зробити покроково?</strong></dt> - <dd> - <ol> - <li><span class="short_text" id="result_box" lang="uk"><span>Виберіть сторінку, для якої потрібно створити опис</span></span>: - <ol> - <li>На <a href="/en-US/docs/MDN/Doc_status">сторінці статусу документації MDN</a>, натисніть на посилання під <strong>Секціями</strong> для теми, про яку ви щось знаєте (наприклад, HTML):<br> - <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> - <li><span id="result_box" lang="uk"><span>На сторінці стану документації теми натисніть заголовок <strong>Сторінки</strong> в таблиці <strong>Описи</strong>.</span> <span>Це приведе вас до переліку всіх сторінок розділу цієї теми;</span> <span>він показує посилання на сторінки в лівій колонці, та на теги та описи у правій колонці</span></span>:<br> - <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> - <li><span id="result_box" lang="uk"><span>Виберіть сторінку, на якій відсутній або поганий опис</span></span>:<br> - <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> - <li>Натисність на посилання аби перейти на сторінку.</li> - </ol> - </li> - <li>Натисніть<strong> Редагувати</strong>, щоб відкрити цю сторінку у редакторі MDN.</li> - <li><span id="result_box" lang="uk"><span>Шукайте одне-два речення, котрі будуть слугувати описом вмісту сторінки.</span> <span>Якщо необхідно, відредагуйте наявний вміст, щоб створити гарний опис або змініть його.</span></span></li> - <li><span id="result_box" lang="uk"><span>Виберіть текст, який слугуватиме описом.</span></span></li> - <li><span id="result_box" lang="uk"><span>У віджеті <em>Стилі</em> на панелі інструментів редактора виберіть</span></span> <strong>SEO Опис</strong>. (<span id="result_box" lang="uk"><span>У джерелі сторінки це створює елемент</span></span> {{HTMLElement("span")}} з класом <code>"seoSummary"</code> навколо обраного тексту.)<br> - <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> - <li><span id="result_box" lang="uk"><span>Збережіть свої зміни з коментарем до редакції.</span> <span>Коментар є необов'язковими, але ми радимо вам надати його.</span> <span>Це полегшить іншим людям роботу по відслідковуванню змін.</span></span></li> - </ol> - - <p> </p> - </dd> -</dl> - -<p> </p> diff --git a/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 101393b973..0000000000 --- a/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Property - - Джава Скріпт - - Масив - - Поле -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p>Поле <strong><code>Array.prototype</code></strong> представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).</p> - -<pre><code>// Якщо JavaScript не реалізовує метод first() початково, -// додайте новий метод, який буде повертати перший елемент масиву. - -if (!Array.prototype.first) { - Array.prototype.first = function() { - return this[0]; - } -}</code> -</pre> - -<h2 id="Опис">Опис</h2> - -<p>Екземпляри {{jsxref("Array")}} успадковуються від <code>Array.prototype</code>. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.</p> - -<p>Маловідомий факт: <code>Array.prototype</code> сам є масивом {{jsxref("Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true -</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Визначає функцію, що створює прототип об'єкта.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Відображає кількість елементів в масиві.</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd>Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<h3 id="Методи_модифікації">Методи модифікації</h3> - -<p>Ці методи модифікують масив:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>Копіює послідовність елементів масиву всередині масиву.</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Видаляє та повертає останній елемент масиву.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Додає один чи більше елементів в кінець масиву та повертає нову довжину масиву.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Видаляє та повертає перший елемент масиву.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Сортує елементи всередині масиву, та повертає цей масив.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Добавляє і/або видаляє елементи з масиву.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.</dd> -</dl> - -<h3 id="Методи_доступу">Методи доступу</h3> - -<p>Ці методи не модифікують масив та повертають якесь його представлення.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Визначає, чи масив містить певний елемент, повертаючи, відповідно, <code>true</code> або <code>false</code>.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Об'єднує всі елементи масиву у рядок.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Витягує частину масиву та повертає новий масив.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> -</dl> - -<h3 id="Методи_перебору">Методи перебору</h3> - -<p>Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля <code>length</code> вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить пари ключ/значення для кожного індекса в даному масиві.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Повертає <code>true</code>, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае <code>true</code>.</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>undefined</code> якщо елемента не знайдено.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>-1</code> якщо елемента не знайдено.</dd> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Викликає функцію для кожного елементу масиву.</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить ключі для кожного індекса в даному масиві.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Повертає <code>true</code>, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> -</dl> - -<h3 id="Загальні_методи_(нестандартні)">Загальні методи (нестандартні)</h3> - -<p>Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле <code>length</code>, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву <code>array[5]</code>). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле <code>length</code> були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле <code>length</code> або синтезовані числові поля.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Початкове визначення</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Додані методи <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex().</code></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Доданий метод <code>includes()</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2> - -<div class="hidden"> -<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> - -<div id="compat-mobile"></div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 6ac139b627..0000000000 --- a/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -tags: - - JavaScript - - Властивість - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>Властивість <code><strong>AsyncFunction.prototype</strong></code> відображає прототип об'єкта {{jsxref("AsyncFunction")}}.</p> - -<h2 id="Опис">Опис</h2> - -<p>Об'єкти {{jsxref("AsyncFunction")}} успадковуються від <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> не може бути змінений.</p> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>Початковим значенням є {{jsxref("AsyncFunction")}}.</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>Вертає "AsyncFunction".</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Початкове визначення у ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/uk/tools/index.html b/files/uk/tools/index.html deleted file mode 100644 index 20a9763e7e..0000000000 --- a/files/uk/tools/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: Firefox інструменти для розробників -slug: Tools -translation_of: Tools -original_slug: Інструменти ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях.</span> <span title="">Щоб отримати останні оновлення інструментів розробника, завантажте </span></span><strong><a href="https://www.mozilla.org/uk/firefox/developer/">Firefox Developer Edition</a>.</strong></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити</span> <span title="">та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці.</span> <span title="">Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC </span></span> (дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community">посилання на спільноту внизу сторінки</a>) <span class="tlid-translation translation" lang="uk"> <span title="">Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, </span></span> <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> <span class="tlid-translation translation" lang="uk"><span title=""> - це гарне місце для публікації.</span></span></p> - -<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то</span></span> наші документи з <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn">вивчення веб-розробки</a> допоможуть вам — дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> та <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Що таке інструменти для розробників в браузері?</a> для гарного старту.</p> - -<h2 id="Основні_інструменти"><span class="tlid-translation translation" lang="uk"><span title="">Основні інструменти</span></span></h2> - -<p>Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> або використовуючи комбінацію клавіш <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> або <kbd>F12</kbd> на Windows та Linux, або <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> на macOS.</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Меню еліпсиса в правій частині</span></span> Developer Tools, <span class="tlid-translation translation" lang="uk"><span title="">містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> - -<table class="standard-table" style="height: 178px; width: 840px;"> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> - <td><span class="tlid-translation translation" lang="uk"><span title="">Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів.</span> <span title="">Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.</span></span></td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> - <td><span class="tlid-translation translation" lang="uk"><span title="">Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки.</span> <span title="">(Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)</span></span></td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> - <td><span class="tlid-translation translation" lang="uk"><span title="">Вмикає режим адаптивного дизайну.</span></span></td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> - <td><span class="tlid-translation translation" lang="uk"><span title="">Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників.</span> <span title="">Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.</span></span></td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> - <td><span class="tlid-translation translation" lang="uk"><span title="">Закриває Інструменти для розробників</span></span></td> - </tr> - </tbody> -</table> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Інспектор_сторінки"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор сторінки</span></span></h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Перегляд та редагування вмісту та макета сторінки.</span> <span title="">Візуалізуйте багато аспектів сторінки, включаючи блочну модель, анімацію та макети сітки.</span></span></p> -</div> - -<div class="column-half"> -<h3 id="Веб-консоль"><span class="tlid-translation translation" lang="uk"><span title="">Веб-консоль</span></span></h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.</span></span></p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="JavaScript_Налагоджувач">JavaScript <span class="tlid-translation translation" lang="uk"><span title="">Налагоджувач</span></span></h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.</span></span></p> -</div> - -<div class="column-half"> -<h3 id="Мережевий_монітор"><span class="tlid-translation translation" lang="uk"><span title="">Мережевий монітор</span></span></h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Дивіться мережеві запити, зроблені під час завантаження сторінки.</span></span></p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Інструменти_продуктивності">Інструменти продуктивності</h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.</span></span></p> -</div> - -<div class="column-half"> -<h3 id="Режим_адаптивного_дизайну">Режим адаптивного дизайну</h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як буде виглядати ваш веб-сайт або додаток на різних пристроях та типах мережі.</span></span></p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Інспектор_доступності"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор доступності</span></span></h3> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.</span></span></p> -</div> -</div> - -<div class="note"> -<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Колективний термін для інтерфейсу, всередині якого живе DevTools, - це</span></span> <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Панель інструментів</a>.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14297/tools.png" style="display: block; height: 383px; margin-left: auto; margin-right: auto; width: 659px;"></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Створення"><span class="tlid-translation translation" lang="uk"><span title="">Створення</span></span></h2> - -<p>Інструменти для створення веб-сайтів і веб-додатків.</p> - -<dl> - <dt><a href="/uk/docs/Tools/Scratchpad">Scratchpad</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.</span></span></dd> - <dt><a href="/uk/docs/Tools/Style_Editor">Style Editor</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та редагуйте стилі CSS для поточної сторінки.</span></span></dd> - <dt><a href="/uk/docs/Tools/Shader_Editor">Shader Editor</a>Mobile</dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються</span></span> <a href="/uk/docs/Web/WebGL">WebGL</a>.</dd> - <dt><a href="/uk/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.</span></span></dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Вивчення_та_налагодження"><span class="tlid-translation translation" lang="uk"><span title="">Вивчення та налагодження</span></span></h2> - -<p>Examine, explore, and debug websites and web apps.</p> - -<dl> - <dt><a href="/uk/docs/Tools/Tools_Toolbox">Панель інструментів (Toolbox)</a></dt> - <dd>The Toolbox provides a single home for most of the developer tools that are built into Firefox.</dd> - <dt><a href="/uk/docs/Tools/Web_Console">Консоль (Console)</a></dt> - <dd><span class="tlid-translation translation"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript</span></span>.</dd> - <dt><a href="/uk/docs/Tools/Page_Inspector">Інспектор сторінки (Page Inspector)</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та змінюйте сторінку в HTML і CSS.</span></span></dd> - <dt><a href="/uk/docs/Tools/Debugger">Зневаджувач JavaScript (Debugger) </a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.</span></span></dd> - <dt><a href="/uk/docs/Tools/Network_Monitor">Монітор мережі (Network Monitor) </a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте мережеві запити, зроблені під час завантаження сторінки.</span></span></dd> - <dt><a href="/uk/docs/Tools/Storage_Inspector">Інспектор сховища (Storage Inspector)</a></dt> - <dd>Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.</dd> - <dt><a href="/uk/docs/Tools/DOM_Inspector">Інспектор DOM і стилю (DOM Inspector)</a></dt> - <dd>Inspect the page's DOM properties, functions, etc.</dd> - <dt><a href="/uk/docs/Tools/GCLI">Developer Toolbar</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Інтерфейс командного рядка для інструментів розробника.</span></span></dd> - <dt><a href="/uk/docs/Tools/Remote_Debugging">Remote Debugging</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.</span></span></dd> - <dt><a href="/uk/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Виберіть колір на сторінці.</span></span></dd> - <dt><a href="/uk/docs/Tools/about:debugging">about:debugging</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Інформаційна панель для налагодження додаткових компонентів і робочих</span></span></dd> - <dt><a href="/uk/docs/Tools/Working_with_iframes">Working with iframes</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Як націлити певний фрейм.</span></span></dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Мобільний"><span class="tlid-translation translation" lang="uk"><span title="">Мобільний</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Інструменти для мобільного розвитку.</span></span></p> - -<dl> - <dt><a href="/uk/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.</span></span></dd> - <dt><a href="/uk/Firefox_OS/Using_the_App_Manager">App Manager</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Менеджер програм замінено на</span></span> <a href="/uk/docs/Tools/WebIDE">WebIDE</a>.</dd> - <dt><a href="/uk/docs/Tools/WebIDE">WebIDE</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою </span></span><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> <span class="tlid-translation translation" lang="uk"><span title="">або реальний пристрій Firefox OS. </span></span>WebIDE <span class="tlid-translation translation" lang="uk"><span title="">є заміною для Менеджера програм, доступного від Firefox 33 і далі.</span></span></dd> - <dt><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.</span></span></dd> - <dt><a href="/uk/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox для Android.</span></span></dd> - <dt><a href="/uk/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.</span></span></dd> - <dt><a href="/uk/docs/Tools/Valence">Valence</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Chrome на Android і Safari на iOS</span></span></dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Продуктивність"><span class="tlid-translation translation" lang="uk"><span title="">Продуктивність</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Діагностика та усунення проблем із продуктивністю.</span></span></p> - -<dl> - <dt><a href="/uk/docs/Tools/Performance">Performance Tool</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.</span></span></dd> - <dt><a href="/uk/docs/Tools/Memory">Memory</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, які об'єкти зберігають пам'ять.</span></span></dd> - <dt><a href="/uk/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте частоту кадрів для вашого сайту.</span></span></dd> - <dt><a href="/uk/docs/Tools/Performance/Waterfall">Waterfall</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, що робить браузер, коли він запускає ваш сайт.</span></span></dd> - <dt><a href="/uk/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">З'ясуйте, де ваш код JavaScript витрачає свій час.</span></span></dd> - <dt><a href="/uk/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, які функції знаходяться в стеку протягом процесу виконання.</span></span></dd> - <dt><a href="/uk/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Виділяє частини сторінки, які перефарбовані у відповідь на події.</span></span></dd> - <dt><a href="/uk/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Див. Події перекомпонування в веб-консолі.</span></span></dd> - <dt><a href="/uk/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як довго завантажуються частини вашого сайту.</span></span></dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Debugging_the_browser">Debugging the browser</h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми.</span> <span title="">Але ви також можете підключити їх до браузера в цілому.</span> <span title="">Це корисно для розробки браузера та додаткових компонентів.</span></span></p> - -<dl> - <dt><a href="/uk/docs/Tools/Browser_Console">Browser Console</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.</span></span></dd> - <dt><a href="/uk/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Приєднайте Інструменти розробника до самого веб-переглядача.</span></span></dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Розширення_devtools"><span class="tlid-translation translation" lang="uk"><span title="">Розширення devtools</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Інструменти розробника розроблені для розширення.</span> <span title="">Додатки Firefox можуть отримати доступ до інструментів розробників і компонентів, які вони використовують для розширення існуючих інструментів і додавання нових інструментів.</span> <span title="">За допомогою віддаленого протоколу налагодження ви можете реалізовувати власні клієнти та сервери відлагодження, дозволяючи налагоджувати веб-сайти, використовуючи власні інструменти або налагоджувати різні цілі за допомогою інструментів Firefox.</span></span></p> - -<dl> - <dt><a href="/uk/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.</span></span></dd> - <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.</span></span></dd> - <dt><a href="/uk/docs/Tools/Editor">Source Editor</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.</span></span></dd> - <dt><a href="/uk/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript.</span> <span title="">Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.</span></span></dd> - <dt><a href="/uk/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Як розширити і налаштувати висновок </span></span><a href="/uk/docs/Tools/Web_Console">Web Console</a> та <a href="/uk/docs/Tools/Browser_Console">Browser Console</a>.</dd> - <dt><a href="/uk/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.</span></span></dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Внесок"><span class="tlid-translation translation" lang="uk"><span title="">Внесок</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.</span></span></p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Вікі-сторінку Mozilla, що пояснює, як взяти участь.</span></span></dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Інструмент, який допомагає знайти помилки для роботи.</span></span></dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Більше_ресурсів"><span class="tlid-translation translation" lang="uk"><span title="">Більше ресурсів</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками.</span> <span title="">Ми включили декілька додатків Firefox у цей список, але для повного списку див</span></span> <a href="https://addons.mozilla.org/uk/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.</span></span></dd> - <dt><a href="/uk/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.</span></span></dd> - <dt><a href="https://addons.mozilla.org/uk/firefox/addon/web-developer/">Web Developer</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.</span></span></dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="https://webmaker.org">Webmaker Tools</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.</span></span></dd> - <dt><a href="https://www.w3.org/Status.html">W3C Validators</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його </span></span><a href="https://validator.w3.org/" title="http://validator.w3.org/">HTML</a> та <a href="https://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> - <dt><a href="http://eslint.org/">ESLint</a></dt> - <dd>JavaScript linting and code analysis tool.</dd> -</dl> -</div> -</div> diff --git a/files/uk/tools/network_monitor/index.html b/files/uk/tools/network_monitor/index.html deleted file mode 100644 index a9d84c2947..0000000000 --- a/files/uk/tools/network_monitor/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Монітор мережі -slug: Tools/Network_Monitor -translation_of: Tools/Network_Monitor -original_slug: Інструменти/Network_Monitor ---- -<div>{{ToolsSidebar}}</div> - -<div><span class="tlid-translation translation"><span title="">Монітор мережі показує всі мережні запити Firefox (наприклад, коли він завантажує сторінку або виконується </span></span><a href="/uk/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a><span class="tlid-translation translation"><span title="">), тривалість і деталі кожного запиту.</span></span></div> - -<h2 id="Відкривання_Монітору_мережі">Відкривання Монітору мережі</h2> - -<p>Є декілька способів відкрити Монітор мережі:</p> - -<ul> - <li>Натиснути <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> на Mac).</li> - <li>З меню Веб-розробки вибрати "Мережа", (що є підменю меню Інструменти на OS X та Linux).</li> - <li>Натиснути на піктограму гайкового ключа (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), яка знаходиться в основному меню або під Гамбургер-меню (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), тоді вибрати "Мережа".</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">У нижній частині вікна браузера з'явиться Монітор мережі.</span> <span title="">Щоб побачити запити, перезавантажте сторінку:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p> - -<p><span class="tlid-translation translation"><span title="">Поки панель інструментів відкрита, Монітор мережі записує мережні запити, навіть якщо він сам не вибраний.</span> <span title="">Це значить, що Ви можете почати налагодження сторінки, наприклад, у Веб-консолі, а потім перейти до Монітора мережі, щоб побачити мережну активність без перезавантаження сторінки.</span></span></p> - -<h2 id="Огляд_користувацького_інтерфейсу_(UI)">Огляд користувацького інтерфейсу (UI)</h2> - -<p>Користувацький інтерфейс складається з чотирьох основних частин :</p> - -<ul> - <li>Основний екран містить <a href="/uk/docs/Tools/Network_Monitor/Toolbar">панель інструментів</a>, <a href="/uk/docs/Tools/Network_Monitor/request_list">список мережних запитів</a> та <a href="/uk/docs/Tools/Network_Monitor/request_details">панель подробиць запитів</a>:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p> - -<ul> - <li><a href="/uk/docs/Tools/Network_Monitor/Performance_analysis">Аналіз швидкодії</a> відображається у окремому вікні:</li> -</ul> - -<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> - -<h2 id="Робота_з_Монітором_мережі">Робота з Монітором мережі</h2> - -<p><span class="tlid-translation translation"><span title="">Наступні статті охоплюють різні аспекти використання Монітора мережі</span></span>:</p> - -<ul> - <li><a href="/uk/docs/Tools/Network_Monitor/Toolbar">Панель інструментів</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/request_list">Список мережних запитів</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/request_details">Подробиці мережних запитів</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/recording">Запис мережного трафіку</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Performance_Analysis">Аналіз швидкодії</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/performance_analysis/index.html b/files/uk/tools/network_monitor/performance_analysis/index.html deleted file mode 100644 index b9c6e4dc65..0000000000 --- a/files/uk/tools/network_monitor/performance_analysis/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Аналіз швидкодії -slug: Tools/Network_Monitor/Performance_Analysis -translation_of: Tools/Network_Monitor/Performance_Analysis -original_slug: Інструменти/Network_Monitor/Performance_Analysis ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Монітор мережі містить інструмент Аналізу швидкодії, який допоможе Вам показати, скільки часу необхідно потратити браузеру для завантаження різних частин Вашого сайту.</span></span></p> - -<h2 id="Використання_інструменту_Аналізу_швидкодії">Використання інструменту Аналізу швидкодії</h2> - -<p><span class="tlid-translation translation"><span title="">Для запуску інструменту Аналізу швидкодії, натисніть значок секундоміра на <a href="/uk/docs/Tools/Network_Monitor/Toolbar">панелі інструментів</a>.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">(Крім того, якщо Ви тільки що відкрили Монітор мережі, і він ще не заповнений списком запитів, у головному вікні з'явиться значок секундоміра.)</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Після цього Монітор мережі завантажує сайт двічі: один раз з пустим кешем браузера і один раз із запущеним кешем браузера.</span> <span title="">Це імітує роботу першого разу, коли користувач відвідує ваш сайт, і наступні відвідування.</span> Інструмент<span title=""> відображає результати для кожного запуску поруч, або вертикально, якщо вікно веб-переглядача звужене:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<p><span class="tlid-translation translation"><span title="">Результати для кожного виконання підсумовуються в таблиці та круговій діаграмі.</span> <span title="">Таблиці групують ресурси за типом і показують загальний розмір кожного ресурсу і загальний час, необхідний для їх завантаження.</span> <span title="">Супровідна до таблиць кругова діаграма показує відносний розмір кожного типу ресурсу.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Щоб повернутися до списку мережних запитів Монітору мережі натисніть кнопку "Назад", що знаходиться ліворуч.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Якщо натиснути на фрагмент "пирога", Ви перейдете до Монітора мережі для цього запуску, а фільтр автоматично буде застосовано для перегляду <a href="/uk/docs/Tools/Network_Monitor/request_list#Filtering_requests">лише цього типу ресурсу</a>.</span></span></p> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> - -<ul> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/recording/index.html b/files/uk/tools/network_monitor/recording/index.html deleted file mode 100644 index 5cab741995..0000000000 --- a/files/uk/tools/network_monitor/recording/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Записування мережного трафіку -slug: Tools/Network_Monitor/recording -translation_of: Tools/Network_Monitor/recording -original_slug: Інструменти/Network_Monitor/recording ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Можна призупинити та відновити моніторинг мережного трафіку за допомогою кнопки паузи.</span></span></p> - -<h2 id="Призупинення_та_продожвення_запису_журналу_мережі"><span class="tlid-translation translation"><span title="">Призупинення та продожвення запису журналу мережі</span></span></h2> - -<p><span class="tlid-translation translation"><span title="">У Монітора мережі є кнопка, яка призупиняє та відновлює запис мережного трафіку поточної сторінки.</span> <span title="">Це корисно в ситуаціях, коли, наприклад, Ви намагаєтеся отримати стабільний вигляд сторінки для цілей налагодження, але за нормальних обставин список продовжує наповнюватися внаслідок постійних мережних запитів.</span> <span title="">Кнопка паузи дозволяє переглядати певний знімок.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Цю кнопку можна знайти в лівій частині головної панелі інструментів Монітору мережі. Вона виглядає як типова кнопка паузи </span></span>— <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> - -<p><span class="tlid-translation translation"><span title="">Ви можете побачити її тут у контексті:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> - -<p><span class="tlid-translation translation"><span title="">Натиснувши цю кнопку, вона змінюється на піктограму відтворення. Продовжити запис мережного трафіку можна шляхом повторного її натискання.</span></span></p> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі:</span></span></p> - -<ul> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/request_details/index.html b/files/uk/tools/network_monitor/request_details/index.html deleted file mode 100644 index 09440d641b..0000000000 --- a/files/uk/tools/network_monitor/request_details/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Подробиці мережних запитів -slug: Tools/Network_Monitor/request_details -translation_of: Tools/Network_Monitor/request_details -original_slug: Інструменти/Network_Monitor/request_details ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Панель </span></span>подробиць мережних запитів викликається при виборі (натисканні) <span class="tlid-translation translation"><span title="">мережного запиту у списку.</span> <span title="">Ця панель надає більш детальну інформацію про запит.</span></span></p> - -<h2 id="Подробиці_мережних_запитів">Подробиці мережних запитів</h2> - -<p><span class="tlid-translation translation"><span title="">Натискання на рядку відображає нову панель у правій частині Монітора мережі, яка надає більш детальну інформацію про запит.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p> - -<p><span class="tlid-translation translation"><span title="">Вкладки у верхній частині цієї області дозволяють переключатися між наступними сторінками:</span></span></p> - -<ul> - <li><strong>Заголовки (Headers)</strong></li> - <li><strong>Куки (Cookies)</strong></li> - <li><strong>Параметри (Params)</strong></li> - <li><strong>Відповідь (Response)</strong></li> - <li><strong>Кеш (Cache)</strong></li> - <li><strong>Розклад (Timings)</strong></li> - <li><strong>Безпека (Security) </strong>(тільки для захищених сторіок)</li> - <li><strong>Трасування стека (Stack trace)</strong> ( <span class="tlid-translation translation"><span title="">тільки коли запит має трасування стека, наприклад,</span> <span title="">скрипт, викликаний іншим сценарієм</span></span>). <span class="tlid-translation translation"><span title="">Ця інформація доступна починаючи з </span></span>Firefox 55.</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">Натискання крайньої правої піктограми на </span></span><a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a> ховає <span class="tlid-translation translation"><span title="">панель подробиць.</span></span></p> - -<h3 id="Заголовки_(Headers)">Заголовки <strong>(Headers)</strong></h3> - -<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено основну інформацію про запит:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<p>Ця інформація містить:</p> - -<ul> - <li><strong>Запит URL (Request URL)</strong></li> - <li><strong>Спосіб запиту (Request method)</strong></li> - <li><strong>Віддалена адреса (Remote IP address)</strong> і <strong>port</strong></li> - <li><strong>Код стану (Status code</strong>) <span class="tlid-translation translation"><span title="">з піктограмою знаку запитання, що посилається на документ MDN, щоб отримати докладнішу інформацію (якщо вона доступна)</span></span></li> - <li><strong>Заголовки запиту</strong> і <strong>заголовки відповіді</strong> <strong>(HTTP request</strong> and <strong>response headers</strong>) що були передані</li> - <li>Кнопка <strong>Редагувати і надіслати заново</strong> (<strong>Edit and Resend</strong>) що викликає відповідну <a href="/uk/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">команду</a></li> - <li>Кнопка <strong>Необроблені заголовки (Raw headers)</strong> для відображення необроблених заголовків запитів і відповідей</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">Ви можете відфільтрувати відображені заголовки:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<p><span class="tlid-translation translation"><span title="">Поруч із кожним заголовком у рядку коду статусу з'явиться піктограма знаку питання - це посилання на додаткову інформацію про цей код статусу в <a href="/uk/docs/Web/HTTP/Headers">документації MDN заголовків HTTP</a>.</span></span></p> - -<h3 id="Куки_(Cookies)">Куки (Cookies)</h3> - -<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено повну інформацію про всі файли cookie, надіслані разом із запитом або відповіддю:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> - -<p><span class="tlid-translation translation"><span title="">Як і у заголовках, тут можна відфільтрувати список файлів куків, що потрібно показати.</span> <span title="">Відображається повний список атрибутів кука (див. Наведений нижче знімок екрана з прикладів cookie Response з додатковими атрибутами).</span></span></p> - -<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> - -<p><span class="tlid-translation translation"><span title="">Атрибут </span></span><code>samesite</code> <span class="tlid-translation translation"><span title="">доступний починаючи з Firefox 62 </span></span>({{bug("1452715")}}).</p> - -<h3 id="Параметри_(Params)">Параметри (Params)</h3> - -<p><span class="tlid-translation translation"><span title="">На цій вкладці відображаються параметри GET і дані POST запиту:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<h3 id="Відповідь_(Response)">Відповідь (Response)</h3> - -<p><span class="tlid-translation translation"><span title="">Повний зміст відповіді.</span> <span title="">Якщо відповідь - HTML, JS або CSS, вона буде показана як текст:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<p><span class="tlid-translation translation"><span title="">Якщо відповідь у форматі JSON, вона буде відображатися як об'єкт:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p> - -<p><span class="tlid-translation translation"><span title="">Якщо відповідь - це зображення, на вкладці відображається попередній перегляд:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<h4 id="Кеш_(Cache)">Кеш (Cache)</h4> - -<p><span class="tlid-translation translation"><span title="">Якщо відповідь буде кешованою (тобто 304), на вкладці Кеш буде показано відомості про цей кешований ресурс.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p> - -<p>Ці деталі містять:</p> - -<ul> - <li><strong>Остання вибірка</strong> <strong>(Last fetched):</strong> <span class="tlid-translation translation"><span title="">Дата останньої вибірки ресурсу</span></span> </li> - <li><strong>Число вибірок</strong> <strong>(Fetched count):</strong> <span class="tlid-translation translation"><span title="">Кількість разів вибору ресурсу у поточному сеансі </span></span></li> - <li><strong>Розмір даних</strong> <strong>(Data size):</strong> Розмір ресурсу .</li> - <li><strong>Остання зміна (Last modified):</strong> <span class="tlid-translation translation"><span title="">Дата останньої зміни ресурсу</span></span></li> - <li><strong>Термін дії</strong> <strong>(Expires):</strong> <span class="tlid-translation translation"><span title="">Дата закінчення терміну дії ресурсу</span></span></li> - <li><strong>Пристрій</strong> (<strong>Device):</strong> <span class="tlid-translation translation"><span title="">Пристрій, з якого був отриманий ресурс (наприклад, "диск").</span></span></li> -</ul> - -<h4 id="HTML_перегляд_(preview)">HTML перегляд (preview)</h4> - -<p><span class="tlid-translation translation"><span title="">Якщо відповідь є HTML, на вкладці "Відповідь" ("Response"), вище "Корисного навантаження на відповідь" (</span></span>response payload<span class="tlid-translation translation"><span title="">), з'являється попередній візуальний перегляд HTML.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p> - -<h3 id="Розклад_(Timings)">Розклад (Timings)</h3> - -<p><span class="tlid-translation translation"><span title="">Вкладка «Розклад» (</span></span>Timings<span class="tlid-translation translation"><span title="">) розбиває мережний запит на наступний набір етапів, означених у специфікації </span></span><a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Архіву HTTP</a> <span class="tlid-translation translation"><span title="">:</span></span></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Назва</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>Заблоковано (Blocked)</td> - <td> - <p><span class="tlid-translation translation"><span title="">Час, проведений в черзі в очікуванні мережного підключення.</span></span></p> - - <p><span class="tlid-translation translation"><span title="">Браузер накладає обмеження на кількість одночасних з'єднань, які можуть бути зроблені до одного серверу.</span> <span title="">Типово, у Firefox це значення рівне 6, але його можна змінити за допомогою налаштувань </span></span> <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> <span class="tlid-translation translation"><span title="">.</span> <span title="">Якщо використовуються всі підключення, браузер не може завантажувати більше ресурсів, доки з'єднання не буде вивільнено.</span></span></p> - </td> - </tr> - <tr> - <td>Розв'язання DNS (DNS resolution)</td> - <td><span class="tlid-translation translation"><span title="">Час, що потребувався для розв'язання імені хоста.</span></span></td> - </tr> - <tr> - <td>З'єднання (Connecting)</td> - <td><span class="tlid-translation translation"><span title="">Час, що потребувався для створення з'єднання TCP.</span></span></td> - </tr> - <tr> - <td>Надсилання (Sending)</td> - <td><span class="tlid-translation translation"><span title="">Час, що потребувався для передачі HTTP-запиту на сервер.</span></span></td> - </tr> - <tr> - <td>Очікування (Waiting)</td> - <td><span class="tlid-translation translation"><span title="">Очікування відповіді від сервера.</span></span></td> - </tr> - <tr> - <td>Одержання (Receiving)</td> - <td><span class="tlid-translation translation"><span title="">Час, що потребувався для читання всієї відповіді від сервера (або кешу).</span></span></td> - </tr> - </tbody> -</table> - -<p>Ця вкладка <span class="tlid-translation translation"><span title=""> представляє більш детальний, анотований, перегляд смуги часу для цього запиту, що показує, як загальний час очікування розділяється на різні етапи:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p> - -<h3 id="Безпека_(Security)">Безпека (Security)</h3> - -<p><span class="tlid-translation translation"><span title="">Якщо сайт обслуговується через HTTPS, Ви отримуєте додаткову вкладку під назвою "Безпека" (</span></span>"Security"<span class="tlid-translation translation"><span title="">).</span> Вона <span title="">містить відомості про захищене з'єднання, що використовується, включно з назвою протоколу, набору шифрів і деталями сертифікату:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> - -<p><span class="tlid-translation translation"><span title="">На вкладці "Безпека" відображається попередження про слабкі місця безпеки.</span> <span title="">Наразі він попереджає про два слабкі місця:</span></span></p> - -<ol> - <li>Використання SSLv3 замість TLS</li> - <li>Використання шифру RC4</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> - -<h3 id="Трасування_стека_(Stack_trace)">Трасування стека (Stack trace)</h3> - -<p>На цій вкладці відображається трасування <span class="tlid-translation translation"><span title="">стеків для відповідей, які мають стекові сліди.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span>:</p> - -<ul> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/request_list/index.html b/files/uk/tools/network_monitor/request_list/index.html deleted file mode 100644 index 7c39dc0e95..0000000000 --- a/files/uk/tools/network_monitor/request_list/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Список мережних запитів -slug: Tools/Network_Monitor/request_list -translation_of: Tools/Network_Monitor/request_list -original_slug: Інструменти/Network_Monitor/request_list ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Тут відображається список всіх запитів мережі, зроблених під час завантаження сторінки.</span></span></p> - -<h2 id="Список_мережних_запитів">Список мережних запитів</h2> - -<p>Типово, Монітор мережі показує список всіх мережних запитів, <span class="tlid-translation translation"><span title="">зроблених під час завантаження сторінки.</span> <span title="">Кожен запит відображається у своєму рядку:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;"><span class="tlid-translation translation"><span title="">Типово, кожного разу, як Ви переходите до нової сторінки або перезавантажуєте поточну сторінку, мережний монітор очищається.</span> <span title="">Ви можете змінити цю поведінку, встановивши прапорець "Постійне журналювання" (</span></span>"Enable persistent logs"<span class="tlid-translation translation"><span title="">) в </span></span><a href="https://developer.mozilla.org/uk/docs/Tools_Toolbox#Common_preferences">Налаштуваннях</a><span class="tlid-translation translation"><span title="">.</span></span></p> - -<h3 id="Стовпці_для_мережних_запитів">Стовпці для мережних запитів</h3> - -<p><span class="tlid-translation translation"><span title="">Ви можете показувати/приховувати потрібні стовпці шляхом їх вибору в контекстному меню (викликається правою кнопкою миші над заголовком) .</span> <span title="">Пункт контекстного меню "Скинути стовпці" (</span></span>"Reset Columns"<span class="tlid-translation translation"><span title="">) призначений для скидання переліку стовпців в початкову конфігурацію.</span> Нижче наведено перелік <span title="">усіх доступних стовпців:</span></span></p> - -<ul> - <li><strong>Стан (Status)</strong>: повернений код статусу(стану) HTTP. Значення статусу супроводжується кольоровими піктограмами: - - <ul> - <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">синій кружечок для інформаційних (коди 1XX). Зокрема, статус 101 (перемикання протоколів) для оновлень <a href="/uk/docs/Web/API/WebSocket">WebSocket</a>.</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> зелений кружечок для успішних (2XX codes)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> помаранчевий трикутник для перенаправлень (3XX)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> червоний квадрат для помилок (4XX та 5XX)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> <span class="tlid-translation translation"><span title="">сіре коло для відповідей, отриманих з кешу браузера</span></span></li> - </ul> - Значення <span class="tlid-translation translation"><span title="">коду відображається відразу після піктограми</span></span>.</li> - <li><strong>Спосіб (</strong>Метод, <strong>Method)</strong>: Метод запиту HTTP, який використовується.</li> - <li><strong>Файл (File)</strong>: Базове ім'я файлу, що запитується.</li> - <li><strong>Протокол (Protocol):</strong> Мережний протокол, що використовується для передачі даних. Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> - <li><strong>Схема (Scheme):</strong> Схема (https/http/ftp/...) запитуваного шляху. Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> - <li><strong>Домен (Domain)</strong>: Домен запитуваного шляху. - <ul> - <li>Якщо запит використовує SSL/TLS <span class="tlid-translation translation"><span title="">і в підключенні виявлені слабкі місця в безпеці (як слабкі шифри), поруч із доменом Ви побачите трикутник попередження.</span> <span title="">Докладніше інформацію про цю проблему можна побачити на</span></span> <a href="/uk/docs/Tools/Network_Monitor#Security">вкладці "Безпека"</a>.</li> - <li><span class="tlid-translation translation"><span title="">Наведіть курсор на "Домен", щоб переглянути його IP-адресу</span></span> </li> - <li><span class="tlid-translation translation"><span title="">Біля Домену є значок, який надає додаткову інформацію про стан безпеки для цього запиту.</span> <span title="">Див. </span></span><a href="/uk/docs/Tools/Network_Monitor#Security_icons">піктограми безпеки</a>.</li> - </ul> - </li> - <li><strong>Віддалений IP (Remote IP)</strong>: <span class="tlid-translation translation"><span title="">IP-адреса сервера, що відповідає на запит.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55. </li> - <li><strong>Причина (Cause)</strong>: <span class="tlid-translation translation"><span title="">Причина ініціювання мережного запиту, наприклад, запит XHR </span></span>{{htmlelement("img")}}, скрипт, запит скрипту на отримання зображення і т.п. Доступний, починаючи з Firefox 49.</li> - <li><strong>Тип (Type)</strong>: <code>Content-type</code> відповіді.</li> - <li><strong>Куки (Cookies):</strong> <span class="tlid-translation translation"><span title="">Номер кука запиту, пов'язаного із запитом.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> - <li><strong>Встановлювати куки (Set-Cookies):</strong> <span class="tlid-translation translation"><span title="">Номер кука відповіді, пов'язаного із запитом.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> - <li><strong>Передано (Transferred)</strong>: <span class="tlid-translation translation"><span title="">Кількість байтів, які були фактично передані для завантаження ресурсу.</span> <span title="">Це значення буде менше, ніж в стовпці "Розмір", якщо ресурс було стиснуто.</span> <span title="">Починаючи з Firefox 47, якщо ресурс було отримано з кешу </span></span><a href="/uk/docs/Web/API/Service_Worker_API">service worker</a><span class="tlid-translation translation"><span title="">, у цій комірці відображається напис "кешовано</span></span><span class="tlid-translation translation"><span title="">".</span></span></li> - <li><strong>Розмір (Size)</strong>: Розмір переданого ресурсу.</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">Кожен стовпець панелі інструментів у верхній частині має мітку, натискання на якій за даним стовпцем сортуються всі запити.</span></span></p> - -<h4 id="Ескізи_зображень">Ескізи зображень</h4> - -<p><span class="tlid-translation translation"><span title="">Якщо запит стосується зображення, наведення на назву файлу показує в підказці попередній перегляд зображення :</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16257/image_preview.png" style="border: 1px solid black; display: block; height: 334px; margin: 0px auto; width: 900px;"></p> - -<h4 id="Піктограми_безпеки">Піктограми безпеки</h4> - -<p>У стовпці "Домен" Монітору мережі відображаються піктограми:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16194/network_message_list_63.png" style="border: 1px solid black; display: block; height: 191px; margin: 0 auto; width: 845px;"></p> - -<p><span class="tlid-translation translation"><span title="">Це надає додаткову інформацію про стан безпеки запиту:</span></span> </p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Піктограма</th> - <th scope="col">Значення</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> - <td>HTTPS</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> - <td>Слабкий HTTPS (наприклад, було використано слабке шифрування)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> - <td>Помилковий HTTPS (наприклад, сертифікат є недійсним)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> - <td>HTTP</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> - <td>Localhost</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td> - <td><span class="tlid-translation translation"><span title="">Вказує на те, що URL належить до відомого трекера, тому буде заблокований, якщо ввімкнено блокування вмісту.</span></span></td> - </tr> - </tbody> -</table> - -<p><span class="tlid-translation translation"><span title="">Для слабких і помилкових запитів HTTPS більш детальну інформацію про проблему можна побачити у</span></span> <a href="/uk/docs/Tools/Network_Monitor#Security">вкладці "Безпека</a>".</p> - -<h4 id="Стовпець_Причина">Стовпець "Причина"</h4> - -<p><span class="tlid-translation translation"><span title="">У стовпці "Причина" вказано причину запиту.</span> <span title="">Зазвичай це значення досить очевидне, і воно корелюється зі стовпцем "Тип".</span> <span title="">Найпоширенішими значеннями є:</span></span></p> - -<ul> - <li>document: вихідний документ HTML.</li> - <li>img: елемент {{htmlelement("img")}} .</li> - <li>imageset: елемент {{htmlelement("img")}} .</li> - <li>script: файл JavaScript .</li> - <li>stylesheet: файл CSS .</li> -</ul> - -<h3 id="Шкала_часу_(Timeline)">Шкала часу (Timeline)</h3> - -<p><span class="tlid-translation translation"><span title="">У списку запитів також відображається шкала часу для різних частин кожного запиту.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16259/timeline.png" style="border: 1px solid black; display: block; height: 331px; margin: 0px auto; width: 900px;"></p> - -<p><span class="tlid-translation translation"><span title="">Кожній часовій шкалі надається горизонтальне положення у своєму рядку відносно інших мережних запитів. Таким чином, можна побачити загальний час, необхідний для завантаження сторінки.</span> <span title="">Більш детальну інформацію про кольорове кодування, що використовується тут, див. у розділі </span></span><a href="/uk/docs/Tools/Network_Monitor#Timings">Часові діаграми</a><span class="tlid-translation translation"><span title="">.</span></span></p> - -<p>Починаючи з Firefox 45, шкала часу також містить дві вертикальні лінії:</p> - -<ul> - <li><a href="/uk/docs/">синя </a>лінія мітить точку в якій запускається сторінкова подія <code><a href="/uk/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> .</li> - <li><span style="color: red;">червона</span> лінія мітить точку в якій запускається сторінкова подія <a href="/uk/docs/Web/Events/load">load</a> .</li> -</ul> - -<h3 id="Фільтрація_запитів">Фільтрація запитів</h3> - -<p><span class="tlid-translation translation"><span title="">Можна фільтрувати запити за типом вмісту, за типом запитів XMLHttpRequests або WebSocket, за URL, або за властивостями запиту.</span></span> </p> - -<h4 id="Фільтрація_за_типом_вмісту">Фільтрація за типом вмісту</h4> - -<p><span class="tlid-translation translation"><span title="">Щоб відфільтрувати за типом вмісту, використовуйте відповідні кнопки з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> - -<h4 id="Фільтрація_XHR">Фільтрація XHR</h4> - -<p>Для відображення виключно запитів {{Glossary("XHR (XMLHttpRequest)", "XHR")}}, використовується кнопка "XHR" <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> - -<h4 id="Фільтрація_WebSockets">Фільтрація WebSockets</h4> - -<p>Для відображення виключно з'єднань WebSocket, використовується кнопка "WS" <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> - -<p><span class="tlid-translation translation"><span title="">Крім того, може бути корисним додатковий компонент </span></span><a href="https://addons.mozilla.org/uk/firefox/addon/websocketsniff">WebSocket Sniffer</a><span class="tlid-translation translation"><span title="">.</span></span> </p> - -<h4 id="Фільтрація_за_URL">Фільтрація за URL</h4> - -<p>Для фільтрації за URL, використовуйте пошукове поле <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>. Клацніть в межах пошукового поля, або натисніть <kbd>Ctrl</kbd> + <kbd>F</kbd> (або <kbd>Cmd</kbd> + <kbd>F</kbd> в Mac), почніть введення. <span class="tlid-translation translation"><span title="">Список мережних запитів буде відфільтровано для включення лише тих запитів, які містять рядок фільтра в полях "Домен" або "Файл".</span></span> </p> - -<p>Починаючи з Firefox 45, можна фільтрувати запити<span class="tlid-translation translation"><span title="">, що <em>не </em>містять означені рядки фільтрів, заповнивши запит оператором "-".</span> <span title="">Наприклад, запит "-google.com" покаже всі запити, що не містять "google.com" у своїй URL-адресі.</span></span> </p> - -<h4 id="Фільтрація_за_властивістю">Фільтрація за властивістю</h4> - -<p>Щоб відфільтрувати за певними властивостями запиту, скористайтеся пошуковим полем <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>. Пошукове поле розпізнає вказані ключові слова, які можна використовувати для фільтрації запитів за вказаними властивостями запиту. За цими ключовими словами слідують двокрапка та відповідне значення фільтра. Значення фільтра нечутливе до регістру. Встановлення мінуса (<code>-</code>) скасовує фільтр. Ви можете комбінувати різні фільтри, розділяючи їх пробілами.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Ключове слово</th> - <th scope="col">Значення</th> - <th scope="col">Приклад</th> - </tr> - <tr> - <td><code>status-code</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси з вказаним кодом статусу HTTP.</span></span> </td> - <td><code>status-code:304</code></td> - </tr> - <tr> - <td><code>method</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси з вказаним методом запиту HTTP.</span></span></td> - <td><code>method:post</code></td> - </tr> - <tr> - <td><code>domain</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що надходять з вказаного домену.</span></span></td> - <td><code>domain:mozilla.org</code></td> - </tr> - <tr> - <td><code>remote-ip</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що надходять з сервера зі вказаним IP.</span></span></td> - <td><code>remote-ip:63.245.215.53</code><br> - <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> - </tr> - <tr> - <td><code>cause</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що відповідають вказаному типу причини.</span> <span title="">Типи можна знайти в описі </span></span><a href="#Cause_column">стовпця "Причина" </a></td> - <td><code>cause:js</code><br> - <code>cause:stylesheet<br> - cause:img</code></td> - </tr> - <tr> - <td><code>transferred</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають вказаний, або з близьким до вказаного розмір переданих даних. Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</td> - <td><code>transferred:1k</code></td> - </tr> - <tr> - <td><code>size</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають вказаний розмір (після розпакування) або розмір, близький до вказаного.</span> <span title="">Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</td> - <td><code>size:2m</code></td> - </tr> - <tr> - <td><code>larger-than</code></td> - <td> - <p><span class="tlid-translation translation"><span title="">Показує ресурси, які перевищують вказаний розмір у байтах.</span> <span title="">Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</p> - </td> - <td><code>larger-than:2000</code><br> - <code>-larger-than:4k</code></td> - </tr> - <tr> - <td><code>mime-type</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, які відповідають вказаному типу MIME.</span></span></td> - <td><code>mime-type:text/html</code><br> - <code>mime-type:image/png</code><br> - <code>mime-type:application/javascript</code></td> - </tr> - <tr> - <td><code>is</code></td> - <td><code>is:cached</code> і <code>is:from-cache</code> <span class="tlid-translation translation"><span title="">показує лише ресурси, що надходять з кешу.</span></span><br> - <code>is:running</code> <span class="tlid-translation translation"><span title="">показує лише ресурси, які зараз передаються.</span></span></td> - <td><code>is:cached</code><br> - <code>-is:running</code></td> - </tr> - <tr> - <td><code>scheme</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, передані за вказаною схемою.</span></span></td> - <td><code>scheme:http</code></td> - </tr> - <tr> - <td><code>has-response-header</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, які містять вказаний заголовок відповіді HTTP.</span></span></td> - <td><code>has-response-header:cache-control</code><br> - <code>has-response-header:X-Firefox-Spdy</code></td> - </tr> - <tr> - <td><code>set-cookie-domain</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code> <span class="tlid-translation translation"><span title="">з атрибутом </span></span><code>Domain</code><span class="tlid-translation translation"><span title="">, що відповідає вказаному значенню.</span></span></td> - <td><code>set-cookie-domain:.mozilla.org</code></td> - </tr> - <tr> - <td><code>set-cookie-name</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code><span class="tlid-translation translation"><span title=""> з ім'ям, що відповідає вказаному значенню.</span></span></td> - <td><code>set-cookie-name:_ga</code></td> - </tr> - <tr> - <td><code>set-cookie-value</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code><span class="tlid-translation translation"><span title=""> зі значенням, що відповідає вказаному.</span></span></td> - <td><code>set-cookie-value:true</code></td> - </tr> - <tr> - <td><code>regexp</code></td> - <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають URL, що відповідає вказаному </span></span> {{Glossary("regular expression")}}.</td> - <td><code>regexp:\d{5}<br> - regexp:mdn|mozilla</code></td> - </tr> - </thead> -</table> - -<h3 id="Контекстне_меню">Контекстне меню</h3> - -<p><span class="tlid-translation translation"><span title="">Контекстне меню рядка містить наступні пункти:</span></span></p> - -<ul> - <li>Копіювати URL (Copy URL)</li> - <li>Копіювати параметри URL (Copy URL Parameters)</li> - <li>Копіювати дані POST (тільки для запитів POST) (Copy POST Data)</li> - <li>Копіювати як cURL (Copy as cURL)</li> - <li>Копіювати заголовки запитів (Copy Request Headers)</li> - <li>Копіювати заголовки відповідей (Copy Response Headers)</li> - <li>Копіювати відповідь (Copy Response)</li> - <li>Копіювати зображення як URI даних (тільки для зображень) (Copy Image as Data URI)</li> - <li>Копіювати все як HAR (Copy All As HAR)</li> - <li>Зберегти все як HAR (Save All As HAR)</li> - <li>Зберегти зображення як (Save Image As) (тільки для зображень)</li> - <li>Редагувати і надіслати заново (Edit and Resend)</li> - <li>Відкрити в новій вкладці (Open in New Tab)</li> - <li>Почати <a href="/uk/docs/Tools/Network_Monitor#Performance_analysis">Аналіз швидкодії</a> (Start <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page)</li> -</ul> - -<h4 id="Редагувати_і_надіслати_заново_(Edit_and_Resend)">Редагувати і надіслати заново (Edit and Resend)</h4> - -<p><span class="tlid-translation translation"><span title="">Відкриває редактор, що дозволяє редагувати метод, URL-адресу, параметри та заголовки для запиту та повторно його надіслати.</span></span> </p> - -<h4 id="Відкрити_в_новій_вкладці_(Open_in_New_Tab)">Відкрити в новій вкладці (Open in New Tab)</h4> - -<p><span class="tlid-translation translation"><span title="">Відправляє запит у новій вкладці - дуже корисно для налагодження асинхронних запитів.</span></span></p> - -<h4 id="Копіювати_як_cURL_(Copy_as_cURL)">Копіювати як cURL (Copy as cURL)</h4> - -<p><span class="tlid-translation translation"><span title="">Вибір цього пункту меню приводить до копіювання мережного запиту в буфер обміну як команди </span></span> <a href="http://curl.haxx.se/">cURL</a><span class="tlid-translation translation"><span title="">, після чого можна виконати його з командного рядка.</span> <span title="">Команда може містити такі параметри:</span></span></p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>-X [METHOD]</code></td> - <td>Якщо не використовується метод GET та POST</td> - </tr> - <tr> - <td><code>--data</code></td> - <td><span class="tlid-translation translation"><span title="">Для параметрів запиту, закодованих URL-адресами</span></span></td> - </tr> - <tr> - <td><code>--data-binary</code></td> - <td>Для багатокомпонентних параметрів запиту</td> - </tr> - <tr> - <td><code>--http/VERSION</code></td> - <td>Якщо HTTP не є версією 1.1</td> - </tr> - <tr> - <td><code>-I</code></td> - <td>Якщо використовується метод HEAD</td> - </tr> - <tr> - <td><code>-H</code></td> - <td> - <p><span class="tlid-translation translation"><span title="">По одному для кожного заголовка запиту.</span></span></p> - - <p>Починаючи з Firefox 34, якщо вказаний заголовок "Accept-Encoding", команда cURL буде містити <code>--compressed</code> замість <code>-H "Accept-Encoding: gzip, deflate"</code>. <span class="tlid-translation translation"><span title="">Це значить, що відповідь буде автоматично розпаковуватися.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<h4 id="Копіюватизберегти_все_як_HAR_(CopySave_All_As_HAR)">Копіювати/зберегти все як HAR (Copy/Save All As HAR)</h4> - -<p><span class="tlid-translation translation"><span title="">Ці пункти створюють </span></span><a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> <span class="tlid-translation translation"><span title=""> (HAR) для всіх запитів списку.</span> <span title="">Формат HAR дозволяє експортувати детальну інформацію про мережні запити.</span> </span>"Копіювати все як HAR" (<span class="tlid-translation translation"><span title="">"</span></span>Copy All As HAR<span class="tlid-translation translation"><span title="">") копіює дані в буфер обміну. "Зберегти все як HAR"("</span></span>Save All As HAR")<span class="tlid-translation translation"><span title=""> відкриває діалогове вікно, за допомогою якого можна зберегти архів на диск.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У новому випадаючому меню "HAR" також містяться команди "Копіювати все як HAR" та "Зберегти все як HAR", а також пункт "Імпортувати ...".</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar">Панель інструментів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/throttling/index.html b/files/uk/tools/network_monitor/throttling/index.html deleted file mode 100644 index 383803bab9..0000000000 --- a/files/uk/tools/network_monitor/throttling/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Обмеження швидкості передачі -slug: Tools/Network_Monitor/Throttling -translation_of: Tools/Network_Monitor/Throttling -original_slug: Інструменти/Network_Monitor/Throttling ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Монітор мережі дозволяє обмежити швидкість мережі, щоб емулювати різні швидкості з'єднання. Це зроблено з метою приблизної оцінки того, як Ваша програма буде поводитися з різними типами підключень.</span></span></p> - -<h2 id="Обмеження_швидкості_передачі_(Throttling)">Обмеження швидкості передачі (Throttling)</h2> - -<p><span class="tlid-translation translation"><span title="">Панель інструментів містить випадаюче меню Throttling, за допомогою якого Ви можете зменшити швидкість мережі, щоб емулювати різні умови.</span> <span title="">Просто виберіть опцію з меню, і вона буде зберігатися після перезавантаження.</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16260/throttling.png" style="border: 1px solid black; display: block; height: 177px; margin: 0px auto; width: 150px;"></p> - -<p><span class="tlid-translation translation"><span title="">Емульовані характеристики:</span></span></p> - -<ul> - <li>швидкість завантаження</li> - <li>швидкість вивантаження</li> - <li>мінімальна затримка</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">У таблиці нижче перераховані значення, пов'язані з кожним типом мережі. Однак, слід відмітити, що не варто покладатися на цю функцію для точних вимірювань продуктивності;</span> <span title="">вона призначена для приблизного уявлення про роботу користувача в різних умовах.</span></span></p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Вибір</th> - <th scope="col">Швидкість завантаження</th> - <th scope="col">Швидксть вивантаження</th> - <th scope="col">Мінімальна затримка (ms)</th> - </tr> - </thead> - <tbody> - <tr> - <td>GPRS</td> - <td>50 KB/s</td> - <td>20 KB/s</td> - <td>500</td> - </tr> - <tr> - <td>Regular 2G</td> - <td>250 KB/s</td> - <td>50 KB/s</td> - <td>300</td> - </tr> - <tr> - <td>Good 2G</td> - <td>450 KB/s</td> - <td>150 KB/s</td> - <td>150</td> - </tr> - <tr> - <td>Regular 3G</td> - <td>750 KB/s</td> - <td>250 KB/s</td> - <td>100</td> - </tr> - <tr> - <td>Good 3G</td> - <td>1.5 MB/s</td> - <td>750 KB/s</td> - <td>40</td> - </tr> - <tr> - <td>Regular 4G/LTE</td> - <td>4 MB/s</td> - <td>3 MB/s</td> - <td>20</td> - </tr> - <tr> - <td>DSL</td> - <td>2 MB/s</td> - <td>1 MB/s</td> - <td>5</td> - </tr> - <tr> - <td>Wi-Fi</td> - <td>30 MB/s</td> - <td>15 MB/s</td> - <td>2</td> - </tr> - </tbody> -</table> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> - -<ul> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> -</ul> diff --git a/files/uk/tools/network_monitor/toolbar/index.html b/files/uk/tools/network_monitor/toolbar/index.html deleted file mode 100644 index 5848d61122..0000000000 --- a/files/uk/tools/network_monitor/toolbar/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Панель інструментів Монітору мережі -slug: Tools/Network_Monitor/toolbar -translation_of: Tools/Network_Monitor/toolbar -original_slug: Інструменти/Network_Monitor/toolbar ---- -<p>{{ToolsSidebar}}</p> - -<p><span class="tlid-translation translation"><span title="">Монітор мережі надає дві області панелей інструментів: одну над основним розділом, а іншу під ним.</span></span></p> - -<h2 id="Панель_інструментів">Панель інструментів</h2> - -<p><span class="tlid-translation translation"><span title="">Панель інструментів знаходиться у верхній частині головного вікна Монітора мережі</span></span>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p> - -<p><span class="tlid-translation translation"><span title="">На ній знаходяться</span></span>:</p> - -<ul> - <li>Піктограма для очищення <a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list">списку мережних запитів.</a></li> - <li>Поле для вводу <a href="/uk/docs/Tools/Network_Monitor/request_list#Filtering_requests">фільтру запитів</a> за URL та за властивостями</li> - <li>Набір піктограм для фільтрування списку мережних запитів: - <ul> - <li>за типом змісту відповіді</li> - <li>XHR запити</li> - <li>оновлення WebSocket (позначені WS)</li> - </ul> - </li> - <li>типово, Монітор мережі очищується кожного разу<span class="tlid-translation translation"><span title="">, коли Ви переходите до нової сторінки або перезавантажуєте поточну сторінку.</span> <span title="">Цю поведінку можна змінити, активувавши параметр "Постійне журналювання".</span></span></li> - <li>Параметр<span class="tlid-translation translation"><span title="">, який дозволяє вимкнути кешування</span></span></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> - <li>HAR</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p> - -<p>Друга область панелі інструментів, що знаходиться нижче Монітора мережі, містить:</p> - -<ul> - <li>Піктограму запуску <a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_analysis">Аналізу швидкодії</a></li> - <li>Звітна інформація <span class="tlid-translation translation"><span title="">по кількості, загальному розміру і загальному часу запитів, що відображаються на</span></span> <span class="tlid-translation translation"><span title="">цій сторінці </span></span>.</li> -</ul> - -<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> - -<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі:</span></span></p> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list">Список мережних запитів</a></li> - <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details">Подробиці мережних запитів</a></li> - <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> - <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis">Аналіз швидкодії</a></li> - <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> -</ul> diff --git a/files/uk/tools/page_inspector/how_to/index.html b/files/uk/tools/page_inspector/how_to/index.html deleted file mode 100644 index f35f9aec5c..0000000000 --- a/files/uk/tools/page_inspector/how_to/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How to -slug: Tools/Page_Inspector/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Page_Inspector/How_to ---- -<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> - -<p>{{ ListSubpages () }}</p> - -<p> </p> diff --git a/files/uk/tools/page_inspector/index.html b/files/uk/tools/page_inspector/index.html deleted file mode 100644 index d940ae71ef..0000000000 --- a/files/uk/tools/page_inspector/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Page Inspector -slug: Tools/Page_Inspector -tags: - - CSS - - DOM - - HTML - - NeedsTranslation - - Stylesheets - - TopicStub - - Web Development - - 'Web Development:Tools' - - 'l10n:priority' -translation_of: Tools/Page_Inspector ---- -<p>Use the Page Inspector to examine and modify the HTML and CSS of a page.</p> - -<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p> - -<hr> -<h2 id="User_Interface_Tour">User Interface Tour</h2> - -<p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p> - -<hr> -<h2 id="How_to">How to</h2> - -<p>To find out what you can do with the Inspector, see the following how to guides:</p> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> -</ul> -</div> - -<hr> -<h2 id="Reference">Reference</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li> - <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li> -</ul> -</div> diff --git a/files/uk/tools/web_console/console_messages/index.html b/files/uk/tools/web_console/console_messages/index.html deleted file mode 100644 index ad9989244b..0000000000 --- a/files/uk/tools/web_console/console_messages/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Повідомлення консолі -slug: Tools/Web_Console/Console_messages -translation_of: Tools/Web_Console/Console_messages -original_slug: Інструменти/Web_Console/Console_messages ---- -<div>{{ToolsSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Більшіу частину Веб-консолі займає область відображення повідомлень:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p> - -<p>Кожне повідомлення відображається окремим рядком:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><strong>Time</strong></td> - <td>Час, коли повідомлення було записане. Це поле за замовченням не відображається: Ви можете керувати опцією "Увімкнути відбитки часу" використовуючи <a href="/uk/docs/Tools_Toolbox#Settings">налаштування панелі інструментів</a>.</td> - </tr> - <tr> - <td><strong>Category</strong></td> - <td> - <p><strong>Категорія</strong>: показує на те, що це за повідомлення:</p> - - <ul style="margin-left: 40px;"> - <li><strong>Чорний</strong>: Мережний запит</li> - <li><span style="color: #0099ff;"><strong>Синій</strong></span>: попередження/помилка/повідомлення CSS</li> - <li><strong><span style="color: #ff8c00;">Помаранчевий</span></strong>: попередження/помилка JavaScript</li> - <li><span style="color: #ff0000;"><strong>Червоний</strong></span>: попередження/помилка безпеки</li> - <li><span style="color: #90b090;"><strong>Зелений</strong></span>: повідомлення журналу серверу</li> - <li><span style="color: #a9a9a9;"><strong>Світло-сірий </strong></span>: повідомлення API <a href="/uk/docs/Web/API/console" title="/en-US/docs/Web/API/console">Консолі</a></li> - <li><span style="color: #696969;"><strong>Темно-сірий</strong></span>: вхід/вихід інтерактивного <a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter">інтерпретатору командного рядку</a></li> - </ul> - </td> - </tr> - <tr> - <td><strong>Type</strong></td> - <td><span class="tlid-translation translation"><span title="">Для всіх повідомлень, за винятком мережних запитів і інтерактивних входів/виходів, піктограма вказує на тип повідомлення: помилка (X), попередження (!) або інфомаційне повідомлення (i).</span></span></td> - </tr> - <tr> - <td><strong>Message</strong></td> - <td>Текст повідомлення.</td> - </tr> - <tr> - <td><strong>Number of occurrences</strong></td> - <td><span class="tlid-translation translation"><span title="">Якщо рядок, який генерує попередження або помилку, виконується більше одного разу, то він реєструється тільки один раз. Цей лічильник показує, скільки разів генерується дане повідомлення.</span></span></td> - </tr> - <tr> - <td><strong>Filename and line number</strong></td> - <td> - <p><span class="tlid-translation translation"><span title="">Для повідомлень JavaScript, CSS і API консолі повідомлення можна простежити до рядку коду, що повязаний з ним.</span> <span title="">Консоль надає посилання на ім'я файлу та номер рядку, що генерує повідомлення.</span></span></p> - - <p>Починаючи з Firefox 36, це поле також показує номер стовпчика.</p> - </td> - </tr> - </tbody> -</table> - -<p><span class="tlid-translation translation"><span title="">За замовчуванням консоль очищається кожного разу, коли ви переходите до нової сторінки або перезавантажуєте поточну сторінку.</span> <span title="">Щоб змінити цю поведінку, позначте пункт "Постійне журналювання" в </span></span><a href="/uk/docs/Tools_Toolbox#Common_preferences">Налаштуваннях</a><span class="tlid-translation translation"><span title="">.</span></span></p> - -<h2 id="Категорії_повідомлень">Категорії повідомлень</h2> - -<h3 id="Мережні">Мережні</h3> - -<div class="note"> -<p>Network log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> -</div> - -<p>Network requests are logged with a line that looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><strong>Time</strong></td> - <td>The time the message was recorded.</td> - </tr> - <tr> - <td><strong>Category</strong></td> - <td>Indicates that the message is an HTTP request.</td> - </tr> - <tr> - <td><strong>Method</strong></td> - <td> - <p>The specific HTTP request method.</p> - - <p>If the request was made as an <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, there's an additional note indicating this:</p> - - <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> - </td> - </tr> - <tr> - <td><strong>URI</strong></td> - <td>The target URI.</td> - </tr> - <tr> - <td><strong>Summary</strong></td> - <td>The HTTP version, status code, and time taken to complete.</td> - </tr> - </tbody> -</table> - -<h4 id="Viewing_network_request_details">Viewing network request details</h4> - -<p>If you click on the message, you'll be redirected to the <a href="/en-US/docs/Tools/Network_Monitor">Network panel</a> where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.</p> - -<p>Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:</p> - -<ul> - <li><strong>Headers:</strong> request and response headers</li> - <li><strong>Response:</strong> the response body</li> - <li><strong>Cookies:</strong> any cookies that were sent along with the request</li> - <li><strong>Call Stack</strong> (new in Firefox 50): for requests initiated by JavaScript, such as <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, you can see the call stack at the point the request was made.</li> -</ul> - -<p>{{EmbedYouTube("cFlcWzJ9j4I")}}</p> - -<h3 id="JS">JS</h3> - -<p>JavaScript messages look like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="Learn_more_link">"Learn more" link</h4> - -<div class="geckoVersionNote">New in Firefox 49</div> - -<p>JavaScript errors contain a "Learn more" link that takes you to the<a href="/en-US/docs/Web/JavaScript/Reference/Errors"> JavaScript error reference</a> containing additional advice for fixing issues:</p> - -<p>{{EmbedYouTube("OabJc2QR6o0")}}</p> - -<h4 id="Source_maps">Source maps</h4> - -<div class="geckoVersionNote">New in Firefox 55</div> - -<p>From Firefox 55, the Web Console understands <a href="http://blog.teamtreehouse.com/introduction-source-maps">source maps</a>. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.</p> - -<h3 id="CSS">CSS</h3> - -<div class="note"> -<p><strong>Note</strong>: CSS warnings and reflow messages are not shown by default, for performance reasons (see {{bug(1452143)}}). Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> -</div> - -<p>CSS messages look like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="Reflow_events">Reflow events</h4> - -<p>The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p> - -<p>Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p> - -<p>Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">toolbar</a> and selecting "Reflows".</p> - -<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> - -<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4> - -<p>If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.</p> - -<p>However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls <code>window.getComputedStyle(thing).height</code>:</p> - -<pre class="brush: js">var thing = document.getElementById("the-thing"); -thing.style.display = "inline-block"; -var thingHeight = window.getComputedStyle(thing).height;</pre> - -<p>Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.</p> - -<h3 id="Безпеки">Безпеки</h3> - -<p>Security warnings and errors look like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p> - -<p>The complete list of security messages is as follows:</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <th scope="col">Message</th> - <th scope="col">Details</th> - </tr> - <tr> - <td>Blocked loading mixed active content</td> - <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> - </tr> - <tr> - <td>Blocked loading mixed display content</td> - <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> - </tr> - <tr> - <td>Loading mixed (insecure) active content on a secure page</td> - <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> - </tr> - <tr> - <td>Loading mixed (insecure) display content on a secure page</td> - <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> - </tr> - <tr> - <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td> - <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> - </tr> - <tr> - <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td> - <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> - </tr> - <tr> - <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td> - <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> - </tr> - <tr> - <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td> - <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> - </tr> - <tr> - <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td> - <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> - </tr> - <tr> - <td>The site specified an invalid Strict-Transport-Security header.</td> - <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> - </tr> - <tr> - <td> - <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p> - </td> - <td> - <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p> - - <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p> - - <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p> - </td> - </tr> - </tbody> -</table> - -<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p> - -<h3 id="Інформаційні">Інформаційні</h3> - -<div class="note"> -<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> -</div> - -<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br> - <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>The Web console supports the following <a href="/en-US/docs/Web/API/Console">Console API</a> messages:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></li> - <li><code><a href="/en-US/docs/Web/API/Console/clear">clear()</a></code> (new in Firefox 48)</li> - <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li> - <li><code>exception()</code></li> - <li><code><a href="/en-US/docs/Web/API/Console.group">group()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/Console/groupEnd">groupEnd()</a></code></li> - <li><code>info()</code></li> - <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li> - <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li> -</ul> - -<p>The console prints a stack trace for all error messages, like this:</p> - -<pre class="brush: js">function foo() { - console.error("it explodes"); -} - -function bar() { - foo(); -} - -function doStuff() { - bar(); -} - -doStuff();</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p> - -<h3 id="Серверні">Серверні</h3> - -<div class="note"> -<p>Server-side log messages was introduced in Firefox 43, but removed in Firefox 56. You can install the <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a> to (re)-enable the feature.</p> -</div> - -<p>With the <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a>, Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p> - -<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p> - -<ul> - <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li> - <li>your server-side code uses this API to log messages</li> - <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li> - <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li> - <li>the Web Console decodes these headers and displays them</li> -</ul> - -<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p> - -<h3 id="Входивиходи_командного_рядку">Входи/виходи командного рядку</h3> - -<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> - -<h2 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h2> - -<h3 id="Filtering_by_category">Filtering by category</h3> - -<p>You can use the toolbar along the top to constrain the results displayed.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:</p> - -<ul> - <li>Net - <ul> - <li>Errors</li> - <li>Warnings</li> - <li>XHR</li> - <li>Log</li> - </ul> - </li> - <li>CSS - <ul> - <li>Errors</li> - <li>Warnings</li> - <li>Reflows</li> - </ul> - </li> - <li>JS - <ul> - <li>Errors</li> - <li>Warnings</li> - </ul> - </li> - <li>Security - <ul> - <li>Errors</li> - <li>Warnings</li> - </ul> - </li> - <li>Logging - <ul> - <li>Errors</li> - <li>Warnings</li> - <li>Info</li> - <li>Log</li> - <li>Shared Workers</li> - <li>Service Workers</li> - <li>Add-on or Chrome Workers</li> - </ul> - </li> - <li>Server - <ul> - <li>Errors</li> - <li>Warnings</li> - <li>info</li> - <li>Log</li> - </ul> - </li> -</ul> - -<h3 id="Filtering_by_text">Filtering by text</h3> - -<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p> - -<h3 id="Clearing_the_log">Clearing the log</h3> - -<p>Finally, you can use this toolbar to clear the log. Before Firefox 48, this is a button labeled "Clear" on the right of the toolbar. From Firefox 48 it's a trashcan icon on the left.</p> diff --git a/files/uk/tools/web_console/index.html b/files/uk/tools/web_console/index.html deleted file mode 100644 index 052358d823..0000000000 --- a/files/uk/tools/web_console/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Веб-консоль - Web Console -slug: Tools/Web_Console -translation_of: Tools/Web_Console -original_slug: Інструменти/Web_Console ---- -<p>Веб-консоль:</p> - -<ol> - <li><span class="tlid-translation translation"><span title="">Реєструє інформацію, пов'язану з веб-сторінкою: мережні запити, JavaScript, CSS, помилки та попередження безпеки, а також повідомлення про помилки, попередження та інформаційні повідомлення, явно ввімкнені за допомогою коду JavaScript, запущеного в контексті сторінки</span></span></li> - <li><span class="tlid-translation translation"><span title="">Дозволяє взаємодіяти з веб-сторінкою, виконуючи вирази JavaScript у контексті сторінки</span></span></li> -</ol> - -<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/uk/docs/Tools/Web_Console/Opening_the_Web_Console">Відкриття Веб-консолі</a></dt> - <dd>Як запустити Веб-консоль.</dd> - <dt><a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter">Інтерпретатор командного рядку</a></dt> - <dd>Як взаємодіяти з документом, використовуючи Консоль.</dd> - <dt><a href="/uk/docs/Tools/Web_Console/Split_console">Розділенння консолі </a></dt> - <dd>Використання Консолі разом з іншими інструментами.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/uk/docs/Tools/Web_Console/Console_messages">Повідомлення консолі</a></dt> - <dd>Докладна інформація про реєетрацію повідомлень Консолі.</dd> - <dt><a href="/uk/docs/Tools/Web_Console/Rich_output">Збагачення виведення</a></dt> - <dd><span class="tlid-translation translation"><span title="">Переглядайте та взаємодійте з об'єктами, що реєструються Консоллю</span></span>.</dd> - <dt><a href="/uk/docs/Tools/Web_Console/Keyboard_shortcuts">Комбінації клавіш</a></dt> - <dd>Посилання на довідку.</dd> -</dl> -</div> -</div> diff --git a/files/uk/tools/web_console/split_console/index.html b/files/uk/tools/web_console/split_console/index.html deleted file mode 100644 index ea9c967170..0000000000 --- a/files/uk/tools/web_console/split_console/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Розділення консолі -slug: Tools/Web_Console/Split_console -translation_of: Tools/Web_Console/Split_console -original_slug: Інструменти/Web_Console/Split_console ---- -<div>{{ToolsSidebar}}</div> - -<div><span class="tlid-translation translation"><span title="">Консоль можна використовувати поряд з іншими інструментами.</span> <span title="">Поки ви перебуваєте в іншому інструменті на панелі інструментів, просто натисніть клавішу </span></span> <kbd>Esc</kbd> <span class="tlid-translation translation"><span title="">або виберіть команду "Показати розділену консоль" в меню <a href="/uk/docs/Tools_Toolbox#Toolbar">панелі інструментів</a>.</span> <span title="">Панель інструментів тепер з'явиться розділеною частиною, на ній буде розміщено оригінальний інструмент і веб-консоль.</span></span></div> - -<p> - </p><p>Ви можете закрити розділення консолі повторним натисканням <kbd>Esc</kbd>, або вибравши команду меню "Сховати розділення консолі".</p> -<p></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p> - -<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> - -<p><span class="tlid-translation translation"><span title="">В якості скорочення назви елемента, вибраного в інспекторі, </span></span>як завжди використовується <code>$0</code><span class="tlid-translation translation"><span title="">:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"><span class="tlid-translation translation"><span title="">Якщо Ви використовуєте розділену консоль з відладчиком, область видимості консолі - це поточний кадр стека.</span> <span title="">Отже, якщо Ви потрапили до точки переривання у функції, область видимості буде визначатися цією функцією.</span> <span title="">Ви отримаєте автозаповнення для об'єктів, означених у функції, і можете легко змінювати їх на льоту:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> diff --git a/files/uk/tools/web_console/ui_tour/index.html b/files/uk/tools/web_console/ui_tour/index.html deleted file mode 100644 index 575a1f37e8..0000000000 --- a/files/uk/tools/web_console/ui_tour/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Відкриття Веб-консолі -slug: Tools/Web_Console/UI_Tour -translation_of: Tools/Web_Console/UI_Tour -original_slug: Інструменти/Web_Console/Opening_the_Web_Console ---- -<div>{{ToolsSidebar}}</div> - -<p>Для відкриття Веб-консолі:</p> - -<ul> - <li>виберіть "Веб-консоль" з під-меню "Веб-розробка" меню Firefox (або з меню Інструменти, якщо активоване відображення панелі меню або в Mac OS X)</li> - <li>або натисніть комбінацію клавіш <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> в OS X)</li> -</ul> - -<p><span class="tlid-translation translation"><span title="">В нижній частині вікна веб-переглядача з'явиться <a href="https://developer.mozilla.org/uk/docs/Tools/DevTools_Window">Панель інструментів</a> з активованою веб-консоллю (на панелі інструментів DevTools вона просто називається "консоль"):</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p> - -<p>Інтерфейс Веб-консолі розділяється на три горизонтальні секції:</p> - -<ul> - <li><a href="/uk/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Панель інструментів</a>: <span class="tlid-translation translation"><span title="">вздовж верхньої частини знаходиться панель інструментів, що містить дві кнопки.</span> <span title="">Натисніть кнопку "сміття", щоб очистити вміст консолі.</span> <span title="">Натисніть піктограму "воронка", щоб відфільтрувати повідомлення, які відображаються в консолі</span></span> </li> - <li><a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Командний рядок</a>: <span class="tlid-translation translation"><span title="">командний рядок починається з подвійних кутових дужок (>>).</span> <span title="">Використовуйте його для введення виразів JavaScript</span></span></li> - <li><a href="/uk/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Панель відображення повідомлення</a>: <span class="tlid-translation translation"><span title="">тут відображаються </span></span> <span class="tlid-translation translation"><span title="">повідомлення, що генеруються кодом на сторінці та команди, введені в командному рядку</span></span></li> -</ul> diff --git a/files/uk/web/accessibility/index.html b/files/uk/web/accessibility/index.html deleted file mode 100644 index 604d8762ac..0000000000 --- a/files/uk/web/accessibility/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Accessibility -slug: Web/Accessibility -tags: - - Accessibility - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/Accessibility ---- -<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p> - -<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p> - -<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> - -<div class="cleared topicpage-table"> -<div class="section"> -<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2> - -<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> - <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> - <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> - <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> - <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> - <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> - <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt> - <dd> - <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p> - </dd> - <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> - <dd>Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> - <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd> - <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> - <dd>A collection of articles intended for AT developers</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> - <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt> - <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt> - <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd> - <dt></dt> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> -</div> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li> - <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> - <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li> - <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> - <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> -</ul> diff --git a/files/uk/web/accessibility/understanding_wcag/index.html b/files/uk/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index fe71b20ebc..0000000000 --- a/files/uk/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - NeedsTranslation - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> - -<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> - -<h2 id="The_four_principles">The four principles</h2> - -<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> - -<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> -</ul> - -<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> - -<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> - -<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> - -<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> - -<p>WCAG 2.1 includes:</p> - -<ul> - <li>all of WCAG 2.0 (verbatim, word-for-word)</li> - <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: - <ul> - <li>Mobile Accessibility </li> - <li>Low Vision</li> - <li>Cognitive</li> - </ul> - </li> - <li>Read more about WCAG 2.1: - <ul> - <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> - <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> - </ul> - </li> -</ul> - -<h2 id="Legal_standing">Legal standing</h2> - -<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> - -<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/uk/web/accessibility/understanding_wcag/keyboard/index.html b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html deleted file mode 100644 index 1383c66354..0000000000 --- a/files/uk/web/accessibility/understanding_wcag/keyboard/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Клавіатура (Keyboard) -slug: Web/Accessibility/Understanding_WCAG/Keyboard -tags: - - tabIndex - - клікабельні елементи - - фокус клавіатури - - інтерактивні елементи -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -<div></div> - -<div>Щоб бути у повній мірі доступною, веб-сторінка повинна бути керованою за допомогою однієї лише клавіатури для доступу до неї і управління нею. Це відноситься до користувачів скрінрідерів (екранні зчитувачі), але може також включати і користувачів, у яких виникають проблеми з управлінням вказівним пристроєм, наприклад, мишею або трекболом, або чия миша не працює в даний момент, або які просто вважають за краще використовувати клавіатуру для введення, коли це можливо.</div> - -<h2 id="Елементи_у_фокусі_повинні_мати_інтерактивну_семантику">Елементи у фокусі повинні мати інтерактивну семантику</h2> - -<p>Якщо елемент можна сфокусувати за допомогою клавіатури, то він повинен бути інтерактивним; тобто користувач повинен мати можливість щось робити з цим елементом, якусь зміну (наприклад, активізувати посилання або змінити параметр).</p> - -<div class="blockIndicator note"> -<p><strong>Примітка: </strong>один важливий виняток для цього правила, якщо елемент має<strong> </strong><code>role="document" </code>застосовану до нього, <strong>всередині </strong>інтерактивний контекст (наприклад, <code>role="application"</code>). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").</p> -</div> - -<p>Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту <code>tabindex=0</code>. Однак, ви повинні додавати <code>tabindex</code> тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.</p> - -<h3 id="Дивіться_також">Дивіться також</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Уникайте_використання_tabindex_атрибута_який_більше_нуля">Уникайте використання <code>tabindex</code> атрибута який більше нуля</h2> - -<p><code>tabindex</code> атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх <code>tabindex</code> значення (1, а потім 2, потім 3 і т.д.).</p> - -<p>Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх <code>tabindex</code> значень.</p> - -<h3 id="Дивіться_також_2">Дивіться також</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Розуміння порядку фокусування</a></li> - <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте tabindex більше 0</a></li> -</ul> - -<h2 id="Клікабельні_елементи_повинні_бути_такими_що_фокусуються_і_мають_інтерактивну_семантику">Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику</h2> - -<p>Якщо елемент можна натиснути вказівним пристроєм, наприклад, мишкою, то він також повинен бути таким що фокусується за допомогою клавіатури, і користувач повинен мати можливість щось робити, взаємодіючи з ним.</p> - -<p>Елемент є клікабельним, якщо має <code>onclick</code> встановлений обробник події. Ви можете зробити його таким що фокусує, додавши <code>tabindex=0</code> значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши <code>onkeydown</code> обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.</p> - -<h3 id="Дивіться_також_3">Дивіться також</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Інтерактивні_елементи_повинні_мати_можливість_бути_активовані_за_допомогою_клавіатури">Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури</h2> - -<p>Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.</p> - -<h3 id="Дивіться_також_4">Дивіться також</h3> - -<ul> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Інтерактивні_елементи_повинні_бути_такими_що_фокусуються">Інтерактивні елементи повинні бути такими що фокусуються</h2> - -<p>Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши <code>tabindex=0</code> значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку <kbd>Tab</kbd>, в послідовності таких елементів, яка задана в HTML-документі.</p> - -<h3 id="Дивіться_також_5">Дивіться також</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> -</ul> - -<h2 id="Елемент_що_фокусується_повинен_змінювати_стиль_при_фокусуванні">Елемент що фокусується повинен змінювати стиль при фокусуванні</h2> - -<p>Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS псевдоклас.</p> - -<p>Стандартні елементи фокусування, такі як посилання і поля вводу, за замовчуванням задаються браузером в спеціальному стилі, тому, можливо, вам не доведеться ставити стиль фокусування для таких елементів, якщо тільки ви не хочете, щоб стиль фокусування був більш характерним.</p> - -<p>Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.</p> - -<h3 id="Дивіться_також_6">Дивіться також</h3> - -<ul> - <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Застосування CSS для зміни формату представлення компонента UI, коли він отримує фокус.</a></li> -</ul> 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 ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>Ambient Light Events - це зручний спосіб реагувати на будь-які зміни інтенсивності світла, наприклад, змінюючи кольорову контрастність інтерфейсу користувача (UI) або змінюючи експозицію, необхідну для фотографування.</p> - -<h2 id="Опис_події">Опис події</h2> - -<p>Коли датчик освітленості пристрою виявляє зміну рівня освітленості, він повідомляє браузер про цю зміну. Браузер, після отримання такого сповіщення, запускає подію {{domxref ("DeviceLightEvent")}}, яка надає інформацію про точну інтенсивність світла (в одиницях люкс).</p> - -<p>Цю подію можна перехопити на рівні об'єкту <code>window</code> за допомогою методу {{domxref ("EventTarget.addEventListener", "addEventListener")}} (використовуючи назву події {{event ("devicelight")}}) або прикріпивши обробку події як властивість {{domxref ("window.ondevicelight")}}.</p> - -<p>Після перехоплення об'єкт події надає доступ до інтенсивності світла, вираженої у {{interwiki ("wikipedia", "lux")}} через властивість {{domxref ("DeviceLightEvent.value")}}.</p> - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: js notranslate">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 не підтримується'); -} -</pre> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність">Сумісність</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці сформована із структурованих даних. Якщо ви хочете внести свій внесок у дані, відвідайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на зміни.</div> - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> 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 ---- -<div>{{APIRef("WebGL")}}</div> - -<p><code><strong>ANGLE_instanced_arrays</strong></code> <span class="tlid-translation translation" lang="uk"><span title="">розширення є частиною</span></span> <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <span class="tlid-translation translation" lang="uk"><span title="">і дозволяє малювати один і той же об'єкт або групи подібних об'єктів кілька разів, якщо вони поділяють однакові вершинні дані, лічильник примітиву і тип.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Розширення WebGL доступні за допомогою метода</span></span>{{domxref("WebGLRenderingContext.getExtension()")}} . <span class="tlid-translation translation" lang="uk"><span title="">Для отримання додаткової інформації див</span></span><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions"> Using Extensions</a> в <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>.</p> - -<div class="note"> -<p><strong><span class="tlid-translation translation" lang="uk"><span title="">Доступність:</span></span></strong> <span class="tlid-translation translation" lang="uk"><span title="">Це розширення доступне лише для</span></span> {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} <span class="tlid-translation translation" lang="uk"><span title="">контексті.</span></span> В {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, <span class="tlid-translation translation" lang="uk"><span title="">функціональність цього розширення доступна на</span></span> WebGL2 <span class="tlid-translation translation" lang="uk"><span title="">контекст за замовчуванням і константи і методи доступні без</span></span> <span class="tlid-translation translation" lang="uk"><span title="">суфіксу </span></span> "<code>ANGLE</code>".</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Незважаючи на назву</span></span> "ANGLE", <span class="tlid-translation translation" lang="uk"><span title="">це розширення працює на будь-якому пристрої, якщо його підтримує апаратне забезпечення, а не тільки на Windows, коли використовується бібліотека ANGLE. </span></span> "ANGLE" <span class="tlid-translation translation" lang="uk"><span title="">просто вказує, що це розширення було написано авторами бібліотеки ANGLE.</span></span></p> -</div> - -<h2 id="Константи"><span class="tlid-translation translation" lang="uk"><span title="">Константи</span></span></h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Це розширення виставляє одну нову константу, яку можна використовувати метод </span></span>{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} :</p> - -<dl> - <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Повертає </span></span>{{domxref("GLint")}} <span class="tlid-translation translation" lang="uk"><span title="">опису частотного дільника, використовуваного для інтрадерного візуалізації при використанні в</span></span> {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} <span class="tlid-translation translation" lang="uk"><span title="">як параметр </span></span><code>pname</code> .</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p>This extension exposes three new methods.</p> - -<dl> - <dt>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</dt> - <dd> - <p>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.</p> - </dd> - <dt>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</dt> - <dd> - <p>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.</p> - </dd> - <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt> - <dd> - <p>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()")}}.</p> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>Enabling the extension:</p> - -<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays'); -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td> - <td>{{Spec2('ANGLE_instanced_arrays')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("api.ANGLE_instanced_arrays")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li> - <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li> - <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li> - <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li> -</ul> 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 ---- -<div>{{APIRef("File API")}}</div> - -<p>Об'єкт <code>Blob</code> являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на <code>Blob</code>, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.</p> - -<p>Для <code>формування Blob</code> з інших не-blob об'єктів й даних використовується конструктор {{domxref("Blob.Blob", "Blob()")}}. Для створення Blob, що міститиме підмножину інших даних Blob, викликається метод {{domxref("Blob.slice()", "slice()")}}. Для отримання Blob для файла з файлової системи користувача перегляньте документацію до {{domxref("File")}}.</p> - -<p>API, що працюють з <code>Blob</code>, також перелічені у документації {{domxref("File")}}.</p> - -<div class="note"> -<p><strong>Зауваження:</strong> <code>Метод slice()</code> другим парметром приймає початкову довжину для індикації кількості байтів<code>, які будуть скопійовані у новий Blob</code>. Якщо вказувати змінні таким чином<code>: початковій індекс + довижина, що привищує </code>розмір <code>джерела Blob</code>, <code>повератємий Blob</code> буде містити дані від початкового індексу <code>до кінця джерела Blob</code>.</p> -</div> - -<div class="note"><strong>Зауваження:</strong> Майте на увазі, <code>що метод slice()</code> має вендорні префікси у деяких браузерах и версіях: <code>blob.mozSlice()</code> для Firefox 12 та попередніх <code>й blob.webkitSlice()</code> у Safari. Стара версія методу <code>slice()</code>, без вендорних префіксів, має іншу семантику та вважається застарілою. <code>Підтримка blob.mozSlice()</code> була припинена з Firefox 30.</div> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt> - <dd>Повертає новостворенний <code>об'єкт Blob</code>, чий контент складається з ланцюга масивів значень вхідних парметрів.</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Булєве значення, що вказує, чи був метод {{domxref("Blob.close()")}} викликан на Blob. Закритий Blob не може бути прочитаний.</dd> - <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> - <dd>Розмір, у байтах, даних, що міститься у об'єкті <code>Blob</code>.</dd> - <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> - <dd>Строка, що вказує MIME тип даних, що містяться <code>у Blob</code>. Якщо тип невідомий, ця строка порожня.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt> - <dd>Закриває об'єкт Blob, можливо, звілняючи <span class="short_text" id="result_box" lang="uk"><span>використовувані</span></span> ресурси.</dd> - <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> - <dd>Повертає новий об'єкт <code>Blob</code>, що містить дані у вказаному диапазоні байтів джерела <code>Blob</code>.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Приклад_використання_конструктора_Blob">Приклад використання конструктора Blob</h3> - -<p>{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:</p> - -<pre>var debug = {hello: "world"}; -var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre> - -<div class="warning"> -<p>До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:</p> - -<pre class="brush: js">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'); -</pre> -</div> - -<h3 id="Приклад_створення_URL_типізованого_масиву_з_використанням_Blob">Приклад створення URL типізованого масиву з використанням Blob</h3> - -<p>Наступний код:</p> - -<pre class="brush: js">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, тощо. -</pre> - -<h3 id="Приклад_отримання_даних_з_Blob">Приклад отримання даних з Blob</h3> - -<p>Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.</p> - -<pre class="brush: js">var reader = new FileReader(); -reader.addEventListener("loadend", function() { - // reader.result містить контент Blob у вигляді типізованого масиву -}); -reader.readAsArrayBuffer(blob);</pre> - -<p>Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або URL.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікация</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('File API','#blob','Blob')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>5<sup>[1]</sup></td> - <td>4<sup>[2]</sup></td> - <td>10</td> - <td>11.10<sup>[1]</sup></td> - <td>5.1<sup>[1]</sup></td> - </tr> - <tr> - <td><code>slice()</code></td> - <td>10 {{property_prefix("webkit")}}<br> - 21</td> - <td>5 {{property_prefix("moz")}}<sup>[3]</sup><br> - 13</td> - <td>10</td> - <td>12</td> - <td>5.1 {{property_prefix("webkit")}}</td> - </tr> - <tr> - <td><code>Blob()</code> constructor</td> - <td>20</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>10</td> - <td>12.10</td> - <td>6</td> - </tr> - <tr> - <td><code>close()</code> and <code>isClosed</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>slice()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>Blob()</code> constructor</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>close()</code> and <code>isClosed</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> and <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. 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 <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p> - -<p>[2] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. 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 <code>mozSlice()</code>.</p> - -<p>[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of <code>slice()</code>; it did not work for <code>start</code> and <code>end</code> positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.</p> - -<p>[4] See {{bug("1048325")}}</p> - -<h2 id="Gecko_notes_availability_in_privileged_code">Gecko notes: availability in privileged code</h2> - -<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p> - -<pre class="brush: js">Cu.importGlobalProperties(['Blob']); -</pre> - -<p><code>Blob</code> is available in Worker scopes.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("BlobBuilder")}}</li> - <li>{{domxref("File")}}</li> - <li>{{domxref("URL.createObjectURL")}}</li> - <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul> 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 ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary">Доданий в <a href="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>елемент HTML {{HTMLElement("canvas")}}</strong> призначений для створення графіки засобами <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Для прикладу, його використовують для малювання графіків, створення композиції фотографій, створення анімацій, і навіть для обробки та рендерингу відео в реальному часі.</p> - -<p>Mozilla applications gained support for <code><canvas></code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code><canvas></code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code><canvas></code> by including a script from Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code><canvas></code>.</p> - -<p>The <code><canvas></code> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to draw hardware-accelerated 3D graphics on web pages.</p> - -<h2 id="Example">Example</h2> - -<p>This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100); -</pre> - -<p>Edit the code below and see your changes update live in the canvas:</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext("2d"); -var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var edit = document.getElementById('edit'); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Reference">Reference</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}</li> -</ul> -</div> - -<p>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> - -<h2 id="Guides_and_tutorials">Guides and tutorials</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> - <dd>A comprehensive tutorial covering both the basic usage of <code><canvas></code> and its advanced features.</dd> - <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt> - <dd>Some extension developer-oriented code snippets involving <code><canvas></code>.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> - <dd>A demo of ray-tracing animation using canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt> - <dd>How to draw DOM content, such as HTML elements, into a canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt> - <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd> -</dl> - -<h2 id="Resources">Resources</h2> - -<h3 id="Generic">Generic</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> -</ul> - -<h3 id="Libraries">Libraries</h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> - <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> - <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> - <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open source library to create canvas based heatmaps</li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> 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 ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> - -<div class="summary"> -<p>Давайте почнемо цей урок з розгляду елемента {{HTMLElement("canvas")}} {{Glossary("HTML")}} як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та зможете намалювати перший приклад в соєму браузері.</p> -</div> - -<h2 id="Елемент_<canvas>">Елемент <code><canvas></code></h2> - -<pre class="brush: html notranslate"><canvas id="tutorial" width="150" height="150"></canvas> -</pre> - -<p>Елемент {{HTMLElement("canvas")}} схожий на елемент {{HTMLElement("img")}} , з єдиною видимою різницею - він не має атрибутів <code>src</code> та <code>alt</code> attributes. Дійсно, <code><canvas></code> має лише два атрибути, {{htmlattrxref("width", "canvas")}} та{{htmlattrxref("height", "canvas")}}. Обидва вони не є обов'язковими, та можуть бути задані за допомогою {{Glossary("DOM")}} <a href="/en-US/docs/Web/API/HTMLCanvasElement">в</a>ластивостей. Коли значення <code>width</code> та <code>height</code> не встановлені, canvas за замовчуванням буде <strong>300 пікселів </strong>шириною, та <strong>150 пікселів</strong> у висоту. Також можливо задати довільні розміри за допомогою {{Glossary("CSS")}}, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. </p> - -<div class="note"> -<p><strong>Примітка:</strong> Якщо ваше зображення здається викривленимб спробуйте задати атрибути <code>width</code> and <code>height</code> атрибути в тегу <code><canvas></code> не використовуючи CSS.</p> -</div> - -<p>Атрибут <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> не специфіцний для <code><canvas>, проте це один з </code><a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> які можна викростивувати для HTML елементів (наприклад, <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Використання <code>id</code> завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .</p> - -<p><code><canvas></code> може бути стилізований так само, як і будь-яке звичайне зображення ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.</p> - -<div id="section_2"> -<h3 id="Резервний_вміст">Резервний вміст</h3> - -<p><code><canvas></code> відрізняється від {{HTMLElement("img")}} тим, щоя як і для {{HTMLElement("video")}}, {{HTMLElement("audio")}}, або {{HTMLElement("picture")}} елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <code><canvas></code>, таких, як версії Internet Explorer до 9ї версії чи текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.</p> - -<p>Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <code><canvas></code>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <code><canvas></code> і просто покажуть зображення нормально.</p> - -<p>наприклад, ми можемо задати текстовий опис вмісту canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>Рекомендація користувачу встановити інший браузер, що підтримує canvas, не допомогає тим з них, хто не може взагалі прочтитати вміст canvas, наприклад. Використання резервного вмісту або додаткового DOM допомогає <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a><a href="/en-US/docs/">.</a></p> - -<h3 id="Обовязковий_тег_<canvas>">Обов'язковий тег <code></canvas></code> </h3> - -<p>Як наслідок способу надання резервного вмісту, на відміну від елемента {{HTMLElement("img")}}, {{HTMLElement("canvas")}} <strong>вимагає </strong> закриваючого тега (<code></canvas></code>). у випадку його відстусності, весь документ після <code></canvas></code> буде розглядатися як резервний вміст та не буде показаний.</p> - -<p>Якщо резервний вміст не потрібен, простий <code><canvas id="foo" ...></canvas></code> повністю сумісний з усіма браузерами, що підтримують canvas.</p> - -<h2 id="The_rendering_context">The rendering context</h2> - -<p>The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that exposes one or more <strong>rendering contexts</strong>, 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, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> uses a 3D context based on <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> - -<p>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. <code>getContext()</code> takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify <code>"2d"</code> to get a {{domxref("CanvasRenderingContext2D")}}.</p> - -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); -var ctx = canvas.getContext('2d'); -</pre> - -<p>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 <code>getContext()</code> method.</p> - -<div id="section_5"> -<h2 id="Checking_for_support">Checking for support</h2> - -<p>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 <code>getContext()</code> method. Our code snippet from above becomes something like this:</p> - -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); - -if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - // drawing code here -} else { - // canvas-unsupported code here -} -</pre> -</div> -</div> - -<h2 id="A_skeleton_template">A skeleton template</h2> - -<p>Here is a minimalistic template, which we'll be using as a starting point for later examples.</p> - -<div class="note"> -<p><strong>Note:</strong> it is not good practice to embed a script inside HTML. We do it here to keep the example concise.</p> -</div> - -<pre class="brush: html notranslate"><!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> -</pre> - -<p>The script includes a function called <code>draw()</code>, 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.</p> - -<p>Here is how a template would look in action. As shown here, it is initially blank.</p> - -<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p> - -<h2 id="A_simple_example">A simple example</h2> - -<p>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.</p> - -<pre class="brush: html notranslate"><!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> -</pre> - -<p>This example looks like this:</p> - -<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> 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/Чутливі_ділянки_та_доступність ---- -<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> - -<div class="summary">Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.</div> - -<h2 id="Запасний_вміст">Запасний вміст</h2> - -<p>Вміст між тегами <code><canvas> … </canvas></code> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> показує, як це можна здійснити:</p> - -<pre class="brush: html"><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> </pre> - -<p>Перегляньте відео від Стіва Фолкнера про те, як <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">екранний диктор NVDA читає цей приклад</a>.</p> - -<h2 id="Правила_ARIA">Правила ARIA</h2> - -<p>Accessible Rich Internet Applications <strong>(<a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:</p> - -<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> -</pre> - -<p>Дивіться <a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a> та <a href="/uk/docs/Web/Accessibility/ARIA/ARIA_Techniques">Використання ARIA</a>, щоб дізнатись більше.</p> - -<h2 id="Чутливі_ділянки">Чутливі ділянки</h2> - -<p>Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам <a href="/uk/docs/Web/Accessibility">доступності</a>. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Створює чутливу ділянку на полотні.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Видаляє з полотна чутливу ділянку із зазначеним <code>id</code> .</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Видаляє з полотна всі чутливі ділянки.</dd> -</dl> - -<p>Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><canvas id="canvas"></canvas></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">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 - } -}); -</pre> - -<p>Крім того, метод <code>addHitRegion()</code> може також приймати параметр <code>control</code>, що вказує елемент (має бути нащадком елемента <code>canvas</code>), до якого доправлятимуться події:</p> - -<pre class="brush: js">ctx.addHitRegion({control: element});</pre> - -<p>Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.</p> - -<h2 id="Облямівки_фокуса">Облямівки фокуса</h2> - -<p>Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом <code>drawFocusIfNeeded()</code>.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> - <dd>Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.</dd> -</dl> - -<p>Крім того, можна використати метод <code>scrollPathIntoView()</code>, щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> - <dd>Гортає поточний чи вказаний контур до видимої області.</dd> -</dl> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Потреби доступності Canvas</a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Вади доступності елемента canvas</a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Доступність HTML5 Canvas у Firefox 13 — Стів Фолкнер</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Найкращі рішення для взаємодії з елементами полотна</a></li> -</ul> - -<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> 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 ---- -<div>{{CanvasSidebar}}</div> - -<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p> - -<div class="summary"> -<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> implementations which will be created in this tutorial.</p> -</div> - -<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> 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.</span></p> - -<p>First introduced in WebKit by Apple for the OS X Dashboard, <code><canvas></code> has since been implemented in browsers. Today, all major browsers support it.</p> - -<h2 id="Before_you_start" name="Before_you_start">Before you start</h2> - -<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> 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 <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> - -<h2 id="In_this_tutorial" name="In_this_tutorial">In this tutorial</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li> -</ul> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li> - <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> - <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> - <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li> -</ul> - -<h2 id="A_note_to_contributors">A note to contributors</h2> - -<p>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.</p> - -<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> 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 ---- -<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> - -<p>Відображає інтерактивний перелік властивостей заданого JavaScript об'єкту. Кінцеві дані показуються у вигляді ієрархічного списку з трикутниками, клікнувши на які мишкою Ви можете переглянути вміст дочірніх об'єктів.</p> - -<p>{{AvailableInWorkers}}</p> - -<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p> - -<h2 id="Синтакс">Синтакс</h2> - -<pre class="syntaxbox">console.dir(<em>object</em>); -</pre> - -<h2 id="Параметри">Параметри</h2> - -<dl> - <dt><code>object</code></dt> - <dd>Об'єкт JavaScript, властивості якого ви хочете переглянути.</dd> -</dl> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("8.0")}}</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("38.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("8.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("38.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li> -</ul> 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 ---- -<div>{{APIRef("Console API")}}</div> - -<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> - -<p>The <code>Console</code> 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 <code>console</code>. For example:</p> - -<pre class="brush: js">console.log("Failed to open the specified link")</pre> - -<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Console.assert()")}}</dt> - <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd> - <dt>{{domxref("Console.clear()")}}</dt> - <dd>Clear the console.</dd> - <dt>{{domxref("Console.count()")}}</dt> - <dd>Log the number of times this line has been called with the given label.</dd> - <dt>{{domxref("Console.debug()")}}</dt> - <dd>An alias for <code>log() - starting with Chromium 58 this method is a no-op on Chromium browsers.</code></dd> - <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt> - <dd>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.</dd> - <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt> - <dd> - <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.</p> - </dd> - <dt>{{domxref("Console.error()")}}</dt> - <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> - <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> - <dd>An alias for <code>error()</code></dd> - <dt>{{domxref("Console.group()")}}</dt> - <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> - <dt>{{domxref("Console.groupCollapsed()")}}</dt> - <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> - <dt>{{domxref("Console.groupEnd()")}}</dt> - <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> - <dt>{{domxref("Console.info()")}}</dt> - <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> - <dt>{{domxref("Console.log()")}}</dt> - <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> - <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> - <dd>Starts the browser's build-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd> - <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> - <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd> - <dt>{{domxref("Console.table()")}}</dt> - <dd>Displays tabular data as a table.</dd> - <dt>{{domxref("Console.time()")}}</dt> - <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> - <dt>{{domxref("Console.timeEnd()")}}</dt> - <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd> - <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> - <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd> - <dt>{{domxref("Console.trace()")}}</dt> - <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> - <dt>{{domxref("Console.warn()")}}</dt> - <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> -</dl> - - -<h2 id="Usage" name="Usage">Usage</h2> - -<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> - -<p>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.</p> - -<p>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.</p> - -<h4 id="Outputting_a_single_object">Outputting a single object</h4> - -<p>The simplest way to use the logging methods is to output a single object:</p> - -<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; -console.log(someObject); -</pre> - -<p>The output looks something like this:</p> - -<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> - -<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> - -<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p> - -<pre class="brush: js">var car = "Dodge Charger"; -var someObject = {str:"Some text", id:5}; -console.info("My first car was a", car, ". The object is: ", someObject);</pre> - -<p>This output will look like this:</p> - -<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) -</pre> - -<h4 id="Using_string_substitutions">Using string substitutions</h4> - -<p>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:</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">Substitution string</td> - <td class="header">Description</td> - </tr> - <tr> - <td>%o or %O</td> - <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td> - </tr> - <tr> - <td>%d or %i</td> - <td>Outputs an integer. Number formatting is supported, for example <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td> - </tr> - <tr> - <td>%s</td> - <td>Outputs a string.</td> - </tr> - <tr> - <td>%f</td> - <td>Outputs a floating-point value. Formatting is supported, for example <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td> - </tr> - </tbody> -</table> - -<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> - -<pre>for (var i=0; i<5; i++) { - console.log("Hello, %s. You've called me %d times.", "Bob", i+1); -} -</pre> - -<p>The output looks like this:</p> - -<pre>[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. -</pre> - -<h4 id="Styling_console_output">Styling console output</h4> - -<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p> - -<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> - -<div>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.</div> - -<div> </div> - -<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> - -<div> </div> - -<div class="note"> -<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.</p> -</div> - -<div> </div> - -<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> - -<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> - -<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> - -<p>To exit the current group, simply call console.groupEnd(). For example, given this code:</p> - -<pre class="brush: js">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"); -</pre> - -<p>The output looks like this:</p> - -<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> - -<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> - -<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> - -<p>For example, given this code:</p> - -<pre class="brush: js">console.time("answer time"); -alert("Click to continue"); -console.timeEnd("answer time"); -</pre> - -<p>will log the time needed by the user to discard the alert box:</p> - -<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> - -<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h3 id="Stack_traces">Stack traces</h3> - -<p>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:</p> - -<pre class="brush: js">function foo() { - function bar() { - console.trace(); - } - bar(); -} - -foo(); -</pre> - -<p>The output in the console looks something like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Notes">Notes</h2> - -<ul> - <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li> - <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> - <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> - <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li> - <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li> -</ul> - -<h3 id="Other_implementations">Other implementations</h3> - -<ul> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> - <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> -</ul> 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 ---- -<div>{{APIRef("Console API")}}</div> - -<p>Виводить повідомлення у веб консоль.</p> - -<p>Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> - -<h2 id="Параметри">Параметри</h2> - -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Перелік JavaScript об'єктів для відображення. Представлення кожного з цих об'єктів об'єднаних разом та відображених в порядку переліку. Будьте обачливі, якщо ви вносите об'єкти в логи у останніх версіях Chrome та Firefox, адже те, що ви отримуєте у логах в консолі - це <em>посилання на об'єкти</em>, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.</dd> - <dt><code>msg</code></dt> - <dd> JavaScript рядок містить нуль або більше <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символів підміни</a>.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>JavaScript об'єкти за допомогою яких можливо заміняти <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символи підміни</a> в межах <code>msg</code>. Це надає додатковий контроль формату виводу.</dd> -</dl> - -<p>Дивіться <a href="https://developer.mozilla.org/en-US/docs/DOM/console#Outputting_text_to_the_console">Вивід тексту в консоль</a> у документації {{domxref("console")}} більш детально.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#log", "console.log()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Ознака</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>8</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Рядки заміщення</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatChrome(28)}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("9.0")}}</td> - <td>10<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Доступність для "воркерів"</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("38.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Ознака</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Рядки заміщення</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("9.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Доступність для "воркерів"</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("38.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Якщо від`ємне значення прямує до <code>%d</code>, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.</p> - -<p>[2] <code>%c</code> не підтримується, <code>%d</code> буде візуалізоване, як 0, якщо це не є числом.</p> - -<h2 id="Різниця_із_console.dir()">Різниця із console.dir()</h2> - -<p>Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().</p> - -<p>Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.</p> - -<p><img alt="" src="http://i.imgur.com/DozDcYR.png"></p> - -<p>Помітимо:</p> - -<ul> - <li><code>console.log</code> друкує елемент у вигляді дерева HTML</li> - <li><code>console.dir</code> друкує елемент у вигляді JSON - дерева.</li> -</ul> - -<p>Зокрема, <code>console.log</code> надає спеціальну обробку для DOM - елементів, тоді як <code>console.dir</code> цього не робить. Це часто виявляється корисним при спробі отримати повне уявлення про об`єкти DOM JS.</p> - -<p>Більше інформації про ці та інші функції можна отримати за посиланням: <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API</a>.</p> - -<h2 id="Також_перегляньте">Також перегляньте:</h2> - -<ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug підтримує додаткові можливості у власній реалізації console.log(), наприклад, <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li> - <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> -</ul> 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 ---- -<p>{{APIRef("DOM")}} Інтерфейс <strong><code>CustomEvent</code></strong> являє собою події, ініціалізовані додатком для будь-яких цілей.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt> - <dd>Створює <code>CustomEvent</code>.</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<dl> - <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt> - <dd>Будь-які дані, передані при ініціалізації події.</dd> -</dl> - -<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p> - -<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt> - <dd> - <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Ініціалізує об'єкт </span></font>CustomEvent</code>. Якщо подія вже відправлена, цей метод нічого не робить.</p> - </dd> -</dl> - -<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p> - -<p>{{Page("/en-US/docs/Web/API/Event", "Methods")}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Комертарі</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> - - - -<p>{{Compat("api.CustomEvent")}}</p> - -<h2 id="Firing_from_privileged_code_to_non-privileged_code">Firing from privileged code to non-privileged code</h2> - -<p>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.</p> - -<p>While creating a CustomEvent object, you must create the object from the same <a href="/en-US/docs/XUL/window">window</a>. The <code>detail</code> 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 <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p> - -<pre class="brush: js">// 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); -}</pre> - -<p>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.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li> - <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li> - <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li> -</ul> 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 ---- -<p>{{APIRef("DOM")}}{{deprecated_header}}</p> - -<p>Метод <code><strong>CustomEvent.initCustomEvent()</strong></code> ініціалізує <code>CustomEvent</code> об'єкт. Якщо на момент ініціалізації event-об'єкт вже був переданий(dispatched), то виклик метода {{ domxref("CustomEvent.initCustomEvent()") }} не матиме ніякого ефекту.</p> - -<p>Події,ініціалізовані у такий спосіб, повинні бути створені за допомогою метода {{domxref("Document.createEvent()") }}.Вказаний метод має бути викликаний для створення події до того, як вона буде передана за допомогою {{ domxref("EventTarget.dispatchEvent()") }}. Як тільки подія є переданою, ніяких дій цей метод більше не виконує. </p> - -<div class="note"> -<p><strong>Більше не використовуйте цей метод, оскільки він засуджується.</strong></p> - -<p>Натомість, використовуйте спеціальні конструктори подій, наприклад {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. Сторінка про <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> містить більше інформації про способи їхнього використання.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>); -</pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt><code><em>type</em></code></dt> - <dd>Це {{domxref("DOMString")}} , що містить назву події</dd> - <dt><em><code>canBubble</code></em></dt> - <dd>Це {{jsxref("Boolean")}} , що вказує чи подія виринає вгору(bubbles up) крізь DOM чи ні.</dd> - <dt><code><em>cancelable</em></code></dt> - <dd>Це {{jsxref("Boolean")}} , що вказує чи подія є cancelable.</dd> - <dt><em><code>deta</code></em><em><code>il</code></em></dt> - <dd>Дані, передані під час ініціалізації події</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Початкове визначення, однак, вже вважається небажаним, натомість, рекомендується використання конструктора,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Опис</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td> - <p>Базова підтримка</p> - </td> - <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(6)}}</td> - <td>9</td> - <td>11</td> - <td>5.1 (533.3)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Опис</th> - <th>Android Webview</th> - <th>Chrome для Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td> - <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(6)}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Починаючи з Chrome 59, <code>canBubble</code>, <code>cancelable</code>, та <code>detail</code> є необов'язковими параметрами , які за замовчуванням містять значення <code>false</code>, <code>false</code>, та <code>null</code> відповідно.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{domxref("CustomEvent")}}</li> - <li>Конструктор для використання замість небажаного метода:{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li> -</ul> 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 ---- -<div>{{APIRef}}</div> - -<div> </div> - -<p><span class="seoSummary"><strong><code>Document</code></strong> інтерфейс представляє будь-яку веб-сторінку, завантажену в браузер і яка слугує точкою входу в контент веб-сторінки, чим є <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> DOM tree включає елементи такі як {{HTMLElement("body")}} і {{HTMLElement("table")}}, серед <a href="/en-US/docs/Web/HTML/Element">багатьох інших</a>. Це забезпечує глобальну функціональність для документу, таку як отримувати URL сторінки і створювати нові елементи в документі.</p> - -<p>{{inheritanceDiagram}}</p> - -<p><code>Інтерфейс Document</code> описує загальні властивості і методи для будь-якого типу документу. Залежно від типу документу (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), більший API доступний: HTML-документи, які подаються з <code>text/html</code> типом контенту, також реалізовують {{domxref("HTMLDocument")}} інтерфейс, тоді як XML і SVG документи реалізовують {{domxref("XMLDocument")}} інтерфейс.</p> - -<h2 id="Properties" name="Properties">Конструктор</h2> - -<dl> - <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> - <dd>Створює новий <code>Document</code> об'єкт.</dd> -</dl> - -<h2 id="Properties" name="Properties">Властивості</h2> - -<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p> - -<dl> - <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> - <dd>Забезпечує доступ до всіх елементів в документі. Це застарілий, нестандартний інтерфейс і він не повинен використовуватись.</dd> - <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> - <dd>Використовується з {{domxref("Document.load")}} щоб вказати асинхронний запит.</dd> - <dt>{{domxref("Document.body")}}</dt> - <dd>Повертає {{HTMLElement("body")}}, або {{htmlelement("frameset")}} вузол поточного документу.</dd> - <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> - <dd>Повертає кодування, яке використовується в документі.</dd> - <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd> - <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Вказує чи документ інтерпретується в <em>quirks</em> чи <em>strict</em> режимі.</dd> - <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Повертає Content-Type з MIME-заголовку поточного документу.</dd> - <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> - <dd>Повертає Визначення Типу Документу (DTD) поточного документу.</dd> - <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> - <dd>Повертає {{domxref("Element")}}, який є прямим нащадком document. Для HTML-документів, це, як правило, <span class="seoSummary">{{domxref("HTMLElement")}}</span> елемент.</dd> - <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> - <dd>Повертає розміщення документу у вигляді стрічки.</dd> - <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> - <dd>Повинна повертати {{domxref("DOMConfiguration")}} об'єкт.</dd> - <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> - <dd><code>true,</code>якщо документ в {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> - <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> - <dd>Повертає DOM реалізацію, асоційовану з поточним документом.</dd> - <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd> - <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>Повертає ім'я набору стилів, які були останніми включені. Має значення <code>null,</code> аж поки таблиця стилів змінена встановленням значення {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> - <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> - <dd>Повертає {{jsxref("Boolean")}}, яким є <code>true</code> лише якщо цей документ є синтетичним, таким як окреме зображення, відео-, аудіо-файл, або т. п.</dd> - <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd>Елемент, який зараз є в повноекранному режимі для цього документу.</dd> - <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd><code>true,</code> якщо виклик {{domxref("Element.mozRequestFullscreen()")}} буде успішним в поточному документі.</dd> - <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>Повертає бажаний набір стилів, як вказано автором сторінки.</dd> - <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt> - <dd>Повертає посилання на {{domxref("Element")}} ,який прокручує документ.</dd> - <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> - <dd>Повертає набір стилів, який зараз у використанні.</dd> - <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> - <dd>Повертає список наборів стилів, доступних для документу.</dd> - <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> - <dd> - <p>Повертає <code>string,</code> яка виражає видимість стану документу. Можливими значеннями є <code>visible</code>, <code>hidden</code>, <code>prerender</code>, і <code>unloaded</code>.</p> - </dd> - <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> - <dd>Повертає кодування, як визначено XML-оголошенням.</dd> - <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> - <dd>Повертає <code>true,</code> якщо оголошення XML вказує документу бути автономним (<em>e.g.,</em> Зовнішня частина DTD впливає на контент документу), або <code>false</code>.</dd> - <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> - <dd>Повертає номер версії, як вказано в XML-оголошенні, або <code>"1.0",</code> якщо оголошення відсутнє.</dd> -</dl> - -<p><code>Document</code> інтерфейс розширюється {{domxref("ParentNode")}} інтерфейсом:</p> - -<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> - -<h3 id="Розширення_для_HTML-документу"> Розширення для HTML-документу</h3> - -<p><em>Інтерфейс <code>Document</code> для HTML-документів розширює {{domxref("HTMLDocument")}} інтерфейс, або, починаючи з HTML5, розширюється для таких документів.</em></p> - -<dl> - <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> - <dd>Повертає або встановлює колір активних посилань в тілі документу.</dd> - <dt>{{domxref("Document.anchors")}}</dt> - <dd>Повертає список всіх якорів в документі.</dd> - <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> - <dd>Повертає впорядкований список апплетів в межах документу.</dd> - <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> - <dd>Отримує/встановлює фоновий колір поточного документу.</dd> - <dt>{{domxref("Document.cookie")}}</dt> - <dd>Повертає список куків, розділених крапкою з комою, для того документу або встановлює одиничний кукі.</dd> - <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> - <dd>Повертає посилання на об'єкт window.</dd> - <dt>{{domxref("Document.designMode")}}</dt> - <dd>Отримує/встановлює можливість редагування цілого документу.</dd> - <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> - <dd>Отримує/встановлює направленість (rtl - справа наліво/ltr зліва направо) документу.</dd> - <dt>{{domxref("Document.domain")}}</dt> - <dd>Отримує/встановлює домен поточного документу.</dd> - <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> - <dd>Повертає список вбудованих {{HTMLElement('embed')}} елементів в межах поточного документу.</dd> - <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> - <dd>Отримує/встановлює колір переднього плану, або колір тексту поточного документу.</dd> - <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> - <dd>Повертає список {{HTMLElement("form")}} елементів в межах поточного документу.</dd> - <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> - <dd>Повертає {{HTMLElement("head")}} елемент поточного документу.</dd> - <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Отримує/встановлює висоту поточного документу.</dd> - <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> - <dd>Повертає список зображень в поточному документі.</dd> - <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> - <dd>Повертає дату, коли документ був востаннє змінений.</dd> - <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> - <dd>Отримує/встановлює колір гіперпосилань в документі.</dd> - <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> - <dd>Повертає список всіх гіперпосилань в документі.</dd> - <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> - <dd>Повертає URI поточного документу.</dd> - <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> - <dd>Повертає список доступних плагінів.</dd> - <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Повертає статус завантаження документу.</dd> - <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> - <dd>Повертає URI сторінки, яка прив'язана до цієї сторінки.</dd> - <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> - <dd>Повертає всі {{HTMLElement("script")}} елементи в документі.</dd> - <dt>{{domxref("Document.title")}}</dt> - <dd>Встановлює або отримує назву поточного документу.</dd> - <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> - <dd><span style="line-height: 19.0909080505371px;">Повертає розміщення документу у вигляді стрічки.</span></dd> - <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> - <dd>Отримує/встановлює колір відвіданих гіперпосилань.</dd> - <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Повертає ширину поточного документу.</dd> -</dl> - -<h3 id="Властивості_включені_з_DocumentOrShadowRoot">Властивості, включені з DocumentOrShadowRoot</h3> - -<p><em>Інтерфейс <code>Document</code> включає наступні властивості, визначені в {{domxref("DocumentOrShadowRoot")}} міксині. Зверни увагу, що це, на даний час, реалізовано в Chrome; інші браузери все ще реалізують їх безпосередньо через {{domxref("Document")}} інтерфейс.</em></p> - -<dl> - <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd> - <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt> - <dd>The element that's currently in full screen mode for this document.</dd> - <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> - <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd> -</dl> - -<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> - <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> - <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("copy")}} event.</dd> - <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("cut")}} event.</dd> - <dt>{{domxref("Document.onfullscreenchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> - <dt>{{domxref("Document.onfullscreenerror")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> - <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("paste")}} event.</dd> - <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> - <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> - <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> - <dd>Represents the event handling code for the {{event("pointerlockerror")}} event.</dd> - <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> - <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("Document.onvisibilitychange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> - <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> -</dl> - -<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> - -<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> - -<h2 id="Methods" name="Methods">Методи</h2> - -<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p> - -<dl> - <dt>{{domxref("Document.adoptNode()")}}</dt> - <dd>Приймає вузол із зовнішнього документу.</dd> - <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Дивись {{domxref("Window.captureEvents")}}.</dd> - <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> - <dd>Отримує об'єкт {{Domxref("Range")}} для фрагмента документу у відповідності до вказаних координат.</dd> - <dt>{{domxref("Document.createAttribute()")}}</dt> - <dd>Створює новий об'єкт {{domxref("Attr")}} і повертає його.</dd> - <dt>{{domxref("Document.createAttributeNS()")}}</dt> - <dd>Створює новий вузол атрибута в заданому просторі імен і повертає його.</dd> - <dt>{{domxref("Document.createCDATASection()")}}</dt> - <dd>Створює новий вузол CDATA і повертає його.</dd> - <dt>{{domxref("Document.createComment()")}}</dt> - <dd> Створює новий вузол коментаря і повертає його.</dd> - <dt>{{domxref("Document.createDocumentFragment()")}}</dt> - <dd>Створює новий фрагмент документу.</dd> - <dt>{{domxref("Document.createElement()")}}</dt> - <dd>Створює новий елемент із заданим ім'ям тега.</dd> - <dt>{{domxref("Document.createElementNS()")}}</dt> - <dd>Створює новий елемент із заданим ім'ям тега і URI простором імен.</dd> - <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> - <dd>Створює нове посилання на об'єкт і повертає його.</dd> - <dt>{{domxref("Document.createEvent()")}}</dt> - <dd>Створює об'єкт події.</dd> - <dt>{{domxref("Document.createNodeIterator()")}}</dt> - <dd>Створює об'єкт {{domxref("NodeIterator")}}.</dd> - <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> - <dd>Створює новий об'єкт {{domxref("ProcessingInstruction")}}.</dd> - <dt>{{domxref("Document.createRange()")}}</dt> - <dd>Створює об'єкт {{domxref("Range")}}.</dd> - <dt>{{domxref("Document.createTextNode()")}}</dt> - <dd>Створює текстовий вузол.</dd> - <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> - <dd>Створює об'єкт {{domxref("Touch")}}.</dd> - <dt>{{domxref("Document.createTouchList()")}}</dt> - <dd>Створює об'єкт {{domxref("TouchList")}}.</dd> - <dt>{{domxref("Document.createTreeWalker()")}}</dt> - <dd> Створює об'єкт{{domxref("TreeWalker")}}.</dd> - <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> - <dd>Вмикає таблиці стилів для вказаного набору таблиць стилів.</dd> - <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> - <dd>Звільняє блокування вказівника.</dd> - <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> - <dd>Повертає масив всіх об'єктів {{domxref("Animation")}}, які діють на даний момент, чиї цільові елементи є нащадками <code>document</code>.</dd> - <dt>{{domxref("Document.getElementsByClassName()")}}</dt> - <dd>Повертає список елементів із заданим ім'ям класу.</dd> - <dt>{{domxref("Document.getElementsByTagName()")}}</dt> - <dd>Повертає список елементів із заданим ім'ям тега.</dd> - <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> - <dd>Повертає список елементів із заданим ім'ям тега і простором імен.</dd> - <dt>{{domxref("Document.importNode()")}}</dt> - <dd>Повертає клон вузла з зовнішнього документу.</dd> - <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> - <dd>Заміняє сутності, нормалізує текстові вузли, і т. д.</dd> - <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Звільняє поточний захват мишки, якщо він знаходиться на елементі в цьому документі.</dd> - <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>Дивись {{domxref("Window.releaseEvents()")}}.</dd> - <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> - <dd>Дивись {{domxref("Window.routeEvent()")}}.</dd> - <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Дозволяє змінити елемент, який використовуєтья в якості фонового зображення для вказаного ідентифікатора елемента. </dd> -</dl> - -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("ParentNode")}}:</p> - -<dl> - <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> - <dd>Повертає посилання на об'єкт визначеного елемента.</dd> - <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Повертає перший Element-вузол в межах документу, в порядку документу, який співпадає зі вказаними селекторами.</dd> - <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Повертає список всіх Element-вузлів в межах документу, які співпадають з вказаними селекторами.</dd> -</dl> - -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("XPathEvaluator")}}:</p> - -<dl> - <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> - <dd>Компілює <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> який може тоді бути використаний для (повторюваних) оцінювань.</dd> - <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> - <dd>Створює об'єкт {{domxref("XPathNSResolver")}}.</dd> - <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> - <dd>Вираховує вираз XPath.</dd> -</dl> - -<h3 id="Розширення_для_HTML-документів">Розширення для HTML-документів</h3> - -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">інтерфейс </span></font>Document</code> для HTML-документів наслідується від інтерфейсу {{domxref("HTMLDocument")}} або, починаючи з HTML5, розширюється для таких документів:</p> - -<dl> - <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> - <dt>{{domxref("document.close()")}}</dt> - <dd>Closes a document stream for writing.</dd> - <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> - <dd>On an editable document, executes a formating command.</dd> - <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> - <dd>Returns a list of elements with the given name.</dd> - <dt>{{domxref("document.hasFocus()")}}</dt> - <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> - <dt>{{domxref("document.open()")}}</dt> - <dd>Opens a document stream for writing.</dd> - <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> - <dd>Returns true if the formating command can be executed on the current range.</dd> - <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> - <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> - <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> - <dd>Returns true if the formating command has been executed on the current range.</dd> - <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> - <dd>Returns true if the formating command is supported on the current range.</dd> - <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> - <dd>Returns the current value of the current range for a formating command.</dd> - <dt>{{domxref("document.write","document.write(String text)")}}</dt> - <dd>Writes text in a document.</dd> - <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> - <dd>Writes a line of text in a document.</dd> -</dl> - -<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3> - -<p><em>The <code>Document</code> 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.</em></p> - -<dl> - <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt> - <dd>Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd> - <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt> - <dd>Returns the topmost element at the specified coordinates.</dd> - <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> - <dd>Returns an array of all elements at the specified coordinates.</dd> - <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> - <dd>Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Adds <code>onvisibility</code><code>change</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> - <td>{{Spec2('Selection API')}}</td> - <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1','#i-Document','Document')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition for the interface</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Supersede DOM 1</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Supersede DOM 2</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Intend to supersede DOM 3</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> - <td>{{Spec2('DOM3 XPath')}}</td> - <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> - </tr> - <tr> - <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> - -<h3 id="Firefox_notes">Firefox notes</h3> - -<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> - -<dl> - <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> - <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> - <dt>{{domxref("document.popupNode")}}</dt> - <dd>Returns the node upon which a popup was invoked.</dd> - <dt>{{domxref("document.tooltipNode")}}</dt> - <dd>Returns the node which is the target of the current tooltip.</dd> -</dl> - -<p>Mozilla also define some non-standard methods:</p> - -<dl> - <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> - <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> - <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> - <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> - <dt>{{domxref("document.loadOverlay")}}</dt> - <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> - <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> - <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> -</dl> - -<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> - -<p>Microsoft defines some non-standard properties:</p> - -<dl> - <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> - <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> -</dl> - -<dl> - <dt>{{domxref("document.contains")}}</dt> - <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> -</dl> 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 ---- -<div>{{APIRef}}</div> - -<p>Подія <code> visibilitychange</code> запускається в документі, коли вміст його вкладки змінився, став видимим або прихованим.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Бульбашки</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">Скасовується</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Інтерфейс</th> - <td>{{domxref("event")}}</td> - </tr> - <tr> - <th scope="row">Свойство обработчика события</th> - <td>{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Інформація_про_використання">Інформація про використання</h2> - -<p>У подію не включено оновлення статусу видимості документа, але цю інформацію можна отримати з властивості {{domxref ("Document.visibilityState", "visibilityState")}} документа.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>У цьому прикладі починається відтворення музичного запису, коли документ стає видимим, і призупиняється відтворення музики, коли документ більше не видно.</p> - -<pre class="brush:js">document.addEventListener("visibilitychange", function() { - if (document.visibilityState === 'visible') { - backgroundMusic.play(); - } else { - backgroundMusic.pause(); - } -}); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність з браузерами</h2> - -<p>{{Compat("api.Document.visibilitychange")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Page_Visibility_API">API видимості сторінки</a></li> - <li>{{domxref("Document.visibilityState")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>DOMString</code></strong> є 16-бітовою послідовністю безнакових цілих, типово інтерпретуєтьсят як UTF-16 <a href="http://www.unicode.org/glossary/#code_unit">code units</a>. Це точно відповідає до JavaScript <a href="https://tc39.es/ecma262/#sec-ecmascript-language-types-string-type">примітивному типу String</a>. Коли <code>DOMString</code> застосовється у JavaScript, це напряму відображує відповідну {{jsxref("String")}}.</p> - -<p>When a Web API accepts a <code>DOMString</code>, the value provided will be stringified, using the <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> abstract operation. (For types other than Symbol, this has the same behavior as the {{jsxref("String/String", "String()")}} function.)</p> - -<p>Certain Web APIs accepting a <code>DOMString</code> have an additional legacy behavior, where passing {{jsxref("null")}} stringifies to the empty string instead of the usual <code>"null"</code>.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td> - <td>{{Spec2('WebIDL')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('WebIDL', '#es-DOMString')}}</td> - <td>{{Spec2('WebIDL')}}</td> - <td>This defines how JavaScript values are converted to <code>DOMString</code> and vice versa.</td> - </tr> - </tbody> -</table> - -<h2 id="Також_дивися">Також дивися:</h2> - -<ul> - <li>JavaScript {{jsxref("String")}}</li> - <li>{{domxref("USVString")}}</li> - <li>{{domxref("CSSOMString")}}</li> - <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>getClientRects()</strong></code> метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS border box</a> в клієнта.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>let <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre> - -<h3 id="Return_value">Return value</h3> - -<p>Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання <code>left</code>, <code>top</code>, <code>right</code> <code>і bottom</code> властивості, які описують 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-<code><svg></code>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<code><svg></code> establishes (and to be clear, the rectangles are also transformed by the outer-<code><svg></code>'s <code>viewBox</code> transform, if any).</p> - -<p>Originally, Microsoft intended this method to return a <code>TextRectangle</code> object for each <em>line</em> of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each <em>border box</em>. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.</p> - -<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds <code>width</code> and <code>height</code> properties to the <code>TextRectangle</code> object.")}}</p> - -<p>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.</p> - -<p>The returned rectangles do not include the bounds of any child elements that might happen to overflow.</p> - -<p>For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, <code>display:none</code> elements, and generally any elements that are not directly rendered, an empty list is returned.</p> - -<p>Rectangles are returned even for CSS boxes that have empty border-boxes. The <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> coordinates can still be meaningful.</p> - -<p>Fractional pixel offsets are possible.</p> - -<h2 id="Examples">Examples</h2> - -<p>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 <code>withClientRectsOverlay</code>.</p> - -<h3 id="HTML">HTML</h3> - -<p>Example 1: This HTML creates three paragraphs with a <code><span></code> inside, each embedded in a <code><div></code> block. Client rects are painted for the paragraph in the second block, and for the <code><span></code> element in the third block.</p> - -<pre class="brush: html"><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></pre> - -<p>Example 2: This HTML creates three ordered lists. Client rects are painted for the <code><ol></code> in the second block, and for each <code><li></code> element in the third block.</p> - -<pre class="brush: html"><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></pre> - -<p>Example 3: This HTML creates two tables with captions. Client rects are painted for the <code><table></code> in the second block.</p> - -<pre class="brush: html"><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></pre> - -<h3 id="CSS">CSS</h3> - -<p>The CSS draws borders around the paragraph and the <code><span></code> inside each <code><div></code> block for the first example, around the <code><ol></code> and <code>li</code> for the second example, and around <code><table></code>, <code><th></code>, and <code><td></code> elements for the third example.</p> - -<pre class="brush: css">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; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>The JavaScript code draws the client rects for all HTML elements that have CSS class <code>withClientRectsOverlay</code> assigned.</p> - -<pre class="brush: js">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]); - } -})();</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('Examples', 680, 650)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h3 id="Notes">Notes</h3> - -<p><code>getClientRects()</code> was first introduced in the MS IE DHTML object model.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Element.getClientRects")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li> - <li>{{DOMxRef("Element.getClientRects()")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><strong><code>Element</code></strong><code>це найбільш загальний базовий класс</code>з якого наслідуються всі об'єкти {{DOMxRef("Document")}} . Тільки він має методи та властивості, загальні для всіх видів елементів. Більшість специфічних классів наслідуються з <code>Element</code>.</span> Наприклад, {{DOMxRef("HTMLElement")}} інтерфейс є базовим інтерфейсом для HTML елементів, тоді як {{DOMxRef("SVGElement")}} інтерфейс є базовим для усіх SVG елементів. Більшість функціональності визначається ще далі у ієрархії классу.</p> - -<p>Мови за межами сфери Web платформ, такі як XUL, через інтерфейс <code>XULElement</code> , також застосовують <code>Element</code>.</p> - -<p>{{InheritanceDiagram}}implement</p> - -<h2 id="Properties" name="Properties">Properties</h2> - -<p><em>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")}}, </em>and {{DOMxRef("Animatable")}}.</p> - -<dl> - <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd> - <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd> - <dt>{{DOMxRef("Element.className")}}</dt> - <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd> - <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> - <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> - <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> - <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> - <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> - <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> - <dt>{{DOMxRef("Element.id")}}</dt> - <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> - <dt>{{DOMxRef("Element.innerHTML")}}</dt> - <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> - <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> - <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> - <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> - <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. - <div class="note"> - <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> - </div> - </dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> - <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> - <dt>{{DOMxRef("Element.outerHTML")}}</dt> - <dd>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.</dd> - <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> - <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> - <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> - <dt>{{DOMxRef("Element.scrollLeft")}}</dt> - <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> - <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> - <dt>{{DOMxRef("Element.scrollTop")}}</dt> - <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> - <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> - <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> - <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> - <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> - <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> - <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> - <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> - <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> - <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> - <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> - <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> - <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> - -<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> -</div> - -<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3> - -<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p> - -<dl> - <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> - <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd> -</dl> - -<h3 id="Handlers" name="Handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("Element.onfullscreenchange")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Element.onfullscreenerror")}}</dt> - <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> - -<dl> - <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> - <dd>Registers an event handler to a specific event type on the element.</dd> - <dt>{{DOMxRef("Element.attachShadow()")}}</dt> - <dd>Attaches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> - <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> - <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> - <dd>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.</dd> - <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> - <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> - <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> - <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> - <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> - <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> - <dd>Returns an array of Animation objects currently active on the element.</dd> - <dt>{{DOMxRef("Element.getAttribute()")}}</dt> - <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> - <dd>Returns an array of attribute names from the current element.</dd> - <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> - <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> - <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> - <dd>Returns the size of an element and its position relative to the viewport.</dd> - <dt>{{DOMxRef("Element.getClientRects()")}}</dt> - <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> - <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> - <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> - <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> - <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> - <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> - <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> - <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> - <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> - <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> - <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> - <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> - <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> - <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> - <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> - <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> - <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> - <dd>Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.</dd> - <dt>{{DOMxRef("Element.querySelector()")}}</dt> - <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> - <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> - <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> - <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> - <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> - <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> - <dd>Removes the element from the children list of its parent.</dd> - <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> - <dd>Removes the named attribute from the current node.</dd> - <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> - <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Removes the node representation of the named attribute from the current node.</dd> - <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> - <dd>Removes an event listener from the element.</dd> - <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> - <dd>Asynchronously asks the browser to make the element full-screen.</dd> - <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> - <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> -</dl> - -<dl> - <dt>{{domxref("Element.scroll()")}}</dt> - <dd>Scrolls to a particular set of coordinates inside a given element.</dd> - <dt>{{domxref("Element.scrollBy()")}}</dt> - <dd>Scrolls an element by the given amount.</dd> - <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> - <dd>Scrolls the page until the element gets into the view.</dd> - <dt>{{domxref("Element.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates inside a given element.</dd> - <dt>{{DOMxRef("Element.setAttribute()")}}</dt> - <dd>Sets the value of a named attribute of the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> - <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Sets the node representation of the named attribute from the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> - <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> - <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> - <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> - <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> - <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> - -<dl> - <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> - <dd>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 <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br> - Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> - <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> - <dd>Fired when the document view or an element has been scrolled.<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> - <dt>{{domxref("Element/select_event", "select")}}</dt> - <dd>Fired when some text has been selected.<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd> - <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd> - <dt>{{domxref("Element/wheel_event","wheel")}}</dt> - <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd> -</dl> - -<h3 id="Clipboard_events">Clipboard events</h3> - -<dl> - <dt>{{domxref("Element/copy_event", "copy")}}</dt> - <dd>Fired when the user initiates a copy action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd> - <dt>{{domxref("Element/cut_event", "cut")}}</dt> - <dd>Fired when the user initiates a cut action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd> - <dt>{{domxref("Element/paste_event", "paste")}}</dt> - <dd>Fired when the user initiates a paste action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd> -</dl> - -<h3 id="Composition_events">Composition events</h3> - -<dl> - <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> - <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd> - <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> - <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd> - <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> - <dd>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")}}.</dd> -</dl> - -<h3 id="Focus_events">Focus events</h3> - -<dl> - <dt>{{domxref("Element/blur_event", "blur")}}</dt> - <dd>Fired when an element has lost focus.<br> - Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd> - <dt>{{domxref("Element/focus_event", "focus")}}</dt> - <dd>Fired when an element has gained focus.<br> - Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> - <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> - <dd>Fired when an element is about to gain focus.</dd> - <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> - <dd>Fired when an element is about to lose focus.</dd> -</dl> - -<h3 id="Fullscreen_events">Fullscreen events</h3> - -<dl> - <dt><code>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt> - <dd>Sent to an {{domxref("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> - Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd> - <dt><code>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt> - <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> - Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd> -</dl> - -<h3 id="Keyboard_events">Keyboard events</h3> - -<dl> - <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> - <dd>Fired when a key is pressed.<br> - Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd> - <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> - <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br> - Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd> - <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> - <dd>Fired when a key is released.<br> - Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd> -</dl> - -<h3 id="Mouse_events">Mouse events</h3> - -<dl> - <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd> - <dt>{{domxref("Element/click_event", "click")}}</dt> - <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br> - Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd> - <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> - <dd>Fired when the user attempts to open a context menu.<br> - Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd> - <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> - <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br> - Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd> - <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> - <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.</dd> - <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> - <dd>Fired when a pointing device button is pressed on an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd> - <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> - <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd> - <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> - <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd> - <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> - <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd> - <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd> - <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> - <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd> - <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> - <dd>Fired when a pointing device button is released on an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd> - <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> - <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd> - <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> - <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd> - <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> - <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd> - <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> - <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd> -</dl> - -<h3 id="Touch_events">Touch events</h3> - -<dl> - <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> - <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> - <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> - <dd>Fired when one or more touch points are removed from the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> - <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> - <dd>Fired when one or more touch points are moved along the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> - <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> - <dd>Fired when one or more touch points are placed on the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> -</dl> - -<dl> - <dt></dt> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td> - <td>{{Spec2("CSS4 Pseudo-Elements")}}</td> - <td>Added the <code>pseudo()</code> method.</td> - </tr> - <tr> - <td>{{SpecName("Web Animations", '', '')}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Added the <code>getAnimations()</code> method.</td> - </tr> - <tr> - <td>{{SpecName('Undo Manager', '', 'Element')}}</td> - <td>{{Spec2('Undo Manager')}}</td> - <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> - Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> - Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Added the <code>requestPointerLock()</code> method.</td> - </tr> - <tr> - <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> - <td>{{Spec2('Fullscreen')}}</td> - <td>Added the <code>requestFullscreen()</code> method.</td> - </tr> - <tr> - <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> - Added the following method: <code>insertAdjacentHTML()</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> - Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> - Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> - Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br> - Removed the <code>schemaTypeInfo</code> property.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> - Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Element")}}</p> 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/Подія ---- -<p>{{APIRef("DOM")}}</p> - -<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace"><code><strong>Event</strong></code> інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом <code><a href="https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code>.</font></p> - -<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace">Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі <code>Event</code>. Сам по собі <code>Event</code> вміщає можливості та методи, спільні для всіх подій.</font></p> - -<p><font face="consolas, Liberation Mono, courier, monospace">Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">HTML elements</a> (таких як <code><button></code>, <code><div></code>, <code><span></code>, і т.п.) при використанні <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener()</a></code>, а це, як правило, замінює використання <a href="https://developer.mozilla.org/uk/docs/HTML/Global_attributes">атрибутів хендлера подій </a>старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>. </font></p> - -<p><font face="consolas, Liberation Mono, courier, monospace">Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем,</font><font face="consolas, Liberation Mono, courier, monospace"> обидва з яких забезпечують моніторинг перегляду відео.) </font></p> - -<p><font face="consolas, Liberation Mono, courier, monospace">Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.</font></p> - -<h2 id="Introduction" name="Introduction">Інтерфейси на основі Event</h2> - -<p>Нижче надано список інтерфейсів, які існують на основі головного <code>Event</code> інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.</p> - -<p>Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".</p> - - - -<div class="index"> -<ul> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BeforeInputEvent")}}</li> - <li>{{domxref("BeforeUnloadEvent")}}</li> - <li>{{domxref("BlobEvent")}}</li> - <li>{{domxref("ClipboardEvent")}}</li> - <li>{{domxref("CloseEvent")}}</li> - <li>{{domxref("CompositionEvent")}}</li> - <li>{{domxref("CSSFontFaceLoadEvent")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceProximityEvent")}}</li> - <li>{{domxref("DOMTransactionEvent")}}</li> - <li>{{domxref("DragEvent")}}</li> - <li>{{domxref("EditingBeforeInputEvent")}}</li> - <li>{{domxref("ErrorEvent")}}</li> - <li>{{domxref("FetchEvent")}}</li> - <li>{{domxref("FocusEvent")}}</li> - <li>{{domxref("GamepadEvent")}}</li> - <li>{{domxref("HashChangeEvent")}}</li> - <li>{{domxref("IDBVersionChangeEvent")}}</li> - <li>{{domxref("InputEvent")}}</li> - <li>{{domxref("KeyboardEvent")}}</li> - <li>{{domxref("MediaStreamEvent")}}</li> - <li>{{domxref("MessageEvent")}}</li> - <li>{{domxref("MouseEvent")}}</li> - <li>{{domxref("MutationEvent")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("PageTransitionEvent")}}</li> - <li>{{domxref("PointerEvent")}}</li> - <li>{{domxref("PopStateEvent")}}</li> - <li>{{domxref("ProgressEvent")}}</li> - <li>{{domxref("RelatedEvent")}}</li> - <li>{{domxref("RTCDataChannelEvent")}}</li> - <li>{{domxref("RTCIdentityErrorEvent")}}</li> - <li>{{domxref("RTCIdentityEvent")}}</li> - <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> - <li>{{domxref("SensorEvent")}}</li> - <li>{{domxref("StorageEvent")}}</li> - <li>{{domxref("SVGEvent")}}</li> - <li>{{domxref("SVGZoomEvent")}}</li> - <li>{{domxref("TimeEvent")}}</li> - <li>{{domxref("TouchEvent")}}</li> - <li>{{domxref("TrackEvent")}}</li> - <li>{{domxref("TransitionEvent")}}</li> - <li>{{domxref("UIEvent")}}</li> - <li>{{domxref("UserProximityEvent")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WheelEvent")}}</li> -</ul> -</div> - -<h2 id="Constructor" name="Constructor">Конструктор</h2> - -<dl> - <dt>{{domxref("Event.Event", "Event()")}}</dt> - <dd>Створює <code>Event</code> об'єкт та повертає його абоненту.</dd> -</dl> - -<h2 id="Properties" name="Properties">Властивості</h2> - -<dl> - <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> - <dd>Булевий вираз вказує на те, чи вспливає подія через DOM.</dd> - <dt>{{domxref("Event.cancelBubble")}}</dt> - <dd>Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення <code>true</code> перед поверненням з обробника події запобігає поширенню події.</dd> - <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> - <dd>Булевий вираз вказує на те, чи скасовується подія.</dd> - <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> - <dd>Булевий вираз вказує на те, чи може подія всплити через межу між тінню DOM та черговим DOM.</dd> - <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> - <dd>Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через <em>retargeting</em>.</dd> - <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> - <dd> {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.</dd> - <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> - <dd>Вказує, чи виклик {{domxref("event.preventDefault()")}} скасував подію.</dd> - <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> - <dd>Вказує, яка фаза потоку подій обробляється.</dd> - <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>Явна оригінальна мета події (Mozilla-specific).</dd> - <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).</dd> - <dt>{{domxref("Event.returnValue")}}</dt> - <dd>Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref("Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати <code>returnValue</code>, якщо ви вирішите це зробити.</dd> - <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt> - <dd>Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.</dd> - <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> - <dd>Посилання на ціль, до якої спочатку була відправлена подія.</dd> - <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> - <dd>Час, коли було створено подію (в мілісекундах). За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .</dd> - <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> - <dd>Вказує, чи була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).</dd> - <dt>Застарілі властивості</dt> -</dl> - -<p><strong>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</strong></p> - -<p>Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)</p> - -<h2 id="Methods" name="Methods">Методи</h2> - -<dl> - <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> - <dd>Створює нову подію, котра повинна бути ініційована викликом її <code>initEvent() </code>методу.</dd> - <dt>{{domxref("Event.composedPath()")}}</dt> - <dd>Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.</dd> - <dt>{{domxref("Event.preventDefault()")}}</dt> - <dd>Скасовує подію, (якщо її можливо скасувати).</dd> - <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> - <dd>Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).</dd> - <dt>{{domxref("Event.stopPropagation()")}}</dt> - <dd>Зупиняє розповсюдження подій далі у DOM.</dd> - <dt>Застарілі методи</dt> - <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> - <dd>Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}. (Повертає значення {{domxref("Event.defaultPrevented")}}.)</dd> - <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).</dd> - <dt>{{domxref("Event.preventcapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}.</dd> -</dl> - -<h2 id="Технічні_характеристики">Технічні характеристики</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Характеристика</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузером">Сумісність з браузером</h2> - -<p>приховано</p> - -<p>Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит <a href="/uk/docs/">https://github/com/mdn/browser-compat-data</a></p> - - - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>Види подій доступні: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> - <li>Для розробників Firefox add-on: - <ul> - <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> - <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> - </ul> - </li> -</ul> 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 ---- -<p>{{ApiRef("DOM")}}</p> - -<p>Властивість <code><strong>target</strong></code> інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="notranslate">var <em>theTarget</em> = <em>event</em>.target;</pre> - -<h2 id="Приклад">Приклад</h2> - -<p>Властивість <code>event.target</code> може бути використана для реалізації <strong>делегування події</strong>.</p> - -<pre class="brush: js notranslate">// Зробити список -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); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Нотатки_про_сумісність">Нотатки про сумісність</h2> - -<p>В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості <code>target</code>, і воно має ту ж саму семантику як <code>event.target</code>.</p> - -<pre class="brush: js notranslate">function hide(e) { - // Підтримка IE6-8 - var target = e.target || e.srcElement; - target.style.visibility = 'hidden'; -} -</pre> - -<h2 id="Читати_також">Читати також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Порівняння Event Targets</a></li> -</ul> 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 ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p><span class="seoSummary">The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}.</span> Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p> - -<div class="note"> -<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p> -</div> - -<h2 id="Properties_2">Properties</h2> - -<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p> - -<h3 id="Event_handlers">Event handlers</h3> - -<p>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.</p> - -<div id="Properties"> -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{domxref("HTMLMediaElement/abort_event", "abort")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> - <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd> - <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> - <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd> - <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> - <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd> - <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> - <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd> - <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> - <dd>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).</dd> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onformdata")}}</dt> - <dd>Is an {{domxref("EventHandler")}} for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.</dd> - <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt> - <dd>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.)</dd> - <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> - <dd>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.)</dd> - <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised. Deprecated. Use <code>onwheel</code> instead.</dd> - <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerenter")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> - <dd>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.</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>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.</dd> - <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt> - <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd> - <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> - <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd> - <dt>{{domxref("GlobalEventHandlers.ontransitionrun")}}</dt> - <dd>An {{domxref("EventHandler")}} called when a {{event("transitionrun")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> is running, though not nessarilty started.</dd> - <dt>{{domxref("GlobalEventHandlers.ontransitionstart")}}</dt> - <dd>An {{domxref("EventHandler")}} called when a {{event("transitionstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has started transitioning.</dd> - <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> -</dl> -</div> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface defines no methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td> - <td>{{Spec2('Selection API')}}</td> - <td>Adds <code>onselectionchange.</code></td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.GlobalEventHandlers")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element")}}</li> - <li>{{domxref("EventHandler")}}</li> - <li>{{domxref("Event")}}</li> -</ul> 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 ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>Властивість <code><strong>onkeydown</strong></code> спільно з <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/GlobalEventHandlers"><code>GlobalEventHandlers</code></a> є <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/EventHandler" rel="nofollow"><code>EventHandler</code></a> обробляє події {{event("keydown")}}.</p> - -<p>Подія <code>keydown</code> спрацьовує, коли користувач натискає клавішу клавіатури.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>target</em>.onkeydown = <em>functionRef</em>;</pre> - -<h3 id="Значення">Значення</h3> - -<p><code>functionRef</code> це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p> - -<h2 id="Приклад">Приклад</h2> - -<p>У цьому прикладі виводитимуться значення {{domxref("KeyboardEvent.code")}} щоразу, коли ви натискаете клавішу всередині елемента {{HtmlElement("input")}}.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input> -<p id="log"></p></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">const input = document.querySelector('input'); -const log = document.getElementById('log'); - -input.onkeydown = logKey; - -function logKey(e) { - log.textContent += ` ${e.code}`; -}</pre> - -<h3 id="Підсумок">Підсумок</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами </h2> - - - -<p>{{Compat("api.GlobalEventHandlers.onkeydown")}}</p> - -<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3> - -<p>Так якб Firefox 65 події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=354358" rel="noopener">bug 354358</a>, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/" rel="noopener">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p> - -<pre class="brush: js"><code>eventTarget.addEventListener("keydown", event => { - if (event.isComposing || event.keyCode === 229) { - return; - } - // зробити що-небудь });</code> -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Подія {{Event("keydown")}} </li> - <li>Пов'язані обробники подій - <ul> - <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> - <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li> - </ul> - </li> -</ul> 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 ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<div></div> - -<p>Властивість <code><strong>onkeyup</strong></code> спільно з {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} обробляє події {{event("keyup")}} .</p> - -<p>Подія <code>keyup</code> спрацьовує, коли користувач відпускає раніше натиснуту клавішу клавіатури.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>target</em>.onkeyup = <em>functionRef</em>;</pre> - -<h3 id="Значення">Значення</h3> - -<p><code>functionRef </code>це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p> - -<h2 id="Приклад">Приклад</h2> - -<p>У цьому прикладі виводитимуться значення {{domxref ("KeyboardEvent.code")}} щоразу, коли ви відпускаєте клавішу всередині елемента {{HtmlElement ("input")}}.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input> -<p id="log"></p></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">const input = document.querySelector('input'); -const log = document.getElementById('log'); - -input.onkeyup = logKey; // - -function logKey(e) { - log.textContent += ` ${e.code}`; //Видає у тегу <p> ключ натиснутої клавіші -}</pre> - -<h3 id="Підсумок">Підсумок</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - - - -<p>{{Compat("api.GlobalEventHandlers.onkeyup")}}</p> - -<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3> - -<p>Так як Firefox 65, події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT ({{bug (354358)}}, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p> - -<pre class="brush: js"><code>eventTarget.addEventListener("keyup", event => { - if (event.isComposing || event.keyCode === 229) { - return; - } - // зробити що-небудь -});</code></pre> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Подія {{Event("keyup")}} </li> - <li>Пов'язані обробники подій - <ul> - <li>{{domxref("GlobalEventHandlers.onkeydown")}}</li> - <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> - </ul> - </li> -</ul> 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 ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>Властивістю <code><strong>onmouseover</strong></code> мікшіна {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} , який обробляє події наведення миші {{event("mouseover")}}.</p> - -<p>Подія <code>mouseover</code> запускається, коли користувач переміщує курсор на певний елемент. </p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>element</em>.onmouseover = <em>function</em>; -</pre> - -<h2 class="editable" id="Приклад"><span>Приклад</span></h2> - -<p><span><span>Цей приклад додає <code>onmouseover</code> та <code>onmouseout</code> подіі до параграфу. Спробуйте перемістити мишу до елементу.</span></span></p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Test your mouse on me!</p></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">const p = document.querySelector('p'); -p.onmouseover = logMouseOver; -p.onmouseout = logMouseOut; - -function logMouseOver() { - p.innerHTML = 'Виявлено MOUSE OVER'; -} - -function logMouseOut() { - p.innerHTML = 'Виявлено MOUSE OUT'; -}</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<div> - - -<p>{{Compat("api.GlobalEventHandlers.onmouseover")}}</p> -</div> 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 ---- -<div>{{ APIRef("Fetch") }}</div> - -<p>Інтерфейс <strong><code>Headers</code></strong> <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> дозволяє вам виконувати різні дії з HTTP запитами і заголовками відповідей. Ці дії включають отримання налаштування, додавання і видалення . Об'єкт <code>Headers</code> має асоціативний список заголовків, який по замовчуванню пустий і містить ноль чи більше пар імен і значень. Ви можете додавати то цього списку, використовуючи метод типу<span style="line-height: 19.0909080505371px;"> {{domxref("Headers.append","append()")}}. У всіх методах цього інтерфейсу імена заголовків знаходяться по не чутливим до реєсту запитам </span>. </p> - -<p>З метою безпеки деякі заголовки можуть контролюватись тільки за допомогою user agent. Ці заголовки включають: {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} і {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p> - -<p>Об'єкт заголовку також має associated guard, що приймає значення: <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code> чи <code>none</code>. Це впливає на те чи меоди: {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, і {{domxref("Headers.append","append()")}} змінюватимуть заголовок. Для більшої інформації дивіться {{Glossary("Guard")}}.</p> - -<p>Ви можете отримати об'єкт <code>Headers</code> через властивості {{domxref("Request.headers")}} і{{domxref("Response.headers")}}, і створити новий об'єкт <code>Headers</code>, використовуючи конструктор {{domxref("Headers.Headers()")}}.</p> - -<p>Об'єкт, що імплементує <code>Headers</code> може напряму використовуватись в структурі {{jsxref("Statements/for...of", "for...of")}} замість{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code>тотожний <code>for (var p of myHeaders.entries())</code>.</p> - -<div class="note"> -<p><strong>Нотатка</strong>: Ви можете знайти більше про доступні заголовки прочитавши довідку по <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p> -</div> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("Headers.Headers()")}}</dt> - <dd>Створює новий об'єкт заголовку <code>Headers</code>.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<dl> - <dt>{{domxref("Headers.append()")}}</dt> - <dd>Додає нове значення до існуючого заголовка в об'єкті <code>Headers</code>, або додає заголовок якщо той не існує.</dd> - <dt>{{domxref("Headers.delete()")}}</dt> - <dd>Видаляє заголовок з об'єкта <code>Headers</code>.</dd> - <dt>{{domxref("Headers.entries()")}}</dt> - <dd>Повертає {{jsxref("Iteration_protocols","iterator")}}, дозволяючи проводити через всі пари ключ/значення, що знаходяться в об'єкті.</dd> - <dt>{{domxref("Headers.forEach()")}}</dt> - <dd>Виконує вказану функцію для кожного елементу масива.</dd> - <dt>{{domxref("Headers.get()")}}</dt> - <dd>Повертає {{domxref("ByteString")}} послідовність всіх значеннях заголовків об'єкта <code>Headers</code> з заданим іменем.</dd> - <dt>{{domxref("Headers.has()")}}</dt> - <dd>Повертає логічне значення чи має обєкт <code>Headers</code> певний заголовок</dd> - <dt>{{domxref("Headers.keys()")}}</dt> - <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам пройтись по всім ключам пар ключ/значення, що містяться в об'єкті.</dd> - <dt>{{domxref("Headers.set()")}}</dt> - <dd>Задає нове значення існуючого заголовку всередині об'єкта <code>Headers</code>, або додає заголовок, якщо той не існує.</dd> - <dt>{{domxref("Headers.values()")}}</dt> - <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам проходитись по всім значенням пар ключ/значення, які містяться в цьому об'єкті.</dd> -</dl> - -<div class="note"> -<p><strong>Нотатка</strong>: Різниця між {{domxref("Headers.set()")}} і {{domxref("Headers.append()")}} в тому, що якщо вказаний заголовок уже існує і допускає багато значень, {{domxref("Headers.set()")}} перезаписуватиме існуючі значення новим., тоді як {{domxref("Headers.append()")}} буде додавати нове значення в кінець набору значень. Дивіться їх сторінки для прикладу кода.</p> -</div> - -<div class="note"> -<p><strong>Нотатка</strong>: Всі методи Headers видаватимуть помилку <code>TypeError</code> якщо ви спробуєте передати не <a href="https://fetch.spec.whatwg.org/#concept-header-name">Валідне ім'я заголовку</a>. Операції зміни заголовку видаватимуть <code>TypeError,</code> якщо заголовок незмінний {{Glossary("Guard")}}. У разі інших невдач, вийняток не виникатиме.</p> -</div> - -<div class="note"> -<p><strong>Нотатка</strong>: Коли значення Header повторюються вони автоматично сортуються в лексикографічному порядку і значення дубльованих заголовків комбінуються.</p> -</div> - -<h3 id="Застарілі_методи">Застарілі методи</h3> - -<dl> - <dt>{{domxref("Headers.getAll()")}}</dt> - <dd>Використовується для повернення масиву всіх значень заголовка з заданим іменем в об'єкті <code>Headers</code> ; цей метод - видалений із специфікації і натомість тепер {{domxref("Headers.get()")}} повертає всі значення замість одного.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<p>В наступномуIn the following фрагменті ми створили новий заголовок, використавши конструктор <code>Headers()</code> constructor, додали новий заголовок за допомогою <code>append()</code>, потім повернули значення цього заголовку, використовуючи <code>get()</code>:</p> - -<pre class="brush: js">var myHeaders = new Headers(); - -myHeaders.append('Content-Type', 'text/xml'); -myHeaders.get('Content-Type') // should return 'text/xml' -</pre> - -<p>Те ж можна досягнути передаванням масиву масивів чи літералу об'єкта до конструктора:</p> - -<pre class="brush: js">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' -</pre> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#headers-class','Headers')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> - -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("api.Headers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP контроль доступу (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> 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 ---- -<div>{{DefaultAPISidebar("History API")}}</div> - -<p>Об'єкт DOM {{DOMxRef("Window")}} надає доступ до сеансу історії браузера через об'єкт {{DOMxRef("Window.history","history")}}. Він має корисні методи та властивості, які дозволяють відкривати попередні і наступні сторінки з історії користувача та впливати на вміст стеку історії.</p> - -<h2 id="Концепція_та_використання">Концепція та використання</h2> - -<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація </span></span></span> по історії користувача здійснюється за допомогою методів {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}} та {{DOMxRef("History.go","go()")}}.</p> - -<h3 id="Навігація_вперед_і_назад"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація вперед і назад</span></span></span></h3> - -<p>Щоб відкрити попередню сторінку:</p> - -<pre class="brush: js notranslate">window.history.back() -</pre> - -<p>Цей метод діє так само, ніби реальний користувач натиснув кнопку <kbd><strong>Назад</strong></kbd> на панелі інструментів свого браузера.</p> - -<p>Подібним чином можна відкрити наступну сторінку (кнопка <kbd><strong>Вперед</strong></kbd> на панелі інструментів):</p> - -<pre class="brush: js notranslate">window.history.forward() -</pre> - -<h3 id="Перехід_до_певної_точки_в_історії"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід до певної точки в історії</span></span></span></h3> - -<p>Щоб завантажити певну сторінку з історії сеансу використовується метод {{DOMxRef("History.go","go()")}}, передаючи як аргумент відносне положення до поточної сторінки (позиція поточної сторінки дорівнює <code>0</code>.)</p> - -<p>Щоб повернутися на одну сторінку назад (еквівалент виклику {{DOMxRef("History.back","back()")}}):</p> - -<pre class="brush: js notranslate">window.history.go(-1) -</pre> - -<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід на сторінку вперед, подібно до виклику </span></span></span>{{DOMxRef("History.forward","forward()")}}:</p> - -<pre class="brush: js notranslate">window.history.go(1) -</pre> - -<p>Подібним чином можна рухатись на 2 сторінки вперед, передаючи як аргумент <code>2</code> тощо.</p> - -<p>Ще одне застосування методу <code>go()</code> – оновлення поточної сторінки, використовуючи для цього аргумент <code>0</code>, або викликаючи метод без аргументу:</p> - -<pre class="brush: js notranslate">// Наступний код -// оновить поточну сторінку -window.history.go(0) -window.history.go() -</pre> - -<p>Кількість сторінок у стеку історії визначається значенням властивості <code>length</code>:</p> - -<pre class="brush: js notranslate">let numberOfEntries = window.history.length -</pre> - -<h2 id="Інтерфейси">Інтерфейси</h2> - -<dl> - <dt>{{domxref("History")}}</dt> - <dd>Дозволяє управляти історією сеансу браузера (відвіданими сторінками у вкладці або фреймі, куди завантажується поточна сторінка).</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<p>В наступному прикладі призначається обробка подій через властивість <code>onpopstate</code> щоб проілюструвати деякі методи об’єкта історії для додавання, заміни та переміщення в історії браузера в поточній вкладці.</p> - -<pre class="brush:js line-numbers language-js notranslate">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}"</pre> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No change from {{SpecName("HTML5 W3C")}}.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність">Сумісність</h2> - - - -<p>{{Compat("api.History")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<h3 id="Довідка">Довідка</h3> - -<ul> - <li>{{ domxref("window.history") }}</li> - <li>{{ domxref("window.onpopstate") }}</li> -</ul> - -<h3 id="Посібник">Посібник</h3> - -<ul> - <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li> -</ul> 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 ---- -<p>{{DefaultAPISidebar("HTML DOM")}}</p> - -<p>The <strong>HTML DOM API</strong> 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.</p> - -<p>The functional areas included in the HTML DOM API include:</p> - -<ul> - <li>Access to and control of HTML elements via the {{Glossary("DOM")}}.</li> - <li>Access to and manipulation of form data.</li> - <li>Interacting with the contents of 2D images and the context of an HTML {{HTMLElement("canvas")}}, for example to draw on top of them.</li> - <li>Management of media connected to the HTML media elements ({{HTMLElement("audio")}} and {{HTMLElement("video")}}).</li> - <li>Dragging and dropping of content on webpages.</li> - <li>Access to the browser navigation history</li> - <li>Supporting and connective interfaces for other APIs such as <a href="/en-US/docs/Web/Web_Components">Web Components</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>, and <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>.</li> -</ul> - -<h2 id="HTML_DOM_concepts_and_usage">HTML DOM concepts and usage</h2> - -<p>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 <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and Drop</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, etc. can be found in the documentation for those APIs.</p> - -<h3 id="Structure_of_an_HTML_document">Structure of an HTML document</h3> - -<p>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 <strong>nodes</strong>, in which a node is a fundamental record representing a single object within the document (such as an element or text node).</p> - -<p>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.</p> - -<p>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 <code>Element</code> object instance represents a single element in a document created using either HTML or an {{glossary("XML")}} vocabulary such as {{glossary("SVG")}}.</p> - -<p>For example, consider a document with two elements, one of which has two more elements nested inside it:</p> - -<p><img alt="Structure of a document with elements inside a document in a window" src="https://mdn.mozillademos.org/files/16587/dom-structure.svg" style="display: block; height: 379px; margin: 0 auto; width: 291px;"></p> - -<p>While the {{domxref("Document")}} interface is defined as part of the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> 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.</p> - -<p>Among the things added to <code>Document</code> by the HTML standard are:</p> - -<ul> - <li>Support for accessing various information provided by the {{Glossary("HTTP")}} headers when loading the page, such as the <a href="/en-US/docs/Web/API/Document/location">location</a> from which the document was loaded, <a href="/en-US/docs/Web/API/Document/cookie">cookies</a>, <a href="/en-US/docs/Web/API/Document/lastModified">modification date</a>, <a href="/en-US/docs/Web/API/Document/referrer">referring site</a>, and so forth.</li> - <li>Access to lists of elements in the document's {{HTMLElement("head")}} block and <a href="/en-US/docs/Web/API/Document/body">body</a>, as well as lists of the <a href="/en-US/docs/Web/API/Document/images">images</a>, <a href="/en-US/docs/Web/API/Document/links">links</a>, <a href="/en-US/docs/Web/API/Document/scripts">scripts</a>, etc. contained in the document.</li> - <li>Support for interacting with the user by examining <a href="/en-US/docs/Web/API/Document/hasFocus">focus</a> and by executing commands on <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">editable content</a>.</li> - <li>Event handlers for document <a href="/en-US/docs/Web/API/GlobalEventHandlers">events defined by the HTML standard</a> to allow access to <a href="/en-US/docs/Web/API/MouseEvent">mouse</a> and <a href="/en-US/docs/Web/API/KeyboardEvent">keyboard</a> events, <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>, <a href="/en-US/docs/Web/API/HTMLMediaElement">media control</a>, and more.</li> - <li>Event handlers for events that can be delivered to both elements and documents; these presently include only <a href="/en-US/docs/Web/API/HTMLElement/oncopy">copy</a>, <a href="/en-US/docs/Web/API/HTMLElement/oncut">cut</a>, and <a href="/en-US/docs/Web/API/HTMLElement/onpaste">paste</a> actions.</li> -</ul> - -<h3 id="HTML_element_interfaces">HTML element interfaces</h3> - -<p>The <code>Element</code> 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 <code>Element</code> class to add HTML-specific general features to the element nodes. Properties added by <code>HTMLElement</code> include for example {{domxref("HTMLElement.hidden", "hidden")}} and {{domxref("HTMLElement.innerText", "innerText")}}. <code>HTMLElement</code> also adds all the <a href="/en-US/docs/Web/API/GlobalEventHandlers">global event handlers</a>.</p> - -<p>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 <code>HTMLElement</code> class, in turn, implements <code>Node</code>, 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.</p> - -<p>The <code>HTMLElement</code> 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.</p> - -<p>In order to expand upon the functionality of the core <code>HTMLElement</code> interface to provide the features needed by a specific element, the <code>HTMLElement</code> 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")}}. <code>HTMLCanvasElement</code> augments the <code>HTMLElement</code> type by adding properties such as {{domxref("HTMLCanvasElement.height", "height")}} and methods like {{domxref("HTMLCanvasElement.getContext", "getContext()")}} to provide canvas-specific features.</p> - -<p>The overall inheritance for HTML element classes looks like this:</p> - -<p><img alt="Hierarchy of interfaces for HTML elements" src="https://mdn.mozillademos.org/files/16596/html-dom-hierarchy.svg" style="display: block; height: 565px; margin: 0 auto; width: 661px;"></p> - -<p>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")}}.</p> - -<p>Each level defines a key aspect of the utility of the element. From <code>Node</code>, 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 <code>EventTarget</code>: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.</p> - -<p>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. <code>HTMLMediaElement</code> defines the methods and properties held in common between audio and video elements.</p> - -<p>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 <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, see <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a>.</p> - -<h2 id="HTML_DOM_target_audience">HTML DOM target audience</h2> - -<p>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.</p> - -<h2 id="HTML_DOM_API_interfaces">HTML DOM API interfaces</h2> - -<p>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.</p> - -<h3 id="HTML_element_interfaces_2">HTML element interfaces</h3> - -<p>These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDirectoryElement"><code>HTMLDirectoryElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameElement"><code>HTMLFrameElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameSetElement"><code>HTMLFrameSetElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHRElement"><code>HTMLHRElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadElement"><code>HTMLHeadElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHtmlElement"><code>HTMLHtmlElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIsIndexElement"><code>HTMLIsIndexElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLabelElement"><code>HTMLLabelElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLegendElement"><code>HTMLLegendElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMapElement"><code>HTMLMapElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMarqueeElement"><code>HTMLMarqueeElement</code></a> {{deprecated_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuElement"><code>HTMLMenuElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuItemElement"><code>HTMLMenuItemElement</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLObjectElement"><code>HTMLObjectElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptGroupElement"><code>HTMLOptGroupElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParagraphElement"><code>HTMLParagraphElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParamElement"><code>HTMLParamElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPictureElement"><code>HTMLPictureElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLScriptElement"><code>HTMLScriptElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableElement"><code>HTMLTableElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTimeElement"><code>HTMLTimeElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTitleElement"><code>HTMLTitleElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></span></span></li> -</ul> -</div> - -<h3 id="Web_app_and_browser_integration_interfaces">Web app and browser integration interfaces</h3> - -<p>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.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ApplicationCache"><code>ApplicationCache</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BarProp"><code>BarProp</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/External"><code>External</code></a> {{deprecated_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Navigator"><code>Navigator</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Plugin"><code>Plugin</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PluginArray"><code>PluginArray</code></a> {{obsolete_inline}}</span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><code><a href="/en-US/docs/Web/API/Window">Window</a></code></span></span></li> -</ul> -</div> - -<h3 id="Form_support_interfaces">Form support interfaces</h3> - -<p>These interfaces provide structure and functionality required by the elements used to create and manage forms, including the {{HTMLElement("form")}} and {{HTMLElement("input")}} elements.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/FormDataEvent"><code>FormDataEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormControlsCollection"><code>HTMLFormControlsCollection</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionsCollection"><code>HTMLOptionsCollection</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a></span></span></li> -</ul> -</div> - -<h3 id="Canvas_and_image_interfaces">Canvas and image interfaces</h3> - -<p>These interfaces represent objects used by the Canvas API as well as the {{HTMLElement("img")}} element and {{HTMLElement("picture")}} elements.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasGradient"><code>CanvasGradient</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasPattern"><code>CanvasPattern</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmap"><code>ImageBitmap</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmapRenderingContext"><code>ImageBitmapRenderingContext</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageData"><code>ImageData</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D"><code>OffscreenCanvasRenderingContext2D</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Path2D"><code>Path2D</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextMetrics"><code>TextMetrics</code></a></span></span></li> -</ul> -</div> - -<h3 id="Media_interfaces">Media interfaces</h3> - -<p>The media interfaces provide HTML access to the contents of the media elements: {{HTMLElement("audio")}} and {{HTMLElement("video")}}.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrack"><code>AudioTrack</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MediaError"><code>MediaError</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrack"><code>TextTrack</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCue"><code>TextTrackCue</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCueList"><code>TextTrackCueList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackList"><code>TextTrackList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TimeRanges"><code>TimeRanges</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TrackEvent"><code>TrackEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrack"><code>VideoTrack</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a></span></span></li> -</ul> -</div> - -<h3 id="Drag_and_drop_interfaces">Drag and drop interfaces</h3> - -<p>These interfaces are used by the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItem"><code>DataTransferItem</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItemList"><code>DataTransferItemList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DragEvent"><code>DragEvent</code></a></span></span></li> -</ul> -</div> - -<h3 id="Page_history_interfaces">Page history interfaces</h3> - -<p>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.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/History"><code>History</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Location"><code>Location</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></span></span></li> -</ul> -</div> - -<h3 id="Web_Components_interfaces">Web Components interfaces</h3> - -<p>These interfaces are used by the <a href="/en-US/docs/Web/Web_Components">Web Components API</a> to create and manage the available <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a>.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CustomElementRegistry"><code>CustomElementRegistry</code></a></span></span></li> -</ul> -</div> - -<h3 id="Miscellaneous_and_supporting_interfaces">Miscellaneous and supporting interfaces</h3> - -<p>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.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringList"><code>DOMStringList</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringMap"><code>DOMStringMap</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAllCollection"><code>HTMLAllCollection</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeType"><code>MimeType</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeTypeArray"><code>MimeTypeArray</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PromiseRejectionEvent"><code>PromiseRejectionEvent</code></a></span></span></li> -</ul> -</div> - -<h3 id="Interfaces_belonging_to_other_APIs">Interfaces belonging to other APIs</h3> - -<p>There are several interfaces which are technically defined in the HTML specification while actually being part of other APIs.</p> - -<h4 id="Web_storage_interfaces">Web storage interfaces</h4> - -<p>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Storage"><code>Storage</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/StorageEvent"><code>StorageEvent</code></a></span></span></li> -</ul> -</div> - -<h4 id="Web_Workers_interfaces">Web Workers interfaces</h4> - -<p>These interfaces are used by the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BroadcastChannel"><code>BroadcastChannel</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope"><code>DedicatedWorkerGlobalScope</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageChannel"><code>MessageChannel</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessagePort"><code>MessagePort</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorker"><code>SharedWorker</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope"><code>SharedWorkerGlobalScope</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Worker"><code>Worker</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerGlobalScope"><code>WorkerGlobalScope</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerLocation"><code>WorkerLocation</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerNavigator "><code>WorkerNavigator </code></a></span></span></li> -</ul> -</div> - -<h4 id="WebSocket_interfaces">WebSocket interfaces</h4> - -<p>These interfaces, defined by the HTML specification, are used by the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket API</a>.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></span></span></li> -</ul> -</div> - -<h4 id="Server-sent_events_interfaces">Server-sent events interfaces</h4> - -<p>The {{domxref("EventSource")}} interface represents the source which sent or is sending <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>.</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/EventSource"><code>EventSource</code></a></span></span></li> -</ul> -</div> - -<h2 id="Examples">Examples</h2> - -<p>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.</p> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">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; - } -});</pre> - -<p>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 <code>userName</code> and <code>sendButton</code>. With these, we can access the properties and methods that provide information about and grant control over these elements.</p> - -<p>The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to <code>true</code>, 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")}}.</p> - -<p>Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to add a handler for the <code>input</code> 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.</p> - -<p>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.</p> - -<h4 id="HTML">HTML</h4> - -<p>The HTML for the form looks like this:</p> - -<pre class="brush: html"><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> -</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Examples", 640, 300)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>WHATWG HTML Specification</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>No change from {{SpecName("DOM2 HTML")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>No change from {{SpecName("DOM1")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.HTMLElement")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<dl> - <dt>References</dt> - <dd> - <ul> - <li><a href="/en-US/docs/Web/HTML/Element">HTML elements reference</a></li> - <li><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a> reference</li> - </ul> - </dd> - <dt>Guides</dt> - <dd> - <ul> - <li> - <p><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" style="font-size: 1rem; letter-spacing: -0.00278rem;">Manipulating documents</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">: A beginner's guide to manipulating the DOM.</span></p> - </li> - </ul> - </dd> -</dl> 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 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><span class="seoSummary"><strong>Мікрозадача</strong> - це коротка функція, яка виконується після того, як функція чи програма, яка її створила, завершується, <em>та</em> тільки якщо стек виконання JavaScript порожній, але перед поверненням контролю до циклу подій {{Glossary("user agent", "користувацького агента")}} для керування середовищем виконання скрипта.</span> Даний цикл подій може бути або головним циклом подій веб-переглядача, або циклом подій, що керує <a href="/uk/docs/Web/API/Web_Workers_API">веб-виконавцем</a>. Це дозволяє даній функції виконуватись без ризику втрутитись у виконання іншого скрипта, в той же час гарантує, що мікрозадача виконається до того, як користувацький агент матиме змогу відреагувати на дії, виконані цією мікрозадачею.</p> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Проміси</a> JavaScript та <a href="/uk/docs/Web/API/Mutation_Observer_API">Mutation Observer API</a> використовують чергу мікрозадач для виконання своїх зворотніх викликів, але бувають інші випадки, коли здатність відкласти роботу до завершення поточного проходу циклу подій може бути корисна. Щоб дозволити стороннім бібліотекам, фреймворкам та поліфілам використовувати мікрозадачі, метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} доступний у інтерфейсах {{domxref("Window")}} та {{domxref("Worker")}} через домішку {{domxref("WindowOrWorkerGlobalScope")}}.</p> - -<h2 id="Задачі_та_мікрозадачі">Задачі та мікрозадачі</h2> - -<p>Щоб належно обговорювати мікрозадачі, насамперед, корисно знати, що таке задача JavaScript та чим мікрозадачі відрізняються від задач. Це швидке, спрощене пояснення, але якщо вам потрібно більше подробиць, ви можете їх дізнатись у статті <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a>.</p> - -<h3 id="Задачі">Задачі</h3> - -<p><strong>Задача</strong> - це будь-який код JavaScript, що запланований до запуску стандартними механізмами, такими як початковий запуск програми, запуск зворотного виклику для події, або запуск таймера чи інтервалу. Всі вони розташовуються у <strong>черзі задач</strong>.</p> - -<p>Задачі додаються до черги задач, коли:</p> - -<ul> - <li>Безпосередньо виконується нова програма чи підпрограма JavaScript (наприклад, з консолі чи запуском коду у елементі {{HTMLElement("script")}}).</li> - <li>Спрацьовує подія, додаючи функцію зворотного виклику події до черги задач.</li> - <li>Доходить черга таймера чи інтервалу, створеного методом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} чи {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}, що спричиняє додавання відповідного зворотного виклику до черги задач.</li> -</ul> - -<p>Цикл подій, що керує вашим кодом, обробляє ці задачі одна за одною, в тому порядку, в якому вони були додані у чергу. Лише ті задачі, які <em>вже знаходились у черзі задач</em>, коли почався прохід циклу подій, будуть виконані протягом поточної ітерації. Решті доведеться зачекати наступної ітерації.</p> - -<h3 id="Мікрозадачі">Мікрозадачі</h3> - -<p>Спершу різниця між мікрозадачами та задачами здається незначною. І вони дійсно схожі; і те, й інше - код JavaScript, який розміщується у черзі та запускається у належний час. Однак, в той час, як цикл подій запускає лише задачі, наявні у черзі на момент початку ітерації, одна за одною, з мікрозадачами він поводиться зовсім по-іншому.</p> - -<p>Є дві ключові відмінності.</p> - -<p>По-перше, кожен раз, коли задача завершується, цикл подій перевіряє, чи задача повертає контроль іншому коду JavaScript. Якщо ні, він запускає всі мікрозадачі з черги мікрозадач. Таким чином, черга мікрозадач обробляється багаторазово протягом однієї ітерації циклу подій, в тому числі після обробки подій та інших зворотних викликів.</p> - -<p>По-друге, якщо мікрозадача додає інші мікрозадачі до черги, викликаючи метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, ці додані мікрозадачі <em>виконуються перед запуском наступної задачі</em>. Все тому, що цикл подій викликатиме мікрозадачі, доки у черзі не залишиться жодної, навіть якщо при цьому додаються нові.</p> - -<div class="blockIndicator warning"> -<p><strong>Застереження:</strong> Оскільки мікрозадачі можуть ставити у чергу інші мікрозадачі, а цикл подій продовжуватиме обробляти мікрозадачі, доки черга не спорожніє, існує реальний ризик спричинити нескінченну обробку мікрозадач циклом подій. Будьте обережні, додаючи мікрозадачі рекурсивно.</p> -</div> - -<h2 id="Використання_мікрозадач">Використання мікрозадач</h2> - -<p>Перед тим, як продовжити, важливо зазначити ще раз, що більшість програмістів нечасто використовують мікрозадачі, якщо взагалі використовують. Це вузькоспеціалізована функціональність сучасної JavaScript-розробки для переглядачів, що дозволяє вам запланувати виконання коду попереду чогось іншого у довгому списку речей, що чекають на виконання комп'ютером користувача. Зловживання цією можливістю призведе до проблем з продуктивністю.</p> - -<h3 id="Додавання_мікрозадач_у_чергу">Додавання мікрозадач у чергу</h3> - -<p>Таким чином, вам варто використовувати мікрозадачі лише тоді, коли немає іншого рішення, або при створенні фреймворків чи бібліотек, які мають використовувати мікрозадачі для створення функціональності, яку реалізують. Хоча раніше існували трюки, які дозволяли ставити мікрозадачі в чергу (наприклад, створення проміса, який негайно вирішується), введення методу {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} додає стандартний спосіб створення мікрозадач безпечно та без допомоги трюків.</p> - -<p>Введення методу <code>queueMicrotask()</code> дозволяє уникнути вивертів, що трапляються під час такого проникнення у чергу мікрозадач за допомогою промісів. Наприклад, при використанні промісів для створення мікрозадач, винятки, викинуті зворотним викликом, повідомляються як відхилені проміси, а не як стандартні винятки. Також, створення та знищення промісів потребує додаткових витрат як часу, так і пам'яті, цього уникає функція, яка належним чином ставить мікрозадачі у чергу.</p> - -<p>Просто передайте {{jsxref("Function","функцію")}} JavaScript, яку треба викликати, коли контекст обробляє мікрозадачі, у метод <code>queueMicrotask()</code>, доступний у глобальному контексті, як визначено у інтерфейсі {{domxref("Window")}} або {{domxref("Worker")}}, в залежності від поточного контексту виконання.</p> - -<pre class="brush: js">queueMicrotask(() => { - /* тут код, який виконує мікрозадача */ -}); -</pre> - -<p>Сама функція мікрозадачі не приймає параметрів та не повертає значення.</p> - -<h3 id="Коли_використовувати_мікрозадачі">Коли використовувати мікрозадачі</h3> - -<p>У цьому розділі ми розглянемо сценарії, в яких мікрозадачі є особливо корисними. Загалом, мова йде про отримання та перевірку результатів, або прибирання, після того, як головне тіло контексту виконання JavaScript завершується, але перед тим, як опрацьовуються будь-які обробники подій, таймери та інтервали, чи інші зворотні виклики.</p> - -<p>Коли це корисно?</p> - -<p>Головна причина використання мікрозадач проста: забезпечити послідовний порядок виконання задач, навіть коли результати чи дані доступні синхронно, одночасно знижуючи ризик помітних користувачу затримок у операціях.</p> - -<h4 id="Забезпечення_порядку_виконання_при_використанні_промісів_в_умовних_конструкціях">Забезпечення порядку виконання при використанні промісів в умовних конструкціях</h4> - -<p>Одна з ситуацій, в якій можуть використовуватись мікрозадачі - це забезпечення завжди послідовного порядку виконання у ситуації, коли проміси використовуються у одному блоці конструкції <code>if...else</code> (чи іншої умовної конструкції), але не в іншому блоці. Розглянемо наступний код:</p> - -<pre class="brush: js">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")); - }); - } -};</pre> - -<p>Проблема тут полягає в тому, що, використовуючи задачу в одній гілці конструкції <code>if...else</code> (у випадку, коли зображення доступне з кешу), але маючи проміси у блоці <code>else</code>, ми отримуємо ситуацію, в якій порядок операцій може бути різним; наприклад, як показано нижче.</p> - -<pre class="brush: js">element.addEventListener("load", () => console.log("Завантажені дані")); -console.log("Отримання даних..."); -element.getData(); -console.log("Дані отримано"); -</pre> - -<p>Виконання цього коду два рази підряд дає результати, наведені у таблиці:</p> - -<table class="standard-table"> - <caption>Результати, коли дані не кешовані (зліва) та коли дані знайдені в кеші</caption> - <thead> - <tr> - <th scope="col">Дані не кешовані</th> - <th scope="col">Дані кешовані</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <pre> -Отримання даних -Дані отримано -Завантажені дані -</pre> - </td> - <td> - <pre> -Отримання даних -Завантажені дані -Дані отримано -</pre> - </td> - </tr> - </tbody> -</table> - -<p>Навіть гірше, іноді властивість елементів <code>data</code> буде встановлена, а іноді не буде, на той момент, коли цей код завершує виконання.</p> - -<p>Ми можемо забезпечити послідовний порядок цих операцій використанням мікрозадачі у блоці <code>if</code>, щоб збалансувати два блоки:</p> - -<pre class="brush: js">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")); - }); - } -};</pre> - -<p>Це збалансовує два блоки, бо тепер в обох ситуаціях встановлення значення <code>data</code> та запуск події <code>load</code> відбувається всередині мікрозадачі (за допомогою <code>queueMicrotask()</code> у блоці <code>if</code> та за допомогою промісів, що використовуються методом {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, у блоці <code>else</code>).</p> - -<h4 id="Пакетне_виконання_операцій">Пакетне виконання операцій</h4> - -<p>Ви також можете використати мікрозадачі, щоб зібрати множину запитів з різних джерел у єдиний пакет, уникаючи можливих затрат, пов'язаних з багатьма викликами задля виконання задач одного типу.</p> - -<p>Фрагмент коду, наведений нижче, створює функцію, яка збирає множину повідомлень у масив, використовуючи мікрозадачу, щоб відправити їх як єдиний об'єкт по завершенні контексту.</p> - -<pre class="brush: js">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); - }); - } -}; -</pre> - -<p>Коли викликається <code>sendMessage()</code>, вказане повідомлення спочатку додається у масив черги повідомлень. А далі відбувається цікаве.</p> - -<p>Якщо повідомлення, яке ми додали до масиву, є першим, ми додаємо мікрозадачу, яка відправлятиме пакет. Мікрозадача виконається, як завжди, коли шлях виконання JavaScript сягне верхнього рівня, одразу перед зворотними викликами. Це означає, що будь-які подальші виклики <code>sendMessage()</code>, зроблені в цей час, додадуть свої повідомлення до черги повідомлень, але, завдяки перевірці довжини масиву перед додаванням мікрозадачі, нових мікрозадач у чергу не буде додано.</p> - -<p>Коли запускається мікрозадача, то вона має масив, потенційно, багатьох повідомлень, які на неї очікують. Вона починається кодуванням його як JSON за допомогою методу {{jsxref("JSON.stringify()")}}. Після цього вміст масиву більше не потрібний, а отже, ми спорожнюємо масив <code>messageQueue</code>. Нарешті, ми використовуємо метод {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, щоб відправити рядок JSON на сервер.</p> - -<p>Це дозволяє кожному виклику <code>sendMessage()</code>, зробленому під час тієї самої ітерації циклу подій, додавати свої повідомлення до тієї самої операції <code>fetch()</code>, без потенційних затримок трансмісії іншими задачами, такими як таймери та подібні.</p> - -<p>Сервер отримає рядок JSON, далі, ймовірно, декодує його та обробить повідомлення, які знайде у отриманому масиві.</p> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Простий_приклад_мікрозадачі">Простий приклад мікрозадачі</h3> - -<p>У цьому простому прикладі ми бачимо, що додавання мікрозадачі у чергу спричиняє запуск зворотного виклику мікрозадачі після того, як тіло цього скрипта верхнього рівня завершує виконання.</p> - -<div class="hidden"> -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><pre id="log"> -</pre></pre> -</div> - -<h4 id="JavaScript">JavaScript</h4> - -<div class="hidden"> -<p>Наведений нижче код використовується для логування результату.</p> - -<pre class="brush: js">let logElem = document.getElementById("log"); -let log = s => logElem.innerHTML += s + "<br>";</pre> -</div> - -<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, що використовується для планування запуску мікрозадачі. Цей виклик оточують виклики <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p> - -<pre class="brush: js">log("До розміщення мікрозадачі в черзі"); -queueMicrotask(() => { - log("Мікрозадача запустилась.") -}); -log("Після розміщення мікрозадачі в черзі");</pre> - -<h4 id="Результат">Результат</h4> - -<p>{{EmbedLiveSample("Простий_приклад_мікрозадачі", 640, 80)}}</p> - -<h3 id="Таймер_та_приклад_мікрозадачі">Таймер та приклад мікрозадачі</h3> - -<p>У цьому прикладі встановлюється таймер для запуску через нуль мілісекунд (або "якомога швидше"). Це демонструє різницю між тим, що означає "якомога швидше" при плануванні нової задачі (наприклад, при використанні <code>setTimeout()</code>) у порівнянні з використанням мікрозадачі.</p> - -<div class="hidden"> -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><pre id="log"> -</pre></pre> -</div> - -<h4 id="JavaScript_2">JavaScript</h4> - -<div class="hidden"> -<p>Наведений нижче код використовується для логування результату.</p> - -<pre class="brush: js">let logElem = document.getElementById("log"); -let log = s => logElem.innerHTML += s + "<br>";</pre> -</div> - -<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, який використовується для планування запуску мікрозадачі. Цей виклик розташований між викликами <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p> - -<p>Наступний код встановлює таймер, який має запуститися через нуль мілісекунд, після чого додає у чергу мікрозадачу. Він оточений викликами <code>log()</code> для виводу додаткових повідомлень.</p> - -<pre class="brush: js">let callback = () => log("Запустився звичайний зворотний виклик таймера"); - -let urgentCallback = () => log("*** О, ні! Запустився терміновий зворотний виклик!"); - -log("Початок головної програми"); -setTimeout(callback, 0); -queueMicrotask(urgentCallback); -log("Кінець головної програми");</pre> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample("Таймер_та_приклад_мікрозадачі", 640, 100)}}</p> - -<p>Зауважте, що текст, який виводиться головною програмою, з'являється першим, далі текст, виведений мікрозадачею, а за ним текст зворотного виклику таймера. Все тому, що, коли задача, що керує виконанням головної програми, завершується, черга мікрозадач обробляється раніше черги задач, в якій розташований зворотний виклик таймера. Знання того, що задачі та мікрозадачі розташовуються у різних чергах, і те, що мікрозадачі виконуються першими, допомагає легше в цьому розібратись.</p> - -<h3 id="Мікрозадача_з_функції">Мікрозадача з функції</h3> - -<p>Цей приклад трохи розширює попередній додаванням функції, яка виконує певну роботу. Ця функція використовує <code>queueMicrotask()</code>, щоб додати мікрозадачу. Важливий момент, який варто з нього винести - мікрозадача не виконується, коли завершується функція, а тільки коли завершується головна програма.</p> - -<div class="hidden"> -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><pre id="log"> -</pre></pre> -</div> - -<h4 id="JavaScript_3">JavaScript</h4> - -<div class="hidden"> -<p>Наведений нижче код використовується для логування результату.</p> - -<pre class="brush: js">let logElem = document.getElementById("log"); -let log = s => logElem.innerHTML += s + "<br>";</pre> -</div> - -<p>Код головної програми наступний. Функція <code>doWork()</code> викликає <code>queueMicrotask()</code>, але мікрозадача не запускається, доки вся програма не завершується, оскільки саме тоді завершується задача і не залишається нічого іншого у стеку виконання.</p> - -<pre class="brush: js">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("Кінець головної програми");</pre> - -<h4 id="Результат_3">Результат</h4> - -<p>{{EmbedLiveSample("Мікрозадача_з_функції", 640, 100)}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a></li> - <li>{{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}</li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> - <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> - </ul> - </li> -</ul> 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 ---- -<div> -<div>{{APIRef("Canvas API")}}</div> -</div> - -<p>The <strong><code>HTMLCanvasElement</code></strong> interface provides properties and methods for manipulating the layout and presentation of canvas elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLCanvasElement.height")}}</dt> - <dd>Is a positive <code>integer</code> 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 <code>150</code> is used.</dd> - <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLCanvasElement.width")}}</dt> - <dd>Is a positive <code>integer</code> 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 <code>300</code> is used.</dd> - <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt> - <dd>Is a <code>function</code> 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. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> - <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd> - <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> - <dd>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 <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"experimental-webgl"</code> (or <code>"webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> - <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> - <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd> - <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> - <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd> - <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> - <td>{{Spec2('Media Capture DOM Elements')}}</td> - <td>Adds the method <code>captureStream()</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br> - The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (<code>2D</code> context)</td> - <td>4.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop('1.9.2')}}</td> - <td>9.0</td> - <td>9.0 [1]</td> - <td>3.1</td> - </tr> - <tr> - <td><code>toBlob()</code></td> - <td>50</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop('19')}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> - </tr> - <tr> - <td><code>probablySupportsContext()</code>,<br> - <code>setContext()</code>,<br> - <code>transferControlToProxy()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop('2')}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>captureStream()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop('41')}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(44)}} [3]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (<code>2D</code> context)</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>10.0 [1]</td> - <td>3.2</td> - </tr> - <tr> - <td><code>webgl</code> context</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>toBlob()</code></td> - <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> - <td>50</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile('18')}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> - </tr> - <tr> - <td><code>probablySupportsContext()</code>,<br> - <code>setContext()</code>,<br> - <code>transferControlToProxy() </code>{{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile('2')}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>captureStream() </code>{{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile('41')}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(44)}} [3]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Opera Mini 5.0 and later has partial support.</p> - -<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p> - -<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li> -</ul> 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 ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<div> </div> - -<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.accessKey")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> - <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> - <dt>{{domxref("HTMLElement.contentEditable")}}</dt> - <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> - <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> - <dt>{{domxref("HTMLElement.contextMenu")}}</dt> - <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd> - <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd> - <dt>{{domxref("HTMLElement.dir")}}</dt> - <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> - <dt>{{domxref("HTMLElement.draggable")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> - <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> - <dt>{{domxref("HTMLElement.hidden")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> - <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd> - <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the item ID.</dd> - <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> - <dd>Returns a {{jsxref("Object")}} representing the item value.</dd> - <dt>{{domxref("HTMLElement.lang")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> - <dt>{{domxref("HTMLElement.noModule")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.</dd> - <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> - <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> - <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> - <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd> - <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> - <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd> - <dt>{{domxref("HTMLElement.style")}}</dt> - <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> - <dt>{{domxref("HTMLElement.tabIndex")}}</dt> - <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> - <dt>{{domxref("HTMLElement.title")}}</dt> - <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> - <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p> - -<dl> - <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> - <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.blur()")}}</dt> - <dd>Removes keyboard focus from the currently focused element.</dd> - <dt>{{domxref("HTMLElement.click()")}}</dt> - <dd>Sends a mouse click event to the element.</dd> - <dt>{{domxref("HTMLElement.focus()")}}</dt> - <dd>Makes the element the current keyboard focus.</dd> - <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> - <dd>Runs the spell checker on the element's contents.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> - Added the following method: <code>forceSpellcheck()</code>.<br> - Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> - Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>No change from {{SpecName('DOM2 HTML')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> - <td>{{CompatGeckoDesktop("5.0")}}</td> - <td>{{CompatChrome(17)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>6.0</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> - <td>{{CompatGeckoDesktop("8.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}{{WebkitBug(72715)}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> - <td>{{CompatGeckoDesktop("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.click()", "click()")}}</td> - <td>{{CompatGeckoDesktop("5.0")}}</td> - <td>{{CompatChrome(9)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatUnknown}}</td> - <td>6.0</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>{{CompatChrome(8)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>11.10</td> - <td>5.1</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> - <td>{{CompatGeckoDesktop("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5.5</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.style", "style")}}</td> - <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>12.0</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>12.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.onModule")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(60)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(47)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{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}}</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>11.60<br> - (Removed in Opera 15)</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatGeckoMobile("1.0")}}</p> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> - <td>{{CompatGeckoMobile("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> - <td>{{CompatGeckoMobile("8.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> - <td>{{CompatGeckoMobile("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.click()", "click()")}}</td> - <td>{{CompatGeckoMobile("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> - <td>{{CompatGeckoMobile("5.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.onModule", "onModule()")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(60)}}</td> - <td>{{CompatChrome(60)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(47)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element")}}</li> -</ul> 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 ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> - -<div>Властивість лише для зчитування <strong><code>HTMLElement.offsetTop</code></strong> повертає відстань від поточного елемента відносно верху {{domxref("HTMLelement.offsetParent","offsetParent")}} .</div> -</div> - -<h2 id="Syntax" name="Syntax">Синтакс</h2> - -<pre class="syntaxbox"><var>topPos</var> = element.offsetTop; -</pre> - -<h3 id="Parameters" name="Parameters">Параметри</h3> - -<ul> - <li><code>topPos</code> це кількість пікселів від верху <em>найближчого відносно зпозиціонованого</em> батьківського елементу.</li> -</ul> - -<h2 id="Example" name="Example">Приклад</h2> - -<pre class="brush:js">var d = document.getElementById("div1"); -var topPos = d.offsetTop; - -if (topPos > 10) { - // object is offset more - // than 10 pixels from its parent -}</pre> - -<h2 id="Specification" name="Specification">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфіуація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibility" name="Compatibility">Браузерна сумісність</h2> - - - -<p>{{Compat("api.HTMLElement.offsetTop")}}</p> - -<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p> - -<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">The <code><strong>HTMLFormElement</strong></code> 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.</span></p> - -<p>{{InheritanceDiagram(600,120)}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd> - <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt> - <dd>A <code>long</code> reflecting the number of controls in the form.</dd> - <dt>{{domxref("HTMLFormElement.name")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd> - <dt>{{domxref("HTMLFormElement.method")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLFormElement.target")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLFormElement.action")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd> - <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLFormElement.noValidate")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd> -</dl> - -<p>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 <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}</dt> - <dd>Returns <code>true</code> if the element's child controls are subject to <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> and satisfy those contraints; returns <code>false</code> 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 <code>false</code>.</dd> - <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt> - <dd>Returns <code>true</code> if the element's child controls satisfy their <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation constraints</a>. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd> - <dt>{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}</dt> - <dd>Requests that the form be submitted using the specified submit button and its corresponding configuration.</dd> - <dt>{{domxref("HTMLFormElement.reset", "reset()")}}</dt> - <dd>Resets the form to its initial state.</dd> - <dt>{{domxref("HTMLFormElement.submit", "submit()")}}</dt> - <dd>Submits the form to the server.</dd> -</dl> - -<h3 id="Deprecated_methods">Deprecated methods</h3> - -<dl> - <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}</dt> - <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. 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.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event">formdata</a></code></dt> - <dd><span class="hidden"> </span>The <code>formdata</code> event fires after the entry list representing the form's data is constructed.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onformdata">onformdata</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/reset_event">reset</a></code></dt> - <dd><span class="hidden"> </span>The <code>reset</code> event fires when a form is reset.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset">onreset</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/submit_event">submit</a></code></dt> - <dd>The <code>submit</code> event fires when a form is submitted.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> property.</dd> -</dl> - -<h2 id="Usage_notes">Usage notes</h2> - -<h3 id="Obtaining_a_form_element_object">Obtaining a form element object</h3> - -<p>To obtain an <code>HTMLFormElement</code> object, you can use a <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> 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.</p> - -<p>{{domxref("Document.forms")}} returns an array of <code>HTMLFormElement</code> objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:</p> - -<dl> - <dt><code>document.forms[<em>index</em>]</code></dt> - <dd>Returns the form at the specified <code>index</code> into the array of forms.</dd> - <dt><code>document.forms[<em>id</em>]</code></dt> - <dd>Returns the form whose ID is <code>id</code>.</dd> - <dt><code>document.forms[<em>name</em>]</code></dt> - <dd>Returns the form whose {{domxref("Element.name", "name")}} attribute's value is <code>name</code>.</dd> -</dl> - -<h3 id="Accessing_the_forms_elements">Accessing the form's elements</h3> - -<p>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 <code><form></code> and those which are made members of the form using their <code>form</code> attributes.</p> - -<p>You can also get the form's element by using its <code>name</code> attribute as a key of the <code>form</code>, but using <code>elements</code> is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the <code>form</code>.</p> - -<h3 id="Elements_that_are_considered_form_controls">Elements that are considered form controls</h3> - -<p>The elements which are included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are:</p> - -<ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> - -<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p> - -<h2 id="Examples">Examples</h2> - -<p>Creating a new form element, modifying its attributes, then submitting it:</p> - -<pre class="brush: js">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 -</pre> - -<p>Extract information from a form element and set some of its attributes:</p> - -<pre class="brush: html"><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> -</pre> - -<p>Submit a form into a new window:</p> - -<pre class="brush: html"><!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></pre> - -<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3> - -<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The following method has been added: <code>requestAutocomplete()</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>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: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLFormElement")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>Метод <code><strong>HTMLFormElement.reset()</strong></code> відновлює значення елемента форми за замовчуванням. Цей метод робить те ж саме, що і натискання кнопки скидання форми. </p> - -<p>Якщо елемент управління форми (наприклад, кнопка скидання) має ім'я або ідентифікатор скидання, він маскує метод скидання форми. Він не скидає інші атрибути <code>input</code> елемента, наприклад, <code>disabled</code>.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: js"><em>HTMLFormElement</em>.reset() -</pre> - -<h2 id="Example" name="Example">Приклад</h2> - -<pre><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></pre> - -<h2 id="Specification" name="Specification">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.HTMLFormElement.reset")}}</p> 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 ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<div>Конструктор <strong><code>Image()</code></strong> створює новий примірник {{domxref("HTMLImageElement")}}. Наслідком є те саме, що й для {{domxref("Document.createElement()", "document.createElement('img')")}}.</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: js"><span style="font-family: courier new,andale mono,monospace; line-height: normal;">new Image(width, height</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">)</span></pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt>width {{optional_inline}}</dt> - <dd>Ширина зображення (визначає значення атрибута {{htmlattrxref("width", "img")}}).</dd> - <dt>height {{optional_inline}}</dt> - <dd>Висота зображення (визначає значення атрибута {{htmlattrxref("height", "img")}}).</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<p>У наведеному прикладі створюється елемент <code><img></code> завбільшки 100x200, до нього завантажується якесь зображення та додається до тіла документа:</p> - -<pre class="brush: js">var image = new Image(100, 200); -image.onload = function() { - // Додати у DOM - document.body.appendChild(image); -}; -image.src = '/assets/зразок.png';</pre> - -<p>Того ж можна досягти оголошенням такого HTML-елемента просто всередині {{htmlelement("body")}}:</p> - -<pre class="brush: html"><img width="100" height="200" src="/assets/зразок.png"></pre> - -<p>Але перевагою створення <code><img></code> за допомогою конструктора <code>Image()</code> є можливість додати зображення у DOM лише після його завантаження (завдяки обробникові події <code>load</code>).</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td> - <td>{{spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>The <strong><code>HTMLImageElement</code></strong> interface provides special properties and methods for manipulating the layout and presentation of {{HTMLElement("img")}} elements.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.</dd> - <dt>{{domxref("HTMLImageElement.alt")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute, thus indicating fallback context for the image.</dd> - <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt> - <dd>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.</dd> - <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> 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.</dd> - <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd> - <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd> - <dt>{{domxref("HTMLImageElement.height")}}</dt> - <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.</dd> - <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt> - <dd>Is a <code>long</code> representing the space on either side of the image.</dd> - <dt>{{domxref("HTMLImageElement.isMap")}}</dt> - <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd> - <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd> - <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd> - <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd> - <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt> - <dd>Returns a <code>unsigned long</code> representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows <code>0</code>.</dd> - <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt> - <dd>Returns a <code>unsigned long</code> representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show <code>0</code>.</dd> - <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd> - <dt>{{domxref("HTMLImageElement.src")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd> - <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd> - <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd> - <dt>{{domxref("HTMLImageElement.useMap")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd> - <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt> - <dd>Is a <code>long</code> representing the space above and below the image.</dd> - <dt>{{domxref("HTMLImageElement.width")}}</dt> - <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</dd> - <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd> - <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt> - <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> , not inserted in a DOM tree.</dd> -</dl> - -<h2 id="Errors">Errors</h2> - -<p>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:</p> - -<ul> - <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li> - <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li> - <li>The specified image is corrupted in some way that prevents it from being loaded.</li> - <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code><img></code> element's attributes.</li> - <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li> -</ul> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor -img1.src = 'image1.png'; -img1.alt = 'alt'; -document.body.appendChild(img1); - -var img2 = document.createElement('img'); // use DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a> -img2.src = 'image2.jpg'; -img2.alt = 'alt text'; -document.body.appendChild(img2); - -// using first image in the document -alert(document.images[0].src); -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Added the <code>referrerPolicy</code> property.</td> - </tr> - <tr> - <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the <code>x</code> and <code>y</code> properties.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>A constructor (with 2 optional parameters) has been added.<br> - The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br> - The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br> - The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>The <code>lowSrc</code> property has been removed.<br> - The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>lowSrc</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>naturalWidth</code>, <code>naturalHeight</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>complete</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>srcset</code> {{experimental_inline}}</td> - <td>{{CompatChrome(34)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>21</td> - <td>{{CompatSafari(7.1)}}</td> - </tr> - <tr> - <td><code>currentSrc </code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sizes</code> {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>x</code> and <code>y</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>14<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>referrerPolicy</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(50)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onerror</code> event handler</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(51)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>lowSrc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>naturalWidth</code>, <code>naturalHeight</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>9</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>complete</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>srcset</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><code>currentSrc </code>{{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sizes</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>x</code> and <code>y</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>14<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>referrerPolicy</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(50)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onerror</code> event handler</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(51)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Though, these <code>x</code> and <code>y</code> 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.</p> - -<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p> - -<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p> - -<p>[4] IE reports <code>false</code> for broken images.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li> -</ul> 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 ---- -<p>Подія <code>abort</code> спрацьовує коли завантаження ресурсу було <span id="result_box" lang="uk"><span>перервано</span></span>.</p> - -<h2 id="Загальна_інформація">Загальна інформація</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Специфікація</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">UIEvent if generated from a user interface, Event otherwise.</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> 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 ---- -<p><span class="seoSummary">Під час написання коду розробнику доступна велика кількість Web API (Application Programming Interface, інтерфейс програмування застосунків). Нижче наведено перелік усіх API та інтерфейсів, які ви можете використовувати під час розробки веб-застосунку чи сайту.</span></p> - -<p>Web API зазвичай використовуються JavaScript, хоча і не обмежені саме цією мовою програмування.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<p>Нижче наведено список усіх доступних API.</p> - -<div>{{ListGroups}}</div> - -<h2 id="Інтерфейси">Інтерфейси</h2> - -<p>Нижче наведено список усіх доступних інтерфейсів.</p> - -<div>{{APIListAlpha}}</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/uk/docs/Web/Events">Довідкова інформація по подіям Web API</a></li> -</ul> 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 ---- -<div>{{DefaultAPISidebar("Intersection Observer API")}}</div> - -<p class="summary"><strong>Intersection Observer API</strong> дозволяє веб-застосункам асинхронно стежити за зміною перетину елемента з його батьком чи областю видимості документа <span class="seoSummary">{{Glossary("viewport")}}</span>.</p> - -<p>Історично склалося так, що виявлення видимості окремого елемента чи видимості двох елементів по відношенню один до одного було непростою задачею. Варіанти вирішення цієї задачі були ненадійними і сповільнювали роботу браузера. На жаль, з "дорослішанням" вебу, необхідність у вирішенні цієї проблеми тільки зростала, з різних причин, таких як:</p> - -<ul> - <li>Відкладене завантаження зображень чи іншого контенту по мірі прокрутки сторінки.</li> - <li>Реалізація веб-сайтів з "безкінечним скролом", де контент підвантажується по мірі того як сторінка прокручується вниз, і користувачу не потрібно переключатися між сторінками.</li> - <li>Звіт про видимість реклами з метою порахувати доходи від неї.</li> - <li>Прийняття рішення, запускати чи ні якийсь процес чи анімацію в залежності від того, побачить користувач результат чи ні.</li> -</ul> - -<p>Раніше реалізація виявлення пересічення елементів означала використання обробників подій і циклів, викликаючих методи типу {{domxref("Element.getBoundingClientRect()")}}, щоб зібрати необхідну інформацію про кожен зачеплений елемент. Оскільки весь цей код працює в основному потоці, виникають проблеми з продуктивністю.</p> - -<p>Розглянемо веб-сторінку з безкінечним скролом. На сторінці використовується бібліотека для керування періодично розміщуваною по всій сторінці рекламою, всюди анімована графіка, а також бібліотека для відображення спливаючих вікон. І всі ці речі використовують свої власні правила для визначення перетинів, і всі вони запущені в основному потоці. Автор сайту може навіть не підозрювати про цю проблему, а також може не знати, як працюють сторонні бібліотеки зсередини. В той же час користувач по ходу прокрутки сторінки стикається з тим, що робота сайта сповільнюється постійним спрацьовуванням виявлення перетинів, що в підсумку призводить до того, що користувач не задоволений браузером, сайтом і своїм комп'ютером.</p> - -<p><strong>Intersection Observer API</strong> дає можливість зареєструвати callback-функцію, яка виконається при перетині спостережуваним елементом кордонів іншого елемента (чи області видимості документа {{Glossary("viewport")}}), або при зміні величини перетину на визначене значення. Таким чином, більше немає необхідності вираховувати перетин елементів в основному потоці, і браузер може оптимізовувати ці процеси на свій погляд.</p> - -<p>Observer API не дозволить дізнатися точне число пікселів чи визначати конкретні пікселі в перетині; проте, його використання покриває найбільш поширені випадки, наприклад <em>"Якщо елементи перетинаються на N%, зроби це і це"</em>.</p> - -<h2 id="Основні_поняття_і_використання_Intersection_Observer_API">Основні поняття і використання <strong>Intersection Observer API </strong></h2> - -<p>Intersection Observer API дозволяє вказати функцію, яка буде викликана щоразу для елемента (target) при перетині його з областю видимості документа (по-замовчуванню) чи заданим елементом (root).</p> - -<p>Зазвичай, використовується відстеження перетину елементу з областю видимості (необхідно вказати <code>null</code> в якості кореневого елементу).</p> - -<p>Чи використовуємо ми область видимості чи інший елемент в якості кореневого, API працює однаково, викликаючи задану вами функцію зворотнього виклику, щоразу, коли видимість цільового елементу змінюється так, що вона перетинає в потрібному ступені кореневий елемент.</p> - -<p>Ступінь перетину цільового і кореневого елементу задається в діапазоні від 0.0 до 1.0, де 1.0 це повний перетин цільовим елементом кордонів кореневого.</p> - -<h3 id="Створення_intersection_observer">Створення intersection observer</h3> - -<p>Для початку з допомогою конструктору потрібно створити об'єкт-спостерігач, вказати для нього функцію для виклику і налаштування відстеження:</p> - -<pre class="brush: js notranslate">let options = { - root: document.querySelector('#scrollArea'), - rootMargin: '0px', - threshold: 1.0 -} - -let observer = new IntersectionObserver(callback, options); -</pre> - -<p>Параметр <strong>threshold</strong> зі значенням <strong>1.0</strong> означає що функція буде викликана при 100% перетину об'єкта (за яким ми стежимо) з об'єктом root.</p> - -<h4 id="Налаштування_Intersection_observer">Налаштування Intersection observer</h4> - -<p>The <code>options</code> 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:</p> - -<dl> - <dt><code>root</code></dt> - <dd>Елемент який використовується в якості області перегляду для перевірки видимості цільового елементу. Повинен бути батьком цільового елементу. По замовчуванню використовується область видимості браузера якщо не визначений або має значення <code>null</code>.</dd> - <dt><code>rootMargin</code></dt> - <dd> - <p>Відступи навколо root. Можуть мати значення як властивість css margin: <code>10px 20px 30px 40px"</code> (top, right, bottom, left). Значення можна задавати у відсотках. По замовчуванню всі параметри встановлені в нулі.</p> - </dd> - <dt><code>threshold</code></dt> - <dd>Число чи масив чисел, який вказує, при якому відсотку видимості цільового елементу повинен спрацювати callback. Наприклад, в цьому випадку callback функція буде викликатися при появі в зоні видимості кожні 25% цільового елементу: [0, 0.25, 0.5, 0.75, 1]. Дефолтне значення 0 (як тільки хоча б один піксель стане видимим, то буде викликаний колбек). Значення 1.0 означає, що увесь елемент повністю має стати видимим перед тим, як буде викликано колбек.</dd> -</dl> - -<h4 id="Цільовий_елемент_який_буде_спостерігатися">Цільовий елемент, який буде спостерігатися</h4> - -<p>Після того, як ви створили спостерігача, вам потрібно дати йому цільовий елемент для перегляду:</p> - -<pre class="brush: js notranslate">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) -</pre> - -<p>Щоразу, коли ціль досягає порогового значення, вказаного для IntersectionObserver, викликається функція зворотнього виклику callback. Де callback отримує список об'єктів IntersectionObserverEntry і спостерігача:</p> - -<pre class="brush: js notranslate">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 - }); -}; -</pre> - -<p>Зверніть увагу, що функція зворотнього виклику запускається в головному потоці і повинна виконуватися якнайшвидше, тому якщо щось забирає багато часу, то використовуйте {{domxref("Window.requestIdleCallback()")}}.</p> - -<p>Також зверніть увагу, що якщо ви вказали опцію <code>root</code>, цільовий елемент повинен бути потомком кореневого елементу. </p> - -<h3 id="How_intersection_is_calculated">How intersection is calculated</h3> - -<p>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.</p> - -<p>It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.</p> - -<h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4> - -<p>Before we can track the intersection of an element with a container, we need to know what that container is. That container is the <strong>intersection root</strong>, or <strong>root element</strong>. This can be either a specific element in the document which is an ancestor of the element to be observed, or <code>null</code> to use the document's viewport as the container.</p> - -<p>The <strong><dfn>root intersection rectangle</dfn></strong> is the rectangle used to check against the target or targets. This rectangle is determined like this:</p> - -<ul> - <li>If the intersection root is the implicit root (that is, the top-level {{domxref("Document")}}), the root intersection rectangle is the viewport's rectangle.</li> - <li>If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.</li> - <li>Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on it).</li> -</ul> - -<p>The root intersection rectangle can be adjusted further by setting the <strong>root margin</strong>, <code>rootMargin</code>, when creating the {{domxref("IntersectionObserver")}}. The values in <code>rootMargin</code> 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).</p> - -<h4 id="Thresholds">Thresholds</h4> - -<p>Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses <strong>thresholds</strong>. 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.</p> - -<p>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 <code>isIntersecting</code> is <code>true</code>, the target element has become at least as visible as the threshold that was passed. If it's <code>false</code>, the target is no longer as visible as the given threshold.</p> - -<p>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:</p> - -<ul> - <li>The first box has a threshold for each percentage point of visibility; that is, the {{domxref("IntersectionObserver.thresholds")}} array is <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li> - <li>The second box has a single threshold, at the 50% mark.</li> - <li>The third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.).</li> - <li>The last box has thresholds each 25%.</li> -</ul> - -<div class="hidden"> -<h5 id="Threshold_example">Threshold example</h5> - -<pre class="brush: html notranslate"><template id="boxTemplate"> - <div class="sampleBox"> - <div class="label topLeft"></div> - <div class="label topRight"></div> - <div class="label bottomLeft"></div> - <div class="label bottomRight"></div> - </div> -</template> - -<main> - <div class="contents"> - <div class="wrapper"> - </div> - </div> -</main></pre> - -<pre class="brush: css notranslate">.contents { - position: absolute; - width: 700px; - height: 1725px; -} - -.wrapper { - position: relative; - top: 600px; -} - -.sampleBox { - position: relative; - left: 175px; - width: 150px; - background-color: rgb(245, 170, 140); - border: 2px solid rgb(201, 126, 17); - padding: 4px; - margin-bottom: 6px; -} - -#box1 { - height: 200px; -} - -#box2 { - height: 75px; -} - -#box3 { - height: 150px; -} - -#box4 { - height: 100px; -} - -.label { - font: 14px "Open Sans", "Arial", sans-serif; - position: absolute; - margin: 0; - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.7); - width: 3em; - height: 18px; - padding: 2px; - text-align: center; -} - -.topLeft { - left: 2px; - top: 2px; -} - -.topRight { - right: 2px; - top: 2px; -} - -.bottomLeft { - bottom: 2px; - left: 2px; -} - -.bottomRight { - bottom: 2px; - right: 2px; -} -</pre> - -<pre class="brush: js notranslate">let observers = []; - -startup = () => { - let wrapper = document.querySelector(".wrapper"); - - // Options for the observers - - let observerOptions = { - root: null, - rootMargin: "0px", - threshold: [] - }; - - // An array of threshold sets for each of the boxes. The - // first box's thresholds are set programmatically - // since there will be so many of them (for each percentage - // point). - - let thresholdSets = [ - [], - [0.5], - [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], - [0, 0.25, 0.5, 0.75, 1.0] - ]; - - for (let i=0; i<=1.0; i+= 0.01) { - thresholdSets[0].push(i); - } - - // Add each box, creating a new observer for each - - for (let i=0; i<4; i++) { - let template = document.querySelector("#boxTemplate").content.cloneNode(true); - let boxID = "box" + (i+1); - template.querySelector(".sampleBox").id = boxID; - wrapper.appendChild(document.importNode(template, true)); - - // Set up the observer for this box - - observerOptions.threshold = thresholdSets[i]; - observers[i] = new IntersectionObserver(intersectionCallback, observerOptions); - observers[i].observe(document.querySelector("#" + boxID)); - } - - // Scroll to the starting position - - document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY; - document.scrollingElement.scrollLeft = 750; -} - -intersectionCallback = (entries) => { - entries.forEach((entry) => { - let box = entry.target; - let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%"; - - box.querySelector(".topLeft").innerHTML = visiblePct; - box.querySelector(".topRight").innerHTML = visiblePct; - box.querySelector(".bottomLeft").innerHTML = visiblePct; - box.querySelector(".bottomRight").innerHTML = visiblePct; - }); -} - -startup(); -</pre> -</div> - -<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p> - -<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4> - -<p>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.</p> - -<ol> - <li>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.</li> - <li>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 <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li> - <li>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 <code><iframe></code> 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.</li> - <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li> - <li>The resulting rectangle is then updated by intersecting it with the <a href="/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle">root intersection rectangle</a>.</li> - <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li> -</ol> - -<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3> - -<p>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 <code>IntersectionObserverEntry</code> objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p> - -<p>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.</p> - -<p>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%.</p> - -<pre class="brush: js notranslate">intersectionCallback(entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - let elem = entry.target; - - if (entry.intersectionRatio >= 0.75) { - intersectionCounter++; - } - } - }); -} -</pre> - -<h2 id="Інтерфейси">Інтерфейси</h2> - -<dl> - <dt>{{domxref("IntersectionObserver")}}</dt> - <dd>Основний інтерфейс для API Intersection Observer. Надає методи для створення і керування observer, який може спостерігати будь-яку кількість цільових елементів для однієї і тієї ж конфігурації перетину. Кожен observer може асинхронно спостерігати зміни в перетині між одним чи кількома цільовими елементами і спільним елементом-батьком чи з їх верхнім рівнем Document's viewport. Батько чи область перегляду згадується як <strong>root</strong>.</dd> - <dt>{{domxref("IntersectionObserverEntry")}}</dt> - <dd> - <p>Описує перетин між цільовим елементом і його кореневим контейнером в певний момент переходу. Об'єкти цього типу можуть бути отримані тільки двома способами: в якості вхідних даних для вашого зворотнього виклику <code>IntersectionObserver</code> чи шляхом виклику {{domxref("IntersectionObserver.takeRecords()")}}.</p> - </dd> -</dl> - -<h2 id="A_simple_example">A simple example</h2> - -<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, 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..</p> - -<h3 id="HTML">HTML</h3> - -<p>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 <code>"box"</code>) and some contents within the box.</p> - -<pre class="brush: html notranslate"><div id="box"> - <div class="vertical"> - Welcome to <strong>The Box!</strong> - </div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<p>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 <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p> - -<pre class="brush: css notranslate">#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; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p> - -<h4 id="Setting_up">Setting up</h4> - -<p>First, we need to prepare some variables and install the observer.</p> - -<pre class="brush: js notranslate">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);</pre> - -<p>The constants and variables we set up here are:</p> - -<dl> - <dt><code>numSteps</code></dt> - <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd> - <dt><code>prevRatio</code></dt> - <dd>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.</dd> - <dt><code>increasingColor</code></dt> - <dd>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.</dd> - <dt><code>decreasingColor</code></dt> - <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd> -</dl> - -<p>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 <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p> - -<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4> - -<p>The <code>createObserver()</code> 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.</p> - -<pre class="brush: js notranslate">function createObserver() { - let observer; - - let options = { - root: null, - rootMargin: "0px", - threshold: buildThresholdList() - }; - - observer = new IntersectionObserver(handleIntersect, options); - observer.observe(boxElement); -}</pre> - -<p>This begins by setting up an <code>options</code> 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 <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, 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.</p> - -<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p> - -<p>Once <code>options</code> 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, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p> - -<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p> - -<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4> - -<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p> - -<pre class="brush: js notranslate">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; -}</pre> - -<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>#</th> - <th>Ratio</th> - <th>#</th> - <th>Ratio</th> - </tr> - <tr> - <th>1</th> - <td>0.05</td> - <th>11</th> - <td>0.55</td> - </tr> - <tr> - <th>2</th> - <td>0.1</td> - <th>12</th> - <td>0.6</td> - </tr> - <tr> - <th>3</th> - <td>0.15</td> - <th>13</th> - <td>0.65</td> - </tr> - <tr> - <th>4</th> - <td>0.2</td> - <th>14</th> - <td>0.7</td> - </tr> - <tr> - <th>5</th> - <td>0.25</td> - <th>15</th> - <td>0.75</td> - </tr> - <tr> - <th>6</th> - <td>0.3</td> - <th>16</th> - <td>0.8</td> - </tr> - <tr> - <th>7</th> - <td>0.35</td> - <th>17</th> - <td>0.85</td> - </tr> - <tr> - <th>8</th> - <td>0.4</td> - <th>18</th> - <td>0.9</td> - </tr> - <tr> - <th>9</th> - <td>0.45</td> - <th>19</th> - <td>0.95</td> - </tr> - <tr> - <th>10</th> - <td>0.5</td> - <th>20</th> - <td>1.0</td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<h4 id="Handling_intersection_changes">Handling intersection changes</h4> - -<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p> - -<pre class="brush: js notranslate">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; - }); -}</pre> - -<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, 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 <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. 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.</p> - -<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p> - -<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p> - -<h3 id="Result">Result</h3> - -<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p> - -<p>{{EmbedLiveSample('A_simple_example', 400, 400)}}</p> - -<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('IntersectionObserver')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.IntersectionObserver")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li> - <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li> - <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li> -</ul> - -<div id="gtx-trans" style="position: absolute; left: 22px; top: 11013px;"> -<div class="gtx-trans-icon"></div> -</div> 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 ---- -<div>{{APIRef("CSSOM View")}}</div> - -<p>Метод <code><strong>addListener()</strong></code> інтерфейсу {{domxref("MediaQueryList")}} додає слухача до <code>MediaQueryListener</code>, який викличе вказану функцію щойно стан медіа-запиту зміниться.</p> - -<p>Цей метод є простим скороченням для {{domxref("EventTarget.addEventListener()")}} задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати <code>addListener</code> замість <code>addEventListener</code>, тоді як в нових <code>MediaQueryList</code> просто успадковує <code>EventTarget</code>.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>MediaQueryList.addListener(func)</em></pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt><code>func</code></dt> - <dd>Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт {{domxref("MediaQueryListListener")}}, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події {{domxref("MediaQueryListEvent")}} успадковано від {{domxref("Event")}}.</dd> -</dl> - -<h3 id="Вертає">Вертає</h3> - -<p>Нічого.</p> - -<h2 id="Приклади">Приклади</h2> - -<pre class="brush: js">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);</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Специфікація</th> - <th>Статус</th> - <th>Примітка</th> - </tr> - <tr> - <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Початкова виознака</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("api.MediaQueryList.addListener")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/CSS/Media_queries">Медіа-запити</a></li> - <li><a href="/uk/docs/CSS/Using_media_queries_from_code">Використання медіа-запитів у коді</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> 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 ---- -<div>{{APIRef("CSSOM View")}} {{SeeCompatTable}}</div> - -<p>A <strong><code>MediaQueryList</code></strong> object stores information on a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> 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 <code>true</code>).</p> - -<p>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.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The new version of the <code>MediaQueryList</code> interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaQueryList.matches")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that returns <code>true</code> if the {{domxref("document")}} currently matches the media query list, or <code>false</code> if not.</dd> - <dt>{{domxref("MediaQueryList.media")}} {{readonlyInline}}</dt> - <dd>A {{domxref("DOMString")}} representing a serialized media query.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("MediaQueryList.onchange")}}</dt> - <dd>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 <code>MediaListQuery</code> instance in older browsers, for backwards compatibility purposes.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The new version of the <code>MediaQueryList</code> interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaQueryList.addListener()")}}</dt> - <dd>Adds a listener to the <code>MediaQueryListener</code> 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.</dd> - <dt>{{domxref("MediaQueryList.removeListener()")}}</dt> - <dd>Removes a listener from the <code>MediaQueryListener</code>. This is basically an alias for {{domxref("EventTarget.removeEventListener()")}}, for backwards compatibility purposes.</dd> -</dl> - -<dl> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>This simple example creates a <code>MediaQueryList</code> 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.</p> - -<pre class="brush: js">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);</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub (see the <a href="https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html">source code</a>, and also see it <a href="https://mdn.github.io/dom-examples/mediaquerylist/index.html">running live</a>).</p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> - <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryListListener")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> 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 ---- -<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p> - -<p>Network Information API надає інформацію про мережеве підключення в загальних термінах ('wifi', 'cellular' тощо). Ця інформація може бути використана для вибору якості і розміру вмісту на основі підключення користувача. Весь API складається з інтерфейсу {{domxref ("NetworkInformation")}} та однієї властивості до інтерфейсу {{domxref ("Navigator")}}: {{domxref ("Navigator.connection")}} .</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Виявлення_зміни_підключення"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Виявлення зміни підключення</span></span></span></h3> - -<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>В цьому прикладі ми стежимо за змінами підключення користувача.</span></span></span></p> - -<pre class="brush: js notranslate">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); -</pre> - -<h3 id="Попереднє_завантаження_великих_ресурсів"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Попереднє завантаження великих ресурсів</span></span></span></h3> - -<p>Об'єкт підключення {{domxref ("Navigator.connection")}} корисний для визначення необхідності попереднього завантажування ресурсів, що мають великий розмір. Перевірка типу підключення буде викликана незабаром після завантаження сторінки. Якщо з'єднання визначено як стільниковий зв’язок, то прапорець <code>preloadVideo</code> буде встановлено у значення <code>false</code>. Для простоти та наочності цей приклад перевіряє лише один тип підключення. На практиці використовується оператор switch або інший метод для перевірки всіх можливих значень {{domxref ("NetworkInformation.type")}}. Незалежно від значення <code>type</code> ви можете оцінити швидкість з'єднання через властивість {{domxref ("NetworkInformation.effectiveType")}}.</p> - -<pre class="brush: js notranslate">let preloadVideo = true; -var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; -if (connection) { - if (connection.effectiveType === 'slow-2g') { - preloadVideo = false; - } -}</pre> - -<h2 id="Інтерфейси">Інтерфейси</h2> - -<dl> - <dt>{{domxref("NetworkInformation")}}</dt> - <dd>Надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує сповіщення, якщо тип з’єднання змінюється. Інтерфейс <code>NetworkInformation</code> не може бути створено як екземпляр. Натомість доступ до нього здійснюється через інтерфейс {{domxref ("Navigator")}}.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Network Information', '', 'Network Information API')}}</td> - <td>{{Spec2('Network Information')}}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність">Сумісність</h2> - -<h3 id="NetworkInformation">NetworkInformation</h3> - - - -<p>{{Compat("api.NetworkInformation")}}</p> - -<h3 id="Navigator.connection">Navigator.connection</h3> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("api.Navigator.connection")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li> - <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li> - <li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li> -</ul> 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 ---- -<div>{{APIRef("Network Information API")}}{{SeeCompatTable}}</div> - -<p>Інтерфейс <code><strong>NetworkInformation</strong></code> надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує засоби для сповіщень, якщо тип підключення змінюється. Інтерфейс <code>NetworkInformation</code> не може бути створено як екземпляр. Натомість доступ до нього здійснюється через властивість з'єднання інтерфейсу {{domxref("Navigator")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Властивості">Властивості</h2> - -<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dd> - <ul> - </ul> - </dd> - <dt>{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}</dt> - <dd>Повертає приблизне значення ефективної пропускної здатності в мегабітах в секунду. Значення округлено до найближчого кратного до 25 кілобіт на секунду.</dd> - <dt>{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}</dt> - <dd>Повертає максимальну швидкість, в мегабітах в секунду (Mbps), для поточного з'єднання.</dd> - <dt>{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}</dt> - <dd>Повертає діючий тип з'єднання в значенні 'slow-2g', '2g', '3g', або '4g'.</dd> - <dt>{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}</dt> - <dd>Повертає оцінку часу зворотного зв'язку (RTT) поточного з'єднання, округлену до найближчого кратного до 25 мілісекунд.</dd> - <dt>{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}</dt> - <dd>Повертає <code>true</code>, якщо користувач встановив параметр зменшеного використання даних.</dd> - <dt>{{domxref("NetworkInformation.type")}} {{readonlyinline}}</dt> - <dd>Повертає тип підключення, яке використовує пристрій для зв’язку з мережею. Існуючі значення: - <ul> - <li><code>bluetooth</code></li> - <li><code>cellular</code></li> - <li><code>ethernet</code></li> - <li><code>none</code></li> - <li><code>wifi</code></li> - <li><code>wimax</code></li> - <li><code>other</code></li> - <li><code>unknown</code></li> - </ul> - </dd> -</dl> - -<h3 id="Обробники_подій"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Обробники подій</span></span></span></h3> - -<dl> - <dt>{{domxref("NetworkInformation.onchange")}}</dt> - <dd>Подія, яка запускається, коли змінюється інформація про з’єднання, і {{event("change")}} запускається на цьому об’єкті.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</em></p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Network Information', '#networkinformation-interface', 'NetworkInformation')}}</td> - <td>{{Spec2('Network Information')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність">Сумісність</h2> - - - -<p>{{Compat("api.NetworkInformation")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li> - <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li> - <li>Реалізація інтерфейсу в {{domxref("Navigator")}}.</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Метод <strong><code>Node.contains()</code></strong> повертає значення {{jsxref("Boolean")}}, яке вказує, чи переданий вузол є нащадком заданого вузла чи ні.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">node.contains( otherNode ) -</pre> - -<h2 id="Приклад">Приклад</h2> - -<p>Ця функція перевіряє, чи елемент знаходиться в тілі сторінки. А також визначає чи тіло сторінки включає само себе. Якщо включає само себе, то відповідно метод <code>isInPage</code> буде повертати <code>false</code>. В іншому випадку буде повертатися <code>true</code> або<code> false </code>в залежності від того, чи елемент існує всередині тіла сторінки.</p> - -<pre class="brush:js">function isInPage(node) { - return (node === document.body) ? false : document.body.contains(node); -}</pre> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Особливість</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("9.0")}}</td> - <td>5.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>3.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Особливість</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("9.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">лише підтримує метод <code>contains()</code> для елементів</a>.</p> - -<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&lpg=PA299&ots=4XRWUISZVr&dq=safari+node+contains+professional+javascript&pg=PA299&hl=de#v=onepage&q=safari%20node%20contains%20professional%20javascript&f=false">реалізувала метод <code>contains()</code> неправильно</a>.</p> - -<h2 id="Дивитися_також">Дивитися також</h2> - -<ul> - <li>{{domxref("Node.compareDocumentPosition")}}</li> - <li>{{domxref("Node.hasChildNodes")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> - -<p>The following interfaces all inherit from <code>Node</code> 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")}}</p> - -<p>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.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> - <dd>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 <code>'/'</code>.</dd> - <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}</dt> - <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> - <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> - <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> - <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> - <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. - <div class="note"> - <p><strong>Note:</strong> 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")}}</p> - </div> - </dd> - <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. - <div class="note"> - <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p> - </div> - </dd> - <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> - <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. 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 <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> - <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}</dt> - <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> - <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> - <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: - <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Name</th> - <th scope="col">Value</th> - </tr> - <tr> - <td><code>ELEMENT_NODE</code></td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> - <td><code>2</code></td> - </tr> - <tr> - <td><code>TEXT_NODE</code></td> - <td><code>3</code></td> - </tr> - <tr> - <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> - <td><code>4</code></td> - </tr> - <tr> - <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> - <td><code>5</code></td> - </tr> - <tr> - <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> - <td><code>6</code></td> - </tr> - <tr> - <td><code>PROCESSING_INSTRUCTION_NODE</code></td> - <td><code>7</code></td> - </tr> - <tr> - <td><code>COMMENT_NODE</code></td> - <td><code>8</code></td> - </tr> - <tr> - <td><code>DOCUMENT_NODE</code></td> - <td><code>9</code></td> - </tr> - <tr> - <td><code>DOCUMENT_TYPE_NODE</code></td> - <td><code>10</code></td> - </tr> - <tr> - <td><code>DOCUMENT_FRAGMENT_NODE</code></td> - <td><code>11</code></td> - </tr> - <tr> - <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> - <td><code>12</code></td> - </tr> - </tbody> - </table> - </dd> - <dt>{{domxref("Node.nodeValue")}}</dt> - <dd>Returns / Sets the value of the current node</dd> - <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> - <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> - <dd>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 <code>null</code>.</dd> - <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> - <dd>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 <code>null</code>.</dd> - <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd> - <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> - <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}}</dt> - <dd>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.</dd> - <dt>{{domxref("Node.textContent")}}</dt> - <dd>Returns / Sets the textual content of an element and all its descendants.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{domxref("Node.appendChild()")}}</dt> - <dd>Adds the specified childNode argument as the last child to the current node.<br> - 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.</dd> - <dt>{{domxref("Node.cloneNode()")}}</dt> - <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> - <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> - <dt>{{domxref("Node.contains()")}}</dt> - <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> - <dt>{{domxref("Node.getRootNode()")}}</dt> - <dd>Returns the context objects root which optionally includes the shadow root if it is available. </dd> - <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> - <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> - <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> - <dt>{{domxref("Node.hasChildNodes()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> - <dt>{{domxref("Node.insertBefore()")}}</dt> - <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> - <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> - <dt>{{domxref("Node.isEqualNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> - <dt>{{domxref("Node.isSameNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> - <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> - <dd>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.</dd> - <dt>{{domxref("Node.lookupPrefix()")}}</dt> - <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> - <dt>{{domxref("Node.normalize()")}}</dt> - <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> - <dt>{{domxref("Node.removeChild()")}}</dt> - <dd>Removes a child node from the current element, which must be a child of the current node.</dd> - <dt>{{domxref("Node.replaceChild()")}}</dt> - <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> - <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> - <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> - -<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> - -<pre class="brush: js">function DOMComb (oParent, oCallback) { - if (oParent.hasChildNodes()) { - for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { - DOMComb(oNode, oCallback); - } - } - oCallback.call(oParent); -}</pre> - -<h4 id="Syntax">Syntax</h4> - -<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre> - -<h4 id="Description">Description</h4> - -<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> - -<h4 id="Parameters">Parameters</h4> - -<dl> - <dt><code>parentNode</code></dt> - <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> - <dt><code>callbackFunction</code></dt> - <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> -</dl> - -<h4 id="Sample_usage">Sample usage</h4> - -<p>The following example send to the <code>console.log</code> the text content of the body:</p> - -<pre class="brush: js">function printContent () { - if (this.nodeValue) { console.log(this.nodeValue); } -} - -onload = function () { - DOMComb(document.body, printContent); -};</pre> - -<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> - -<pre class="brush: js">Element.prototype.removeAll = function () { - while (this.firstChild) { this.removeChild(this.firstChild); } - return this; -};</pre> - -<h4 id="Sample_usage_2">Sample usage</h4> - -<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ -document.body.removeAll();</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> - Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> - The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> - Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> - Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> - Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> - Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> - - {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}<br> - {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}<br> - {{CompatNo}}{{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSameNode()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}<br> - Removed in {{CompatGeckoDesktop("10")}}<br> - Returned in {{CompatGeckoDesktop("48")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSupported()</code> {{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}<br> - </td><td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>attributes</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}<br> - {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>rootNode()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>CompatGeckoDesktop(48)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}46.0<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}48.0<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>getRootNode</code></td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(41)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}<br> - {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSameNode()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td> - <p>{{CompatGeckoDesktop("1.0")}}<br> - Removed in {{CompatGeckoDesktop("10")}}<br> - Returned in {{CompatGeckoDesktop("48")}}</p> - </td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>isSupported()</code> {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>attributes</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>rootNode()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(48)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}48.0[3]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getRootNode()</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(41)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] WebKit and old versions of Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> - -<p>[2] In Gecko 22.0 {{geckoRelease("22.0")}} the <code>attributes</code> property was moved to {{domxref("Element")}}.</p> - -<p>[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.</p> 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_відображення_сторінки ---- -<div>{{DefaultAPISidebar("Page Visibility API")}}</div> - -<div></div> - -<p>При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.</p> - -<div class="note"> -<p><strong>Примітка:</strong> API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.</p> -</div> - -<p>Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.</p> - -<p>Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <code><iframe></code> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.</p> - -<h3 id="Випадки_використання">Випадки використання</h3> - -<p>Розглянемо декілька прикладів використання API видимості сторінки.</p> - -<ul> - <li>На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.</li> - <li>Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.</li> - <li>Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.</li> - <li>Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.</li> -</ul> - -<p>Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.</p> - -<div class="note"> -<p><strong>Примітка:</strong> У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.</p> -</div> - -<h3 id="Політика_позиціонування_як_сприяння_продуктивності_фонової_сторінки">Політика позиціонування, як сприяння продуктивності фонової сторінки</h3> - -<p>Окремо від API відображення сторінки агенти користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:</p> - -<ul> - <li>Більшість браузерів припиняють посилати {{domxref ("Window.requestAnimationFrame", "requestAnimationFrame ()")}} зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.</li> - <li>Такі таймери, як {{domxref ("WindowOrWorkerGlobalScope.setTimeout", "setTimeout ()")}}, гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок, що перевищують встановлені.</a></li> - <li>Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче: - <ul> - <li>У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.</li> - <li>Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок довше, ніж зазначено</a>). У Chrome це значення дорівнює 10 секундам.</li> - <li>Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.</li> - <li>Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.</li> - <li>Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.</li> - </ul> - </li> -</ul> - -<p>Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.</p> - -<ul> - <li>Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.</li> - <li>Вкладки з кодом, що використовують мережеві з'єднання у реальному часі (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> та <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.</li> - <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> процеси також залишаються непорушними для уникнення тайм-аутів.</li> -</ul> - -<h2 id="Приклад">Приклад</h2> - -<p>Подивіться <a href="http://daniemon.com/tech/webapps/page-visibility/">живий приклад</a> (відео зі звуком).</p> - -<p>Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:</p> - -<pre class="brush: js"> // Встановіть ім'я властивості 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); - -} -</pre> - -<h2 id="Властивості_використані_в_інтерфейсі_документа">Властивості, використані в інтерфейсі документа</h2> - -<p>API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :</p> - -<dl> - <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt> - <dd>Повертає <code>true</code> , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і <code>false</code> якщо навпаки.</dd> - <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt> - <dd> {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: - <dl> - <dt><code>visible</code></dt> - <dd>Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.</dd> - <dt><code>hidden</code></dt> - <dd>Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.</dd> - <dt><code>prerender</code></dt> - <dd>Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. - <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують попереднє завантаження.</div> - </dd> - <dt><code>unloaded</code></dt> - <dd>Сторінка перебуває в процесі вивантаження з пам'яті. - <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують це значення.</div> - </dd> - </dl> - </dd> - <dt>{{domxref("Document.onvisibilitychange")}}</dt> - <dd> {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .</dd> -</dl> - -<pre class="brush: js">//startSimulation та pauseSimulation визначені в іншому місці -function handleVisibilityChange() { - if (document.hidden) { - pauseSimulation(); - } else { - startSimulation(); - } -} - -document.addEventListener("visibilitychange", handleVisibilityChange, false); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Page Visibility API')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Початкове значення.</td> - </tr> - </tbody> -</table> - -<h2 id="Працює_з_браузерами">Працює з браузерами</h2> - -<div> -<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3> - -<div> - - -<p>{{Compat("api.Document.visibilityState")}}</p> -</div> -</div> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li>Опис <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog"> API Видимості сторінки</a> від IEBlog.</li> - <li>Опис <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">API Видимості сторінки</a> від Google</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">Інтерфейс <strong><code>PromiseRejectionEvent</code></strong> відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript {{jsxref("Promise")}} відхиляються.</span> Ці події особливо корисні для цілей телеметрії та налагоджування.</p> - -<p>Щоб дізнатись більше про події відхилення промісів, дивіться {{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}.</p> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}</dt> - <dd>Створює подію <code>PromiseRejectionEvent</code>, отримуючи тип події (<code><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code> або <code><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code>) та інші деталі.</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<p><em>Також успадковує властивості від батьківського інтерфейсу {{domxref("Event")}}</em>.</p> - -<dl> - <dt>{{domxref("PromiseRejectionEvent.promise")}} {{readonlyInline}}</dt> - <dd>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений.</dd> - <dt>{{domxref("PromiseRejectionEvent.reason")}} {{readOnlyInline}}</dt> - <dd>Значення чи {{jsxref("Object","об'єкт")}}, що вказує причину відхилення проміса, як вона передається у {{jsxref("Promise.відхилено","Promise.reject()")}}.</dd> -</dl> - -<h2 id="Методи">Методи</h2> - -<p><em>Цей інтерфейс не має унікальних методів; він успадковує методи від батьківського інтерфейсу {{domxref("Event")}}</em>.</p> - -<h2 id="Події">Події</h2> - -<dl> - <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></dt> - <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, і після того, як відхилення було оброблене кодом для обробки відхилення проміса.</dd> - <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></dt> - <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, але немає обробника, який зреагував би на відхилення.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<p>Цей простий приклад перехоплює необроблені відхилення промісів та логує їх з метою відлагодження.</p> - -<pre class="brush: js">window.onunhandledrejection = function(e) { - console.log(e.reason); -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#promiserejectionevent', 'PromiseRejectionEvent')}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.PromiseRejectionEvent")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("WindowEventHandlers.onrejectionhandled")}}</li> - <li>{{domxref("WindowEventHandlers.onunhandledrejection")}}</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM") }}</div> - -<p>Властивість <code><strong>promise</strong></code> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, вказує об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений. Ви можете дослідити властивість події {{domxref("PromiseRejectionEvent.reason")}}, щоб дізнатись, чому проміс був відхилений.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>promise</em> = <em>PromiseRejectionEvent</em>.promise</pre> - -<h3 id="Значення">Значення</h3> - -<p>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений, і чиє відхилення пройшло необробленим.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Цей приклад прослуховує необроблені проміси, і, якщо властивість {{domxref("PromiseRejectionEvent.reason", "reason")}} є об'єктом з полем <code>code</code>, що містить текст "Модуль не готовий", він встановлює функцію зворотного виклику, що виконується під час неактивності переглядача, яка буде повторно запускати невиконану задачу, щоб виконати її правильно.</p> - -<p>Метод {{domxref("event.preventDefault()")}} викликається, щоб зазначити, що проміс тепер був оброблений.</p> - -<pre class="brush: js">window.onunhandledrejection = function(event) { - if (event.reason.code && event.reason.code == "Модуль не готовий") { - window.requestIdleCallback(function(deadline) { - loadModule(event.reason.moduleName) - .then(performStartup); - }); - event.preventDefault(); - } -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-promise', 'PromiseRejectionEvent.promise')}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.PromiseRejectionEvent.promise")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("PromiseRejectionEvent")}}</li> - <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li> - <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">Конструктор <code><strong>PromiseRejectionEvent()</strong></code> створює та вертає {{domxref("PromiseRejectionEvent")}}, що відображає події, запущені, коли об'єкт JavaScript {{jsxref("Promise")}} був відхилений.</span> З подіями відхилення промісів стає можливим виявляти та повідомляти про проміси, чиє неуспішне завершення пройшло непоміченим. Також стає легше писати глобальні обробники для помилок.</p> - -<p>Існують два типи подій <code>PromiseRejectionEvent</code>: <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> надсилається середовищем виконання JavaScript, коли проміс був відхилений, але відхилення не було оброблене. Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a> видається, якщо проміс був відхилений, але відхилення було перехоплене обробником відхилень.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>promiseRejectionEvent</em> = PromiseRejectionEvent(<em>type</em>, <em>options</em>); -</pre> - -<h3 id="Параметри">Параметри</h3> - -<p><em>Конструктор <code>PromiseRejectionEvent()</code></em><em> також успадковує параметри від {{domxref("Event.Event", "Event()")}}.</em></p> - -<dl> - <dt><code>type</code></dt> - <dd>Рядок, що відображає ім'я типу події <code>PromiseRejectionEvent</code>. Він чутливий до регістру, і повинен мати значення <a href="/uk/docs/Web/API/Window/rejectionhandled_event">"rejectionhandled"</a> або <a href="/uk/docs/Web/API/Window/unhandledrejection_event">"unhandledrejection"</a>, щоб відповідати іменам можливих (не штучно створених) подій {{domxref("PromiseRejectionEvent")}}, які можуть запустити програмні агенти).</dd> - <dt><code>options</code></dt> - <dd>{{jsxref("Object","Об'єкт")}}, що визначає деталі відхилення: - <dl> - <dt><code>promise</code></dt> - <dd>{{jsxref("Promise","Проміс")}}, що був відхилений.</dd> - <dt><code>reason</code></dt> - <dd>Будь-яке значення чи {{jsxref("Object","об'єкт")}}, що відображає причину відхилення проміса. Це може бути що завгодно, від числового коду помилки, до помилки {{domxref("DOMString")}} та об'єкта, який містить детальну інформацію, що описує ситуацію, яка призвела до відхилення проміса.</dd> - </dl> - </dd> -</dl> - -<h3 id="Значення_що_повертається">Значення, що повертається</h3> - -<p>Нова подія <code>PromiseRejectionEvent</code>, що має конфігурацію, визначену параметрами.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Цей приклад створює нову подію <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> для проміса <code>myPromise</code> з причиною-рядком "Мій будинок горить". Параметр <code>reason</code> (причина) міг так само легко бути числом, чи навіть об'єктом з детальною інформацією, що містить адрес будинку, чи опис того, наскільки сильний вогонь, і номер телефону людини, яку потрібно повідомити.</p> - -<pre class="brush: js">let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", { - promise : myPromise, - reason : "Мій будинок горить" -});</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#the-promiserejectionevent-interface', 'the PromiseRejectionEvent interface')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.PromiseRejectionEvent.PromiseRejectionEvent")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("PromiseRejectionEvent")}}</li> -</ul> 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 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>Властивість <strong><code>reason</code></strong> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, є будь-яким значенням JavaScript чи {{jsxref("Object","об'єктом")}}, що надає причину, яка передається у {{jsxref("Promise.відхилено","Promise.reject()")}}. Це, в теорії, надає інформацію щодо причини відхилення проміса.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>reason</em> = <em>PromiseRejectionEvent</em>.reason</pre> - -<h3 id="Значення">Значення</h3> - -<p>Значення або об'єкт, що надає інформацію, якою ви можете скористатись, щоб зрозуміти, чому був відхилений проміс. Це може бути що завгодно, від коду помилки до об'єкта з текстом, посиланнями та всім, що ви захочете в нього додати.</p> - -<h2 id="Приклади">Приклади</h2> - -<pre class="brush: js">window.onunhandledrejection = function(e) { - console.log(e.reason); -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-reason', 'PromiseRejectionEvent.reason')}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.PromiseRejectionEvent.reason")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("PromiseRejectionEvent")}}</li> - <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li> - <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li> -</ul> 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 ---- -<p>{{APIRef("SVG")}}</p> - -<p>Атрибут AnimVal або властивість animVal містить те саме значення, що і властивість baseVal. Якщо атрибут або властивість анімований, він буде містити поточне анімоване значення атрибута або властивості. Якщо даний атрибут або властивість в даний час не анімовані, то він містить те саме значення, що і baseVal</p> - -<div class="note"> -<p>Властивість <strong>animVal</strong> доступна лише для зчитування значення. Internet Explorer 9 підтримує анімацію SVG, але не підтримує анімацію SVG на основі декларативних баз даних. В результаті, властивість <strong>animVal </strong>містить те саме значення, що і властивість baseVal.</p> -</div> - -<h2 class="alert" id="Синтакс">Синтакс</h2> - -<pre><em>var</em> = <em>object.</em><strong>animVal</strong></pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментарі</th> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'types.html#__svg__SVGAnimatedString__animVal')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG2', 'types.html#__svg__SVGAnimatedString__animVal')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерів</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести свій внесок у свої дані, будь ласка, перегляньте https://github.com/mdn/browser-compat-data і надішліть нам запит на pull-request.</div> - -<p>{{Compat("api.SVGAnimatedString.animVal")}}</p> 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 ---- -<div>{{APIRef("SVG")}}</div> - -<div> </div> - -<p>The <code><strong>SVGAnimatedString</strong></code> 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.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}</dt> - <dd>This is a {{domxref("DOMString")}} representing the animation value. <span class="field"><span class="_animVal doc">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 </span></span>baseVal<span class="field"><span class="_animVal doc">.</span></span></dd> - <dt>{{domxref("SVGAnimatedString.baseVal")}}</dt> - <dd>This is a {{domxref("DOMString")}} representing the base value. <span class="field"><span class="_baseVal doc">The base value of the given attribute before applying any animations. Setter throws DOMException.</span></span></dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>SVGAnimatedString</code> interface do not provide any specific methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('SVG1.1', '#InterfaceSVGAnimatedString')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG2', 'types.html#InterfaceSVGAnimatedString')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.SVGAnimatedString")}}</p> 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 ---- -<p>{{ApiRef("URL API")}}</p> - -<p><strong><code>URLSearchParams</code></strong> інтерфейс визначає корисні методи для роботи з довгими текстовими URL.</p> - -<p>Об'єктна реалізація <code>URLSearchParams</code> може використовуватись напряму в {{jsxref("Statements/for...of", "for...of")}} структурі, замість {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> що еквівалентно до <code>for (var p of mySearchParams.entries())</code>.</p> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt> - <dd>Конструктор вертає <code>URLSearchParams</code> об'єкт.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface doesn't inherit any property.</em></p> - -<h2 id="Методи">Методи</h2> - -<p><em>Інтерфейс на наслідує ніяких методів</em></p> - -<dl> - <dt>{{domxref("URLSearchParams.append()")}}</dt> - <dd>Appends a specified key/value pair as a new search parameter.</dd> - <dt>{{domxref("URLSearchParams.delete()")}}</dt> - <dd>Deletes the given search parameter, and its associated value, from the list of all search parameters.</dd> - <dt>{{domxref("URLSearchParams.entries()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd> - <dt>{{domxref("URLSearchParams.get()")}}</dt> - <dd>Returns the first value associated to the given search parameter.</dd> - <dt>{{domxref("URLSearchParams.getAll()")}}</dt> - <dd>Returns all the values association with a given search parameter.</dd> - <dt>{{domxref("URLSearchParams.has()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if such a search parameter exists.</dd> - <dt>{{domxref("URLSearchParams.keys()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>keys </strong>of the key/value pairs contained in this object.</dd> - <dt>{{domxref("URLSearchParams.set()")}}</dt> - <dd>Sets the value associated to a given search parameter to the given value. If there were several values, delete the others.</dd> - <dt>{{domxref("URLSearchParams.toString()")}}</dt> - <dd>Returns a string containg a query string suitable for use in a URL.</dd> - <dt>{{domxref("URLSearchParams.values()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>values </strong>of the key/value pairs contained in this object.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<pre class="brush: js notranslate">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" -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoDesktop("29.0")}}</td> - <td>{{CompatNo}}</td> - <td>36</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoDesktop("44.0")}}</td> - <td>{{CompatNo}}</td> - <td>36</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoMobile("29.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - </tr> - <tr> - <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoMobile("44.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li> - <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li> -</ul> - -<dl> -</dl> 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 ---- -<p>{{DefaultAPISidebar("Web Workers API")}}</p> - -<p class="summary"><strong>Web Workers</strong> це механізм, який дозволяє запускати скрипові операції у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.</p> - -<h2 id="Концепція_та_використання_Web_Workers">Концепція та використання Web Workers</h2> - -<p>Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, <span class="short_text" id="result_box" lang="uk"><span>які</span> <span>використовуються</span> <span>одним </span><span>сценарієм</span><span>;</span></span> загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).</p> - -<p>У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних <code>з window</code>, включаючи <a href="/en-US/docs/WebSockets">WebSockets</a>, та механізми зберігання даних, як <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> та Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Дивіться <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функції та класи, доступні для workers</a> для більшої детальності.</p> - -<p>Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи<code> postMessage()</code>, та відповідаюсь через обробник подій <code>onmessage</code> (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.</p> - -<p>Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker. На додаток, workers можуть використовувати <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для мережевого В/В, за винятком того, що <code>responseXML</code> <code>та channel</code> атрибути <code>XMLHttpRequest</code> завжди <code>повертають null</code>.</p> - -<p>Окрім виділених workers, є й інши типи:</p> - -<ul> - <li>Загальні workers - можуть бути використані декількома сценаріями, запускаючись в різних вікнах, IFrames, тощо, якщо вони у одному домені з worker. Вони трохи складніші, ніж виділені workers — скрипти мають спілкуватися через активний порт. Дивіться {{domxref("SharedWorker")}} для більшї детальності.</li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> по суті виступають в якості проксі-серверу, знаходячись між web-додатком, браузером й мережею (коли доступна). Вони призначені для того (зокрема іншого), щоб давати змогу створювати ефективний offline-функціонал, перехоплення мережевих запитів та прийняття відповідних заходів, основуючись на тому, чи доступна мережа, та поновювати данні більш переважними з серверу. Вони також дозволяють доступ для додавання сповіщень та фонових синхроних APIs.</li> - <li>Chrome Workers є Firefox-only типом worker, що можна використовуати, якщо розроблюється доповнення та бажано використовувати workers й мати доступ до <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> у worker. Дивіться {{domxref("ChromeWorker")}} для більшої детальності. </li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> забезпечуюсть можливість направляти сценарії обробки звуку відбуватися у контексті web worker.</li> -</ul> - -<div class="note"> -<p><strong>Примітка</strong>: Згіздно з <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.</p> -</div> - -<h2 id="Інтерфейси_Web_Worker">Інтерфейси Web Worker</h2> - -<dl> - <dt>{{domxref("AbstractWorker")}}</dt> - <dd>Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.</dd> - <dt>{{domxref("SharedWorker")}}</dt> - <dd>Представляє собою специфічний вид worker, який може бути <em>доступний</em> з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.</dd> - <dt>{{domxref("WorkerGlobalScope")}}</dt> - <dd>Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.</dd> - <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt> - <dd>Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd> - <dt>{{domxref("SharedWorkerGlobalScope")}}</dt> - <dd>Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd> - <dt>{{domxref("WorkerNavigator")}}</dt> - <dd>Представляє собою ідентифікатор та стан користувача (клієнта):</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<p>Ми створили декілька простих прикладів, щоб показати основне вікористання:</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">Основні приклади виділеного worker </a>(<a href="http://mdn.github.io/simple-web-worker/">запуск виділеного worker</a>).</li> - <li><a href="https://github.com/mdn/simple-shared-worker">Основні приклади загалного worker </a>(<a href="http://mdn.github.io/simple-shared-worker/">запуск загального worker</a>).</li> -</ul> - -<p>Ви можете знайти більше інформації як працюють ці демо у <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Використання web workers</a>.</p> - -<h2 id="Специфікация">Специфікация</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers')}}</td> - <td>{{Spec2('Web Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>4</td> - <td>{{CompatGeckoDesktop(1.9.1)}}</td> - <td>10.0</td> - <td>10.6</td> - <td>4</td> - </tr> - <tr> - <td>Shared workers</td> - <td>4</td> - <td>{{CompatGeckoDesktop(29)}}</td> - <td>{{CompatNo}}</td> - <td>10.6</td> - <td>4</td> - </tr> - <tr> - <td>Passing data using structured cloning</td> - <td>13</td> - <td>{{CompatGeckoDesktop(8)}}</td> - <td>10.0</td> - <td>11.5</td> - <td>6</td> - </tr> - <tr> - <td>Passing data using transferable objects</td> - <td>17 {{property_prefix("webkit")}}<br> - 21</td> - <td>{{CompatGeckoDesktop(18)}}</td> - <td>{{CompatNo}}</td> - <td>15</td> - <td>6</td> - </tr> - <tr> - <td>Global {{domxref("window.URL", "URL")}}</td> - <td>10<sup>[1]</sup><br> - 23</td> - <td>{{CompatGeckoDesktop(21)}}</td> - <td>11</td> - <td>15</td> - <td>6<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>4</td> - <td>{{CompatGeckoMobile(1.9.1)}}</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.5</td> - <td>5.1</td> - </tr> - <tr> - <td>Shared workers</td> - <td>{{CompatNo}}</td> - <td>4</td> - <td>29</td> - <td>1.4</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using structured cloning</td> - <td>{{CompatNo}}</td> - <td>4</td> - <td>8</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using transferable objects</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>18</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] As <code>webkitURL</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li> - <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li> -</ul> 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 ---- -<div>{{WebGLSidebar}}</div> - -<div class="summary"> -<p>WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.</p> -</div> - -<p>Підтримка WebGL присутня в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.</p> - -<p>Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.</p> - -<h2 id="Посилання">Посилання</h2> - -<h3 id="Стандартні_інтерфейси">Стандартні інтерфейси</h3> - -<div class="index"> -<ul> - <li>{{domxref("WebGLRenderingContext")}}</li> - <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLActiveInfo")}}</li> - <li>{{domxref("WebGLBuffer")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WebGLFramebuffer")}}</li> - <li>{{domxref("WebGLProgram")}}</li> - <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLRenderbuffer")}}</li> - <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLShader")}}</li> - <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> - <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLTexture")}}</li> - <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLUniformLocation")}}</li> - <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> -</ul> -</div> - -<h3 id="Розширення">Розширення</h3> - -<div class="index"> -<ul> - <li>{{domxref("ANGLE_instanced_arrays")}}</li> - <li>{{domxref("EXT_blend_minmax")}}</li> - <li>{{domxref("EXT_color_buffer_float")}}</li> - <li>{{domxref("EXT_color_buffer_half_float")}}</li> - <li>{{domxref("EXT_disjoint_timer_query")}}</li> - <li>{{domxref("EXT_frag_depth")}}</li> - <li>{{domxref("EXT_sRGB")}}</li> - <li>{{domxref("EXT_shader_texture_lod")}}</li> - <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> - <li>{{domxref("OES_element_index_uint")}}</li> - <li>{{domxref("OES_standard_derivatives")}}</li> - <li>{{domxref("OES_texture_float")}}</li> - <li>{{domxref("OES_texture_float_linear")}}</li> - <li>{{domxref("OES_texture_half_float")}}</li> - <li>{{domxref("OES_texture_half_float_linear")}}</li> - <li>{{domxref("OES_vertex_array_object")}}</li> - <li>{{domxref("WEBGL_color_buffer_float")}}</li> - <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_es3")}}</li> - <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> - <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> - <li>{{domxref("WEBGL_debug_renderer_info")}}</li> - <li>{{domxref("WEBGL_debug_shaders")}}</li> - <li>{{domxref("WEBGL_depth_texture")}}</li> - <li>{{domxref("WEBGL_draw_buffers")}}</li> - <li>{{domxref("WEBGL_lose_context")}}</li> -</ul> -</div> - -<h3 id="Події">Події</h3> - -<ul> - <li>{{Event("webglcontextlost")}}</li> - <li>{{Event("webglcontextrestored")}}</li> - <li>{{Event("webglcontextcreationerror")}}</li> -</ul> - -<h3 id="Константи_і_типи">Константи і типи</h3> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Константи WebGL</a></li> - <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Типи WebGL</a></li> -</ul> - -<h2 id="Керівництва_і_навчальні_сторінки">Керівництва і навчальні сторінки</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Керівництво по WebGL</a>: Основні поняття WebGL для початківця. Гарний початок, якщо ви не маєте досвіду роботи з WebGL.</li> - <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Кращі практики WebGL</a>: Підказки та поради для покращення контенту WebGL.</li> - <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Використання розширень</a>: Як використовувати доступні для WebGL розширення.</li> -</ul> - -<h3 id="Детальні_керівництва">Детальні керівництва</h3> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.</li> - <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .</li> -</ul> - -<h2 id="Ресурси">Ресурси</h2> - -<ul> - <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.</li> - <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Основний веб-сайт WebGL на Khronos Group.</li> - <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Сайт з керівництвами про використання WebGL.</li> - <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Базове керівництво про основи WebGL.</li> - <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> - <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.</li> - <li><a href="http://webglstats.com/">WebGL Stats</a> Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.</li> -</ul> - -<h3 id="Бібліотеки">Бібліотеки</h3> - -<ul> - <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript-бібліотека матриці і вектору для WebGL додатків з високою ефективністю.</li> - <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Бібліотека з відкритим початковим кодом для маніпулювання векторами і матрицями. Не оптимізована для WebGL але надзвичайно міцна.</li> -</ul> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebGL')}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Початкове визначення. Базується на OpenGL ES 2.0</td> - </tr> - <tr> - <td>{{SpecName('WebGL2')}}</td> - <td>{{Spec2('WebGL2')}}</td> - <td>Будується поверх WebGL1. На основі OpenGL ES 3.0.</td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 2.0')}}</td> - <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 3.0')}}</td> - <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність">Сумісність</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Функція</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>9</td> - <td>11</td> - <td>12<sup>[1]</sup></td> - <td>5.1<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Функція</th> - <th>Firefox Mobile (Gecko)</th> - <th>Chrome for Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>4</td> - <td>25<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>12<sup>[1]</sup></td> - <td>8.1</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Реалізація цієї функції є експериментальною.</p> - -<h3 id="Зауваження_по_сумісності">Зауваження по сумісності</h3> - -<p>На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я <code>webgl</code>, але старішим також потрібно <code>experimental-webgl</code>. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту <code>webgl2</code>.</p> - -<h3 id="Зауваження_Gecko">Зауваження Gecko</h3> - -<h4 id="Налагодження_і_тестування_WebGL">Налагодження і тестування WebGL</h4> - -<p>Починаючи з Gecko 10.0 {{geckoRelease("10.0")}}, є дві доступні опції, які дозволяють контролювати можливості WebGL з метою тестування:</p> - -<dl> - <dt><code>webgl.min_capability_mode</code></dt> - <dd>Властивість типу Boolean яка, коли <code>true</code>, вмикає режим мінімальної сумісності. Коли WebGL знаходиться в даному режимі, він налаштований підтримувати тільки мінімальний набір функцій і можливостей, необхідних специфікації WebGL. Це дозволяє вам бути впевненими, що важ WebGL код буде працювати на будь-якому пристрої або веб-переглядачі, незалежно від інших можливостей. Має значення <code>false</code> за замовчування.</dd> - <dt><code>webgl.disable_extensions</code></dt> - <dd>Властивість типу Boolean яка, коли <code>true</code>, вимикає всі розширення WebGL. Має значення <code>false</code> за замовчуванням.</dd> -</dl> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Інформація про сумісніть розширень WebGL</a></li> -</ul> 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 ---- -<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div> - -<p>Об'єкт <code>WebSocket надає </code>API (інтерфейс) для створення і керування <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>-з'єднаннями з сервером connection to a server, а також для надсилання і отримання повідомлень з даними.</p> - -<p>Конструктор WebSocket приймає один обов'язковий і один опціональний параметр:</p> - -<pre class="syntaxbox">new WebSocket( - in DOMString url, - in optional DOMString protocols -); -</pre> - -<dl> - <dt><code>url</code></dt> - <dd>Це адреса URL, до якої треба підключитись. Тобто адреса, з якої буде відповідати WebSocket на сервері.</dd> - <dt><code>protocols</code> {{optional_inline}}</dt> - <dd>Це один протокол або масив протоколів. Протокол - це текст. Ці протоколи потрібні, щоб вказати під-протоколи, щоб один сервер міг виконувати декілька під-протоколів WebSocket (на приклад, вам потрібен сервер, який здатний працювати з різними типами взаємодій залежно від протоколу). Якщо ви не вкажете протокол, то WebSocket буде вважати, що отримав пустий рядок.</dd> -</dl> - -<p>Конструктор може повертати помилки. На прикладі нижче помилка про "порт, до якого була спроба підключитися, був заблокований":</p> - -<dl> - <dt><code>SECURITY_ERR</code></dt> - <dd>The port to which the connection is being attempted is being blocked.</dd> -</dl> - -<h2 id="Method_overview">Method overview</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td> - </tr> - <tr> - <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Attribute</td> - <td class="header">Type</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>binaryType</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>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.</td> - </tr> - <tr> - <td><code>bufferedAmount</code></td> - <td><code>unsigned long</code></td> - <td>The 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. <strong>Read only</strong></td> - </tr> - <tr> - <td><code>extensions</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.</td> - </tr> - <tr> - <td><code>onclose</code></td> - <td>{{domxref("EventListener")}}</td> - <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>CLOSED</code>. The listener receives a <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> named "close".</td> - </tr> - <tr> - <td><code>onerror</code></td> - <td>{{domxref("EventListener")}}</td> - <td>An event listener to be called when an error occurs. This is a simple event named "error".</td> - </tr> - <tr> - <td><code>onmessage</code></td> - <td>{{domxref("EventListener")}}</td> - <td>An event listener to be called when a message is received from the server. The listener receives a <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> named "message".</td> - </tr> - <tr> - <td><code>onopen</code></td> - <td>{{domxref("EventListener")}}</td> - <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>OPEN</code>; this indicates that the connection is ready to send and receive data. The event is a simple one with the name "open".</td> - </tr> - <tr> - <td><code>protocol</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>A string indicating the name of the sub-protocol the server selected; this will be one of the strings specified in the <code>protocols</code> parameter when creating the WebSocket object.</td> - </tr> - <tr> - <td><code>readyState</code></td> - <td><code>unsigned short</code></td> - <td>The current state of the connection; this is one of the {{anch("Ready state constants")}}. <strong>Read only.</strong></td> - </tr> - <tr> - <td><code>url</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>The URL as resolved by the constructor. This is always an absolute URL. <strong>Read only.</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Constants">Constants</h2> - -<h3 id="Ready_state_constants">Ready state constants</h3> - -<p>These constants are used by the <code>readyState</code> attribute to describe the state of the WebSocket connection.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Constant</td> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>CONNECTING</code></td> - <td><code>0</code></td> - <td>The connection is not yet open.</td> - </tr> - <tr> - <td><code>OPEN</code></td> - <td><code>1</code></td> - <td>The connection is open and ready to communicate.</td> - </tr> - <tr> - <td><code>CLOSING</code></td> - <td><code>2</code></td> - <td>The connection is in the process of closing.</td> - </tr> - <tr> - <td><code>CLOSED</code></td> - <td><code>3</code></td> - <td>The connection is closed or couldn't be opened.</td> - </tr> - </tbody> -</table> - -<h2 id="Methods">Methods</h2> - -<h3 id="close()">close()</h3> - -<p>Closes the WebSocket connection or connection attempt, if any. If the connection is already <code>CLOSED</code>, this method does nothing.</p> - -<pre class="syntaxbox">void close( - in optional unsigned short code, - in optional DOMString reason -); -</pre> - -<h4 id="Parameters">Parameters</h4> - -<dl> - <dt><code>code</code> {{optional_inline}}</dt> - <dd>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 <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">list of status codes</a> on the <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> page for permitted values.</dd> - <dt><code>reason</code> {{optional_inline}}</dt> - <dd>A human-readable string explaining why the connection is closing. This string must be no longer than 123 bytes of UTF-8 text (<strong>not</strong> characters).</dd> -</dl> - -<h4 id="Exceptions_thrown">Exceptions thrown</h4> - -<dl> - <dt><code>INVALID_ACCESS_ERR</code></dt> - <dd>An invalid <code>code</code> was specified.</dd> - <dt><code>SYNTAX_ERR</code></dt> - <dd>The <code>reason</code> string is too long or contains unpaired surrogates.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.</p> -</div> - -<h3 id="send()">send()</h3> - -<p>Transmits data to the server over the WebSocket connection.</p> - -<pre class="syntaxbox">void send( - in DOMString data -); - -void send( - in ArrayBuffer data -); - -void send( - in Blob data -); -</pre> - -<h4 id="Parameters_2">Parameters</h4> - -<dl> - <dt><code>data</code></dt> - <dd>A text string to send to the server.</dd> -</dl> - -<h4 id="Exceptions_thrown_2">Exceptions thrown</h4> - -<dl> - <dt><code>INVALID_STATE_ERR</code></dt> - <dd>The connection is not currently <code>OPEN</code>.</dd> - <dt><code>SYNTAX_ERR</code></dt> - <dd>The data is a string that has unpaired surrogates.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Gecko's implementation of the <code>send()</code> method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a <code>boolean</code> 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")}}.</p> - -<p>As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.</p> -</div> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">// 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); -});</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td> - <td>{{Spec2("Websockets")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Sub-protocol support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Sub-protocol support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use <code>MozWebSocket()</code>: <code>var mySocket = new MozWebSocket("http://www.example.com/socketserver");</code></p> - -<p>The <code>extensions</code> attribute was not supported in Gecko until Gecko 8.0.</p> - -<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the <a href="#send()">send()</a> method were limited to 16 MB. They can now be up to 2 GB in size.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> -</ul> 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 ---- -<div>{{ApiRef("Window")}}</div> - -<p>Метод <code><strong>Window.confirm()</strong></code> показує модальний діалог з необов’язковим текстом та двома кнопками, Так та Відміна.</p> - -<h2 id="Syntax" name="Syntax">Синтакс</h2> - -<pre><em>result</em> = window.confirm(<em>message</em>); -</pre> - -<ul> - <li><code>message</code> це необов’язковий текст, що показується в діалозі.</li> - <li><code>result</code> це бульове значення, яке показує, яку кнопку було натиснуто (<code>true</code> значить Так).</li> -</ul> - -<h2 id="Example" name="Example">Приклад</h2> - -<pre>if (window.confirm("Do you really want to leave?")) { - window.open("exit.html", "Thanks for Visiting!"); -} -</pre> - -<p>Результат:</p> - -<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> - </p> - -<h2 id="Notes" name="Notes">Нотатки</h2> - -<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span>Діалоги є модальними вікнами - вони запобігають доступу користувача до іншої частини програмного інтерфейсу аж до моменту закриття діалогу. Саме тому ви не маєте занадто часто використовувати жодну функцію, яка створює діалоги (чи модальні вікна). В будь якому разі, є хороші підстави <a href="http://alistapart.com/article/neveruseawarning">не використовувати діалоги для підтверджень</a>.</p> - -<p>Починаючи з Chrome {{CompatChrome(46.0)}} цей етод заблокований в межах {{htmlelement("iframe")}} доти, доки атрибут sandbox айфрейму не має значення <code>allow-modal</code>.</p> - -<p>{{gecko_minversion_inline("23.0")}} Цей аргумент є необов’язковим і не вимагається специфікацією.</p> - -<h2 id="Specification" name="Specification">Специфікація</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">Дивіться також</h2> - -<ul> - <li>{{domxref("window.alert","alert")}}</li> - <li>{{domxref("window.prompt","prompt")}}</li> -</ul> 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 ---- -<p>{{ APIRef }}</p> - -<p><strong><code>Window.console</code></strong> — це незмінювана (read-only) властивість, що повертає посилання на об’єкт {{domxref("Console")}}, який надає методи для логування інформацію до консолі браузера. Ці методи призначені для відлагоджування і не мають використовуватися для передачі інформації кінцевому користувачу.</p> - -<h2 id="Syntax" name="Syntax">Синтакс</h2> - -<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; -</pre> - -<h2 id="Example" name="Example">Приклад</h2> - -<h3 id="Логування_до_консолі">Логування до консолі</h3> - -<p>Перший приклад відправляє текст до консолі браузера.</p> - -<pre class="brush: js">console.log("An error occurred while loading the content"); -</pre> - -<p>Наступний приклад відправляє текст до консолі браузера, разом з полями об’єкта, які можуть розкриватися:</p> - -<pre class="brush: js">console.dir(someObject);</pre> - -<p>Дивіться {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} для перегляду інших прикладів.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p>Наразі існує багато імплементацій, що відрізняються залежно від браузера, однак триває робота щодо уніфікації і міжбраузерної консистентності.</p> -</div> 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 ---- -<p>Подія <code>DOMContentLoaded</code> викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання <code><a href="/en-US/docs/Mozilla_event_reference/load">load</a> </code>там, де застосування <code>DOMContentLoaded</code> є більш доречним, є дуже поширеною помилкою, тому будьте уважними.</p> - -<p>{{Note("Синхронний Javascript затримує парсинг DOM.")}}</p> - -<p>{{Note("Існує безліч універсальних та автономних бібліотек, які попонують кроссбраузерні методи для визначення готовності DOM.")}}</p> - -<h2 id="Прискорення">Прискорення</h2> - -<p>Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронним</a> та <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимізувати завантаження стилів</a>. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.</p> - -<h2 id="Основна_інформація">Основна інформація</h2> - -<dl> - <dt style="width: 120px; text-align: right; float: left;">Специфікація</dt> - <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> - <dt style="width: 120px; text-align: right; float: left;">Інтерфейс</dt> - <dd style="margin: 0px 0px 0px 120px;">Подія</dd> - <dt style="width: 120px; text-align: right; float: left;">Спливання</dt> - <dd style="margin: 0px 0px 0px 120px;">Так</dd> - <dt style="width: 120px; text-align: right; float: left;">Можливість скасування</dt> - <dd style="margin: 0px 0px 0px 120px;">Так (однак скасування як простої події скасувати не можна)</dd> - <dt style="width: 120px; text-align: right; float: left;"> </dt> - <dt style="width: 120px; text-align: right; float: left;"> </dt> - <dt style="width: 120px; text-align: right; float: left;"> </dt> - <dt style="width: 120px; text-align: right; float: left;"> </dt> - <dt style="width: 120px; text-align: right; float: left;">Ціль</dt> - <dd style="margin: 0px 0px 0px 120px;">Документ</dd> - <dt style="width: 120px; text-align: right; float: left;">Типова дія</dt> - <dd style="margin: 0px 0px 0px 120px;">Немає.</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Властивість</th> - <th scope="col">Тип</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); -</script> -</pre> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); - -for(var i=0; i<1000000000; i++) -{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. -</script> -</pre> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> - <td>9.0<sup>[2]</sup></td> - <td>9.0</td> - <td>3.1<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.</p> - -<p>[2] Internet Explorer 8 підтримує подію <code>readystatechange</code> , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання <code>document.documentElement.doScroll("left");</code>, так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.</p> - -<h2 id="Подібні_події">Подібні події</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/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 ---- -<p>{{ APIRef }}</p> - -<p><code><strong>Window</strong>.<strong>history</strong></code> - це незмінювана (read-only) властивість, що повертає посилання на <span class="tlid-translation translation"><span title="">об'єкт</span></span> {{domxref("History")}}, <span class="tlid-translation translation"><span title="">який надає інтерфейс для керування історією сеансу браузера (сторінки, відвіданій на вкладці або фреймі, в якому завантажена поточна сторінка</span> <span title="">).</span></span></p> - -<p>Дивіться <a href="/en-US/docs/Web/API/History_API">Manipulating the browser history</a> <span class="tlid-translation translation"><span title="">для прикладів і деталей</span></span>. Зокрема, у цій статті пояснюються особливості безпеки методів <code>pushState()</code> та <code>replaceState()</code>, з якими вам варто ознайомитися, перш ніж їх використовувати.</p> - -<h2 id="Синтакс">Синтакс</h2> - -<pre class="syntaxbox">var <var>historyObj</var> = <var>window</var>.history; -</pre> - -<h2 id="Example" name="Example">Приклад</h2> - -<pre class="brush: js">history.back(); // еквівалентно настиканню кнопки назад -history.go(-1); // еквівалентно history.back(); -</pre> - -<h2 id="Примітки">Примітки</h2> - -<p><span class="tlid-translation translation"><span title="">Для сторінок верхнього рівня ви можете побачити список сторінок в історії сеансу, доступних через об'єкт</span></span> <code>History</code>, <span class="tlid-translation translation"><span title="">у випадаючих списках браузера поруч із кнопками вперед і назад.</span></span></p> - -<p>З міркуваннь безпеки, об'єкт <code>History</code> не дає доступу <span class="tlid-translation translation"><span title="">непривілейованого коду до URL-адрес інших сторінок в історії сеансів, але дозволяє переміщатися по історії сеансу</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Неможливо очистити історію сеансу або вимкнути навігацію кнопок вперед/назад з непривілейованого коду.</span> <span title="">Найближчим доступним рішенням є метод </span></span><code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code><span class="tlid-translation translation"><span title="">, який замінює поточний елемент історії сеансу наданим URL.</span></span></p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - - - -<p>{{Compat("api.Window.history")}}</p> 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 ---- -<p>{{APIRef}}</p> - -<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> - -<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> - -<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> 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 <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> - -<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> - -<dl> - <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> - <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> - <dd>This property indicates whether the current window is closed or not.</dd> - <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt> - <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd> - <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> - <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd> - <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the XUL controller objects for the current chrome window.</dd> - <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> - <dd>Returns the browser crypto object.</dd> - <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> - <dd>Gets/sets the status bar text for the given window.</dd> - <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> - <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> - <dd>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")}}.</dd> - <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> - <dd>Synonym of {{domxref("window.personalbar")}}</dd> - <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the document that the window contains.</dd> - <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> - <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> - <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> - <dd>Returns an array of the subframes in the current window.</dd> - <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>This property indicates whether the window is displayed in full screen or not.</dd> - <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> - <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> - Was: Multiple storage objects that are used for storing data across multiple pages.</dd> - <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the history object.</dd> - <dt>{{domxref("Window.innerHeight")}}</dt> - <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> - <dt>{{domxref("Window.innerWidth")}}</dt> - <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> - <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> - <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> - <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> - <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> - <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt> - <dd>Gets/sets the location, or current URL, of the window object.</dd> - <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> - <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> - <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> - <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>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 <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>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 <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.name")}}</dt> - <dd>Gets/sets the name of the window.</dd> - <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the navigator object.</dd> - <dt>{{domxref("Window.opener")}}</dt> - <dd>Returns a reference to the window that opened this current window.</dd> - <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> - <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> - <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the outside of the browser window.</dd> - <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the outside of the browser window.</dd> - <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollX")}}.</dd> - <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollY")}}</dd> - <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the parent of the current window or subframe.</dd> - <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> - <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> - <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> - <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> - <dd>Formerly provided access to install and remove PKCS11 modules.</dd> - <dt>{{domxref("Window.returnValue")}}</dt> - <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> - <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the screen object associated with the window.</dd> - - <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> - <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> - <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> - <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> - <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> - <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> - <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> - <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> - <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> - <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> - <dd>Returns an object reference to the window object itself.</dd> - <dt>{{domxref("Window.sessionStorage")}}</dt> - <dd>Returns a storage object for storing data within a single page session.</dd> - <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the window object of the sidebar.</dd> - <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> - <dt>{{domxref("Window.status")}}</dt> - <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> - <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> - <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> - <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> - <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the current window.</dd> - <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> - <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> -</dl> - -<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>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.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Window.alert()")}}</dt> - <dd>Displays an alert dialog.</dd> - - <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves back one in the window history.</dd> - <dt>{{domxref("Window.blur()")}}</dt> - <dd>Sets focus away from the window.</dd> - <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> - <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Registers the window to capture all events of the specified type.</dd> - <dt>{{domxref("Window.clearImmediate()")}}</dt> - <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> - <dt>{{domxref("Window.close()")}}</dt> - <dd>Closes the current window.</dd> - <dt>{{domxref("Window.confirm()")}}</dt> - <dd>Displays a dialog with a message that the user needs to respond to.</dd> - <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.dispatchEvent()")}}</dt> - <dd>Used to trigger an event.</dd> - <dt>{{domxref("Window.dump()")}}</dt> - <dd>Writes a message to the console.</dd> - <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.find()")}}</dt> - <dd>Searches for a given string in a window.</dd> - <dt>{{domxref("Window.focus()")}}</dt> - <dd>Sets focus on the current window.</dd> - <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves the window one document forward in the history.</dd> - <dt>{{domxref("Window.getAttention()")}}</dt> - <dd>Flashes the application icon.</dd> - <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> - <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> - <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> - <dt>{{domxref("Window.getSelection()")}}</dt> - <dd>Returns the selection object representing the selected item(s).</dd> - <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns the browser to the home page.</dd> - <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> - <dt>{{domxref("Window.maximize()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> - <dd>Minimizes the window.</dd> - <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Moves the current window by a specified amount.</dd> - <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Moves the window to the specified coordinates.</dd> - <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>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 <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> - <dt>{{domxref("Window.open()")}}</dt> - <dd>Opens a new window.</dd> - <dt>{{domxref("Window.openDialog()")}}</dt> - <dd>Opens a new dialog window.</dd> - <dt>{{domxref("Window.postMessage()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.print()")}}</dt> - <dd>Opens the Print Dialog to print the current document.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Returns the text entered by the user in a prompt dialog.</dd> - <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> - <dd>Releases the window from trapping events of a specific type.</dd> - <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> - <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Resizes the current window by a certain amount.</dd> - <dt>{{domxref("Window.resizeTo()")}}</dt> - <dd>Dynamically resizes window.</dd> - <dt>{{domxref("Window.restore()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.scroll()")}}</dt> - <dd>Scrolls the window to a particular place in the document.</dd> - <dt>{{domxref("Window.scrollBy()")}}</dt> - <dd>Scrolls the document in the window by the given amount.</dd> - <dt>{{domxref("Window.scrollByLines()")}}</dt> - <dd>Scrolls the document by the given number of lines.</dd> - <dt>{{domxref("Window.scrollByPages()")}}</dt> - <dd>Scrolls the current document by the specified number of pages.</dd> - <dt>{{domxref("Window.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates in the document.</dd> - <dt>{{domxref("Window.setCursor()")}}</dt> - <dd>Changes the cursor for the current window</dd> - <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Executes a function after the browser has finished other heavy tasks</dd> - <dt>{{domxref("Window.setResizable()")}}</dt> - <dd>Toggles a user's ability to resize a window.</dd> - <dt>{{domxref("Window.showModalDialog()")}}</dt> - <dd>Displays a modal dialog.</dd> - <dt>{{domxref("Window.sizeToContent()")}}</dt> - <dd>Sizes the window according to its content.</dd> - <dt>{{domxref("Window.stop()")}}</dt> - <dd>This method stops window loading.</dd> - <dt>{{domxref("Window.updateCommands()")}}</dt> - <dd>Updates the state of commands of the current chrome window (UI).</dd> -</dl> - -<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler to a specific event type on the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>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 <em>(sx, sy)</em> with width sw, and height sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Starts the process of fetching a resource from the network.</dd> - <dt>{{domxref("EventTarget.removeEventListener")}}</dt> - <dd>Removes an event listener from the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h2 id="Event_handlers">Event handlers</h2> - -<p>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.</p> - -<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> 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 <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> -</div> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> - <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> - <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>An event handler property for before-unload events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Called after the window loses focus, such as due to a popup.</dd> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>An event handler property for change events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Called after the ANY mouse button is pressed & released</dd> - <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Called when a double click is made with ANY mouse button.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Called after the window is closed</dd> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Called when the RIGHT mouse button is pressed</dd> - <dt>{{domxref("Window.ondevicelight")}}</dt> - <dd>An event handler property for any ambient light levels changes</dd> - <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called if accelerometer detects a change (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called when the orientation is changed (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> - <dd>An event handler property for any device orientation changes.</dd> - <dt>{{domxref("Window.ondeviceproximity")}}</dt> - <dd>An event handler property for device proximity event</dd> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> - <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> - <dt>{{domxref("Window.onappinstalled")}}</dt> - <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> - <dt>{{domxref("Window.oninput")}}</dt> - <dd>Called when the value of an <input> element changes</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> - <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>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.</dd> - <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Called when ANY mouse button is pressed.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Called continously when the mouse is moved inside the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Called when the pointer leaves the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Called when the pointer enters the window</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Called when ANY mouse button is released</dd> - <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Called when network connection is established. See {{event("online")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> - <dt>{{domxref("Window.onpaint")}}</dt> - <dd>An event handler property for paint events on the window.</dd> - <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Called when a back putton is pressed.</dd> - <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> - <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Called when a form is reset</dd> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Called continuously as you are resizing the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> - <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Called when the mouse wheel is rotated around any axis</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Called after text in an input field is selected</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Called when a form is submitted</dd> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> - <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Called when the user navigates away from the page.</dd> - <dt>{{domxref("Window.onuserproximity")}}</dt> - <dd>An event handler property for user proximity events.</dd> - <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt> - <dd>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).</dd> -</dl> - -<h2 id="Constructors">Constructors</h2> - -<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> - -<dl> - <dt>{{domxref("Window.ConstantSourceNode")}}</dt> - <dd>Creates an instance of {{domxref("ConstantSourceNode")}}</dd> - <dt>{{domxref("Window.DOMParser")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Image")}}</dt> - <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> - <dt>{{domxref("Option")}}</dt> - <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> - <dt>{{domxref("Window.QueryInterface")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XMLSerializer")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> - <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> -</ul> 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 ---- -<p>{{APIRef()}}</p> - -<p>Властивість <code>localStorage</code> надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище <code>localStorage</code> є схожим на <code><a href="/uk/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, але не має обмежень тривалості зберігання даних, тоді як дані <code>sessionStorage</code> видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).</p> - -<p>Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: <strong>ім'я хоста, порт, та навіть протокол — http/https</strong>), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.</p> - -<h2 id="Синтакс">Синтакс</h2> - -<pre><em>myStorage</em> = window.localStorage;</pre> - -<h3 id="Значення">Значення</h3> - -<p>Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.</p> - -<h3 id="Винятки">Винятки</h3> - -<dl> - <dt><code><strong>SecurityError</strong></code></dt> - <dd>Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є <code>file:</code> чи <code>data:</code>). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.</dd> -</dl> - -<h2 id="Приклад">Приклад</h2> - -<p>Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.</p> - -<p>Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:</p> - -<pre class="brush: js">localStorage.setItem('Кіт', 'Барсик');</pre> - -<p>Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:</p> - -<pre class="brush: js">var cat = localStorage.getItem('Кіт');</pre> - -<p>Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:</p> - -<pre class="brush: js">localStorage.removeItem('Кіт');</pre> - -<p>А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:</p> - -<pre class="brush: js">localStorage.clear();</pre> - -<div class="note"> -<p><strong>Заувага</strong>: повний приклад див. у статті <a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a>.</p> -</div> - -<p>А тепер розгляньмо дещо змістовніший приклад:</p> - -<pre class="brush: js">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()); // виводить [] -</pre> - -<p>Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:</p> - -<pre class="brush: js">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}} -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("api.Window.localStorage")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a></li> - <li>{{domxref("LocalStorage")}}</li> - <li>{{domxref("SessionStorage")}}</li> - <li>{{domxref("Window.sessionStorage")}}</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">Подія <strong><code>rejectionhandled</code></strong> посилається у глобальну область видимості скрипта (зазвичай, {{domxref("window")}}, але також {{domxref("Worker")}}), коли відхиляється об'єкт JavaScript {{jsxref("Promise")}}, але після того, як відбулась обробка відхилення.</span> Це можна використовувати для відлагодження та для загальної стійкості застосунка, в тандемі з подією {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, яка посилається, коли проміс був відхилений, але не існує обробника відхилення.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Спливає</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Скасовується</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Інтерфейс</th> - <td>{{domxref("PromiseRejectionEvent")}}</td> - </tr> - <tr> - <th scope="row">Обробник події</th> - <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Приклад">Приклад</h2> - -<p>Ви можете використовувати подію <code>rejectionhandled</code>, щоб залогувати проміси, які було відхилено, у консоль, разом з причинами відхилення:</p> - -<pre class="brush: js">window.addEventListener("rejectionhandled", event => { - console.log("Проміс відхилено; причина: " + event.reason); -}, false); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.Window.rejectionhandled_event")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li> - <li>{{domxref("PromiseRejectionEvent")}}</li> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</li> -</ul> 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 ---- -<div>{{APIRef}}</div> - -<p>Властивість <code><strong>Window.self</strong></code>, доступна лише для читання, повертає window як {{domxref("WindowProxy")}}. Її можна використовувати через крапку на об'єкті <code>window</code> (а саме, <code>window.self</code>) або автономно (<code>self</code>). Перевага автономного запису в тому, що схожий запис існує для не window контексту, наприклад у {{domxref("Worker", "Web Workers", "", 1)}}. Використовуючи <code>self</code>, ви можете звертатись до глобальної області видимості таким чином, що звернення працюватиме не лише в контексті window (<code>self</code> дорівнюватиме <code>window.self</code>), але також у контексті worker (тоді <code>self</code> дорівнюватиме {{domxref("WorkerGlobalScope.self")}}).</p> - -<h2 id="Notes" name="Notes">Приклад</h2> - -<p>Наступне використання <code>window.self</code> можна також замінити на <code>window</code>.</p> - -<pre class="brush:js">if (window.parent.frames[0] != window.self) { - // це вікно не є першим фреймом у списку -} -</pre> - -<p>Більше того, при використанні у активному документі контексту перегляду <code>window</code> - це посилання на поточний глобальний об'єкт, і таким чином, усе перечислене є еквівалентним:</p> - -<pre class="brush:js">var w1 = window; -var w2 = self; -var w3 = window.window; -var w4 = window.self; -// w1, w2, w3, w4 є строго рівними, та лише w2 функціонуватиме у workers -</pre> - -<h2 id="Specification" name="Specification">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Немає змін від останнього знімку {{SpecName("HTML5.1")}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Немає змін від {{SpecName("HTML5 W3C")}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Перший знімок, що містить визначення <code>Window.self</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.Window.self")}}</p> - -<h2 class="noinclude" id="Див._також">Див. також</h2> - -<ul> - <li>Еквівалент властивості <code>Worker</code>, {{domxref("WorkerGlobalScope.self")}}.</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">Подія <strong><code>unhandledrejection</code></strong> посилається у глобальну область видимості скрипта, коли об'єкт JavaScript {{jsxref("Promise")}}, що не має обробника відхилення, відхиляється; зазвичай, це {{domxref("window")}}, але також може бути {{domxref("Worker")}}.</span> Це корисно для відлагодження та для надання резервної обробки помилок у неочікуваних ситуаціях.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Спливає</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Скасовується</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">Інтерфейс</th> - <td>{{domxref("PromiseRejectionEvent")}}</td> - </tr> - <tr> - <th scope="row">Обробник подій</th> - <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Примітки_щодо_використання">Примітки щодо використання</h2> - -<p>Дозвіл події <code>unhandledrejection</code> спливати зрештою призведе до виводу повідомлення помилки у консолі. Ви можете запобігти цьому, викликавши {{domxref("Event.preventDefault", "preventDefault()")}} на інтерфейсі {{domxref("PromiseRejectionEvent")}}; дивіться приклад {{anch("Запобігання обробці за замовчуванням")}} нижче.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Тут ми маємо кілька прикладів, які демонструють, як ви можете скористатись подією <code>unhandledrejection</code>. Подія містить деяку корисну інформацію:</p> - -<dl> - <dt><code>promise</code></dt> - <dd>Власне, {{jsxref("Promise","проміс")}}, який був відхилений, не маючи обробника, який зреагував би на відхилення.</dd> - <dt><code>reason</code></dt> - <dd>Причина, яка була б передана у обробник відхилення, якби він існував. Дивіться більше інформації у {{jsxref("Promise.catch", "catch()")}}.</dd> -</dl> - -<h3 id="Базове_логування_помилки">Базове логування помилки</h3> - -<p>Цей приклад просто логує інформацію щодо необробленого відхилення проміса у консоль.</p> - -<pre class="brush:js;">window.addEventListener("unhandledrejection", event => { - console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`); -}); -</pre> - -<p>Ви також можете скористатись обробником подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}, щоб налаштувати прослуховувач подій:</p> - -<pre class="brush: js">window.onunhandledrejection = event => { - console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`); -}; -</pre> - -<h3 id="Запобігання_обробці_за_замовчуванням">Запобігання обробці за замовчуванням</h3> - -<p>Багато середовищ (таких як {{Glossary("Node.js")}}) за замовчуванням виводять необроблені відхилення промісів у консоль. Ви можете запобігти цьому, додавши обробник для подій <code>unhandledrejection</code>, що — на додачу до будь-яких інших задач, які ви бажаєте виконати — викликає {{domxref("Event.preventDefault()", "preventDefault()")}}, щоб скасувати подію, запобігаючи її спливанню та обробці кодом логування під час виконання. Це працює, тому що <code>unhandledrejection</code> скасовується.</p> - -<pre class="brush:js;">window.addEventListener('unhandledrejection', function (event) { - // ...тут ваш код, який обробляє необроблені відхилення... - - // Запобігти обробці за замовчуванням (наприклад, виводу - // помилки у консоль) - - event.preventDefault(); -}); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.Window.unhandledrejection_event")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li> - <li>Обробник подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}<sup><a href="#seealso-footnote-1">1</a></sup></li> - <li>Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li> - <li>{{jsxref("Promise")}}</li> -</ul> - -<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> Відповідний обробник подій визначений як властивість у домішці {{domxref("WindowEventHandlers")}}, яка доступна як у інтерфейсі {{domxref("Window")}}, так і в усіх типах інтерфейсів {{domxref("Worker")}}.</p> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>The <strong><code>WindowEventHandlers</code></strong> 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.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <code>WindowEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowEventHandlers</code>.</p> -</div> - -<h2 id="Properties">Properties</h2> - -<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p> - -<dl> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onmessageerror")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onrejectionhandled")}}</dt> - <dd>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.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}}</dt> - <dd>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.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface defines no method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'WindowEventHandlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.WindowEventHandlers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li> -</ul> 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 ---- -<div>{{APIRef}}</div> - -<p>Властивість <strong><code>onrejectionhandled</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a>. Ці події виникають, коли відхиляються об'єкти {{jsxref("Promise")}}.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">window.addEventListener("rejectionhandled", function(event) { ... }); -window.onrejectionhandled = function(event) { ...};</pre> - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: js">window.onrejectionhandled = function(e) { - console.log(e.reason); -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.WindowEventHandlers.onrejectionhandled")}}</p> 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 ---- -<div>{{APIRef}}</div> - -<p>Властивість <strong><code>onunhandledrejection</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a>. Ці події виникають для необроблених відхилень об'єктів {{jsxref("Promise")}}.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">window.onunhandledrejection = <em>function</em>;</pre> - -<h3 id="Значення">Значення</h3> - -<p><code>function</code> - це {{domxref("EventHandler")}} або функція, яку треба викликати, коли вікно отримує події <code>unhandledrejection</code>. Обробник подій отримує вхідний параметр як {{domxref("PromiseRejectionEvent")}}.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>Цей приклад просто виводить у консоль значення <code>reason</code> (причина) необроблених відхилень.</p> - -<pre class="brush: js">window.onunhandledrejection = function(e) { - console.log(e.reason); -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - - - -<p>{{Compat("api.WindowEventHandlers.onunhandledrejection")}}</p> 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 ---- -<div>{{ApiRef()}}</div> - -<p>The <strong><code>WindowOrWorkerGlobalScope</code></strong> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p> -</div> - -<h2 id="Properties_2">Properties</h2> - -<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p> - -<div id="Properties"> -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>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.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Returns the origin of the global scope, serialized as a string.</dd> -</dl> -</div> - -<h2 id="Methods">Methods</h2> - -<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>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 <em>(sx, sy)</em> with width sw, and height sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Starts the process of fetching a resource from the network.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>This is where the main mixin is defined.</td> - </tr> - <tr> - <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Definition of the <code>fetch()</code> method.</td> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Definition of the <code>caches</code> property.</td> - </tr> - <tr> - <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td> - <td>{{Spec2('IndexedDB 2')}}</td> - <td>Definition of the <code>indexedDB</code> property.</td> - </tr> - <tr> - <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td> - <td>{{Spec2('Secure Contexts')}}</td> - <td>Definition of the <code>isSecureContext</code> property.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(52)}}</td> - <td>54</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>origin</code></td> - <td>{{CompatGeckoDesktop(54)}}</td> - <td>59</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(52)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>54</td> - </tr> - <tr> - <td><code>origin</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(54)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>59</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}</li> - <li>{{domxref("WorkerGlobalScope")}}</li> -</ul> 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<div> </div> - -<div>Метод <code>setTimeout()</code>, що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout, встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.</div> - -<div> </div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); -<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]); -</pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt><code>func</code></dt> - <dd>{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.</dd> - <dt><code>code</code></dt> - <dd>Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису <strong>не рекомендовано</strong> з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.</dd> - <dt><code>delay</code> {{optional_inline}}</dt> - <dt> </dt> - <dd>Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}</dd> - <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt> - <dd>Додаткові параметри, що передаються до <em>func </em>або <em>code</em>, щойно час таймера спливе.</dd> -</dl> - -<div class="note"> -<p><strong>Зверніть увагу: </strong> Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ <a href="#Callback_arguments">Callback arguments</a>). </p> -</div> - -<h3 id="Значення_що_повертається">Значення, що повертається</h3> - -<p><br> - Після виклику <code>setTimeout()</code>, повертається <code>timeoutID</code> - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.</p> - -<p>Корисно знати, що <code>setTimeout()</code> та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що <code>clearTimeout()</code> та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. </p> - -<h2 id="Приклад">Приклад</h2> - -<p>У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до <code>setTimeout()</code> та <code>clearTimeout()</code> процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у <code>clearTimeout()</code>. За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.</p> - -<h3 id="HTML_код">HTML код</h3> - -<pre class="brush: html"><p>Live Example</p> -<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button> -<p></p> -<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button> -</pre> - -<h3 id="JavaScript_код">JavaScript код</h3> - -<pre class="brush: js">var timeoutID; - -function delayedAlert() { - timeoutID = window.setTimeout(slowAlert, 2000); -} - -function slowAlert() { - alert("Це було дійсно повільно!"); -} - -function clearAlert() { - window.clearTimeout(timeoutID); -} -</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample('Example', 'Приклад')}}</p> - -<p>Дивіться також <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p> - -<h2 id="Поліфіл">Поліфіл</h2> - -<p>Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для <code>setTimeout()</code> чи <code>setInterval()</code> (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: </p> - -<pre class="brush: js">/*\ -|*| -|*| 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'); -}()) -</pre> - -<h2 id="Фікс_для_IE">Фікс для IE</h2> - -<p>Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:</p> - -<pre class="brush: js">/*@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 -@*/ -</pre> - -<p>Або використати умовні коментарі HTML для IE9 та нижче:</p> - -<pre class="brush: html"><!--[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]--> -</pre> - -<h2 id="Тимчасові_рішення">Тимчасові рішення</h2> - -<p>Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:</p> - -<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); -</pre> - -<p>Приклад, наведений вище, може бути також написаний за допомогою <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>:</p> - -<pre class="brush: js">var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000); -</pre> - -<p>Ще одне рішення - використання <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>. Приклад:</p> - -<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000); -</pre> - -<h2 id="Проблема_this">Проблема "<code>this</code>"</h2> - -<p>Коли ви передаєте до <code>setTimeout()</code> метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням <code>this</code>, на яке ви очікуєте. Ця проблема детально описана у <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p> - -<h3 id="Пояснення">Пояснення</h3> - -<p>Код, що виконується всередині <code>setTimeout()</code>, викликається із іншого контекста виконання (<em>execution context</em>), ніж у функції, яка викликала <code>setTimeout</code>. До функції, яку викликають всередині <code>setTimeout</code> застосовуються звичайні правила призначення <code>this</code>. І, якщо ви не встановили <code>this</code> під час виклику або за допомогою <code>bind</code>, його значенням за замовчуванням буде об'єкт <code>global</code> (або <code>window</code>) у нестрогому режимі, або <code>undefined</code> у строгому режимі. Значення <code>this</code> буде іншим, аніж у функції, яка викликала <code>setTimeout</code>. Розгляньте наступний приклад:</p> - -<pre class="brush: js">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"</pre> - -<p>Приклад вище працює тому, що <code>myMethod</code> викликано, як метод масиву <code>myArray</code>. Тому його <code>this</code> дорівнює <code>myArray</code>, а значення <code>this[sProperty]</code> всередині метода дорівнює <code>myArray[sProperty]</code>. Тим не менше, у наступному прикладі:</p> - -<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second -setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre> - -<p>Метод <code>myArray.myMethod</code> передано до <code>setTimeout</code>, як звичайну функцію, якій не задано значення <code>this</code>. І коли вона викликається, її <code>this</code> за замовчуванням дорівнює об'єкту <code>window</code>. У <code>setTimeout</code> неможливо передати <code>this</code> аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання <code>call</code>, як показано у прикладі нижче:</p> - -<pre class="brush: js">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 -</pre> - -<h3 id="Можливі_рішення">Можливі рішення</h3> - -<p>Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює <code>this</code> із необхідним значенням: </p> - -<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds -setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre> - -<p>Стрілочна функція також є прийнятною альтернативою:</p> - -<pre class="brush: js">setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds -setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre> - -<p>Ще одне можливе рішення проблеми <code>this</code> - замінити нативні глобальні функції <code>setTimeout()</code> та <code>setInterval()</code> кастомними функціями, які можуть приймати об'єкт <code>this</code> і застосовувати його у колбек функції, використовуючи <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. Наприклад: </p> - -<pre class="brush: js">// 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); -};</pre> - -<div class="note"><strong>Зверніть увагу: </strong>Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф <a href="#Callback_arguments">Callback arguments</a> .</div> - -<p>Випробування нового підхода:</p> - -<pre class="brush: js">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 -</pre> - -<div class="note"><strong>Зверніть увагу: </strong>JavaScript 1.8.5 впровадив метод <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, який встановлює значення <code>this</code> для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення <code>this</code> колбека.</div> - -<p>Приклад використання <code>bind()</code>:</p> - -<pre class="brush: js">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 -</pre> - -<h2 id="Примітки">Примітки</h2> - -<p>Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте {{domxref("Window.setInterval()")}}.</p> - -<p>Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала <code>setTimeout()</code>. Наприклад. </p> - -<pre class="brush: js">function foo(){ - console.log('foo has been called'); -} -setTimeout(foo, 0); -console.log('After setTimeout');</pre> - -<p>Виведе в консоль:</p> - -<pre class="brush: js">After setTimeout -foo has been called</pre> - -<p>Тому що, навіть не зважаючи на те, що <code>setTimeout</code> було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.</p> - -<h3 id="Passing_string_literals">Passing string literals</h3> - -<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a>. </code></p> - -<pre class="brush: js">// Recommended -window.setTimeout(function() { - alert("Hello World!"); -}, 500); - -// Not recommended -window.setTimeout("alert('Hello World!');", 500); -</pre> - -<p>A string passed to <code>setTimeout</code> is evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p> - -<h3 id="Причини_чому_затримка_є_фактично_довшою_ніж_вказано">Причини чому затримка є фактично довшою ніж вказано</h3> - -<p>There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.</p> - -<h4 id="Nested_timeouts_forced_to_>4ms">Nested timeouts forced to >=4ms</h4> - -<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5.</p> - -<p>In fact, 4 ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> 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.</p> - -<p>To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p> - -<h4 id="Timeouts_in_inactive_tabs_clamped_to_>1000ms">Timeouts in inactive tabs clamped to >=1000ms</h4> - -<p>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.</p> - -<p>Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the <span class="comment-copy"><code>dom.min_background_timeout_value</code> preference).</span> Chrome implements this behavior since version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p> - -<p>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.</p> - -<div class="note"> -<p>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.</p> -</div> - -<h4 id="Late_timeouts">Late timeouts</h4> - -<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks</p> - -<h3 id="Maximum_delay_value">Maximum delay value</h3> - -<p>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.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Initial definition (DOM Level 0)</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - <tr> - <td>Supports parameters for callback<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - <tr> - <td>Supports parameters for callback<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Whether it supports the optional parameters when in its first form or not.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li> - <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li> - <li>{{domxref("WindowTimers.setInterval")}}</li> - <li>{{domxref("window.requestAnimationFrame")}}</li> - <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li> -</ul> 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 ---- -<div>{{APIRef("XMLHttpRequest")}}</div> - -<div></div> - -<p>Об'єкти <span class="seoSummary"><code>XMLHttpRequest</code> використовуються для взаємодії з серверами. Ти можеш отримати дані за URL без повної перезагрузки сторінки. Це дозволяє веб-сторінці оновити частину вмісту, не перешкоджаючи роботі користувача</span> <code>XMLHttpRequest</code> часто використовуюється в програмуванні з використанням технології <a href="/en-US/docs/AJAX">Ajax</a>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h5 id="Історія">Історія</h5> - -<p><code>XMLHttpRequest</code> був спочатку розроблений компанією Microsoft десь у 1999 році і пізніше прийнятий компаніями Mozilla, Apple та Google. З жовтня 2014 року він був <a class="external" href="https://xhr.spec.whatwg.org/">стандартизований в <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>, разом з новим методом {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} на основі промісів.</p> - -<p>Не зважаючи на своє ім'я, <code>XMLHttpRequest</code> може використовуватись для отримання будь-якого типу даних, не лише XML, і підтримує інші протоколи окрім <a href="/en-US/docs/Web/HTTP">HTTP</a> (включаючи <code>file</code> і <code>ftp</code>).</p> - -<h2 id="Конструктор">Конструктор</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> - <dd>Конструктор ініціалізує об'єкт XMLHttpRequest. Він має бути викликаний перед використанням будь-яких з його методів.</dd> -</dl> - -<h2 id="Властивості">Властивості</h2> - -<p><em>Успадковує властивості {{domxref("XMLHttpRequestEventTarget")}} і {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> - <dd>{{domxref("EventHandler")}} викликається щоразу, коли атрибут <code>readyState</code> змінюється.</dd> - <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> - <dd>Повертає <code>unsigned short</code>, the state запиту.</dd> - <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> - <dd>Повертає {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, об'єкт JavaScript, або ж {{domxref("DOMString")}}, залежить від значення {{domxref("XMLHttpRequest.responseType")}}, що містить тіло відповіді.</dd> - <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> - <dd>Повертає {{domxref("DOMString")}}, що містить відповідь на запит в якості тексту, або <code>null</code>, якщо запит завершився помилкою або не був надісланим досі.</dd> - <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> - <dd>Вказує на тип відповіді.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> - <dd>Повертає the serialized URL відповіді або ж пустий рядок, якщо URL — <code>null</code>.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> - <dd>Повертає {{domxref("Document")}}, що містить відповідь на запит або <code>null</code>, якщо запит завершився помилкою, досі не був надісланий, або не може бути розпізнаний, як XML чи HTML. Not available in workers.</dd> - <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> - <dd>Повертає <code>unsigned short</code> з статусом відповіді на запит.</dd> - <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> - <dd>Повертає {{domxref("DOMString")}}, що містить стрічку відповіді, повернену HTTP-сервером. Навідміну від {{domxref("XMLHTTPRequest.status")}}, що включає цілісний текст відповіді (наприклад, "<code>200 OK</code>").</dd> -</dl> - -<div class="note"> -<p><strong>Увага:</strong> починаючи від специфікації HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4 Поля пседо-заголовку відповіді</a>), HTTP/2 не визначає шляху передачі версії чи reason phrase, що включається в стрічку статусу HTTP/1.1.</p> -</div> - -<dl> - <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> - <dd>Має тип <code>unsigned long</code>. Являє собою час у мілісекундах, відведений на запит перед тим, як буде автоматично перерваний.</dd> - <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> - <dd>{{domxref("EventHandler")}}, що викликається щоразу після спливання часу, відведенного на запит. {{gecko_minversion_inline("12.0")}}</dd> - <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> - <dd>{{domxref("XMLHttpRequestUpload")}}, що являє собою процес завантаження.</dd> - <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> - <dd>{{domxref("Boolean")}}, що вказує, чи слід робити запити <code>Access-Control</code> використовуючи такі облікові дані, як файли cookie або заголовки авторизації.</dd> -</dl> - -<h3 id="Нестандартні_властивості">Нестандартні властивості</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> - <dd>{{Interface("nsIChannel")}}. Канал, що використовується об'єктом коли виконується запит.</dd> - <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> - <dd>Логічна змінна. Якщо її значення — істина, запит буде надісланий без кукі та заголовків аутентифікації.</dd> - <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> - <dd>Логічна змінна. Якщо її значення — істина, оригінальна політика не буде застосована до запиту.</dd> - <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> - <dd>Логічна змінна. Вказує чи представляє об'єкт сервіс фонового запиту.</dd> - <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> - <dd>Є <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. Відповідь на запит у вигляді масиву JavaScript.</dd> - <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> - <dd><strong>Це особливість Gecko, логічна змінна, що була видалена з Firefox/Gecko 22.</strong> Будь ласка, використовуйте натомість <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, або <code>responseText</code>.</dd> -</dl> - -<h3 id="Обробники_подій">Обробники подій</h3> - -<p><code>onreadystatechange</code> підримується у всіх браузерах, як властивість <code>XMLHttpRequest</code>.</p> - -<p>З тих пір у різних браузерах було впроваджено ряд додаткових обробників подій (<code>onload</code>, <code>onerror</code>, <code>onprogress</code> тощо). Вони підтримуються у Firefox. Зокрема, дивіться <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> та <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> - -<p>Більш нові браузери, включаючи Firefox, також підтримують прослуховування подій <code>XMLHttpRequest</code> починаючи від стандарту API <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> в розширені на встановлення властивостей функцій обробника <code>on*</code>.</p> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> - <dd>Aborts the request if it has already been sent.</dd> - <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> - <dd>Returns all the response headers, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, as a string, or <code>null</code> if no response has been received.</dd> - <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> - <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd> - <dt>{{domxref("XMLHttpRequest.open()")}}</dt> - <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd> - <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> - <dd>Overrides the MIME type returned by the server.</dd> - <dt>{{domxref("XMLHttpRequest.send()")}}</dt> - <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd> - <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> - <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd> -</dl> - -<h3 id="Non-standard_methods">Non-standard methods</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.init()")}}</dt> - <dd>Initializes the object for use from C++ code.</dd> -</dl> - -<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div> - -<dl> - <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> - <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd> - <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> - <dd>A variant of the <code>send()</code> method that sends binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>Live standard, latest version</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<div>{{Compat("api.XMLHttpRequest")}}</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>MDN tutorials covering XMLHttpRequest: - <ul> - <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li> - </ul> - </li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> - <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM - <ul> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li> - </ul> - </li> -</ul> diff --git a/files/uk/web/css/-moz-orient/index.html b/files/uk/web/css/-moz-orient/index.html deleted file mode 100644 index 851b26e69b..0000000000 --- a/files/uk/web/css/-moz-orient/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: '-moz-orient' -slug: Web/CSS/-moz-orient -translation_of: Web/CSS/-moz-orient ---- -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><code>-moz-orient</code> <a href="/en-US/docs/Web/CSS">CSS</a> властивість, що задає орієнтацію обраного елемента.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -{{csssyntax}} - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>inline</code></dt> - <dd>The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.</dd> - <dt><code>block</code></dt> - <dd>The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.</dd> - <dt><code>horizontal</code></dt> - <dd>The element is rendered horizontally.</dd> - <dt><code>vertical</code></dt> - <dd>The element is rendered vertically.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> - The following progress meter - is horizontal (the default): -</p> -<progress max="100" value="75"></progress> - -<p> - The following progress meter - is vertical: -</p> -<progress class="vert" max="100" value="75"></progress></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.vert { - -moz-orient: vertical; - width: 16px; - height: 150px; -}</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample("Examples","200","360")}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<p>Though <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">submitted</a> to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, <code>-moz-orient</code>).</p> - -<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>auto</code> value</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("21.0")}}<sup>[2]</sup><br> - {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>inline</code> and <code>block</code> values</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>auto</code> value</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("21.0")}}<sup>[2]</sup><br> - {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>inline</code> and <code>block</code> values</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In Gecko 6.0 {{geckoRelease("6.0")}}, there was a bug that causes vertical {{HTMLElement("progress")}} elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 {{geckoRelease("7.0")}}.</p> - -<p>[2] The <code>auto</code> value was equivalent to <code>horizontal</code>.</p> - -<h2 id="Дивитися_також">Дивитися також</h2> - -<ul> - <li>{{cssxref("box-orient")}}</li> -</ul> diff --git a/files/uk/web/css/@font-face/font-display/index.html b/files/uk/web/css/@font-face/font-display/index.html deleted file mode 100644 index 736f517126..0000000000 --- a/files/uk/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: font-display -slug: Web/CSS/@font-face/font-display -translation_of: Web/CSS/@font-face/font-display ---- -<div>{{CSSRef}}</div> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Властивість </span></font>font-display</code> визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.</p> - -<h2 id="Хронологія_відображення_шрифта">Хронологія відображення шрифта</h2> - -<p>Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.</p> - -<dl> - <dt>Блокування шрифту(block)</dt> - <dd>Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(<em>invisible</em>). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> - <dt>Заміна шрифту(swap)</dt> - <dd>Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> - <dt>Невдача(failure)</dt> - <dd>Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.</dd> -</dl> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: css;">/* Keyword values */ -font-display: auto; -font-display: block; -font-display: swap; -font-display: fallback; -font-display: optional;</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Відображення шрифту виконуєтся автоматично клієнтом.</dd> - <dt><code>block</code></dt> - <dd>Надає елементам короткий період блокування і нескінченний swap період.</dd> - <dt><code>swap</code></dt> - <dd>Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.</dd> - <dt><code>fallback</code></dt> - <dd>Надає надзвичайно малий період блокування і малий період підміни шрифту.</dd> - <dt><code>optional</code></dt> - <dd>Надає надзвичайно малий період блокування без підміни шрифту.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: css; highlight[7]">@font-face { - font-family: ExampleFont; - src: url(/path/to/fonts/examplefont.woff) format('woff'), - url(/path/to/fonts/examplefont.eot) format('eot'); - font-weight: 400; - font-style: normal; - font-display: fallback; -}</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - - - -<p>{{Compat("css.at-rules.font-face.font-display")}}</p> diff --git a/files/uk/web/css/@font-face/index.html b/files/uk/web/css/@font-face/index.html deleted file mode 100644 index 0a7217c851..0000000000 --- a/files/uk/web/css/@font-face/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -tags: - - '@-правила' - - '@font-face' - - CSS - - CSS Шрифти - - Посилання - - типографія - - шрифти -translation_of: Web/CSS/@font-face ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція </span><code>local()</code> вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції <code>url()</code> будуть завантажені і використані</p> - -<p>Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.</p> - -<p>Поширеним випадком є використання <code>url()</code> і <code>local()</code> разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.</p> - -<p><code>@font-face</code> @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">@-правила</a>.</p> - -<pre class="brush: css no-line-numbers">@font-face { - font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -}</pre> - -<h2 id="Синтаксис">Синтаксис</h2> - -<h3 id="Опис">Опис</h3> - -<dl> - <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> - <dd>Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.</dd> - <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> - <dd>Задає ім'я, що буде використовуватися для задання властивостей шрифта.</dd> - <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> - <dd>Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів) {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-stretch: 50% 200%;</code></dd> - <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> - <dd>Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-style: oblique 20deg 50deg;</code></dd> - <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> - <dd>Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-weight: 100 400;</code></dd> - <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> - <dd>Значення {{cssxref("font-variant")}}.</dd> - <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> - <dd>Дозволяє контролювати інші розширені можлифості OpenType шрифтів.</dd> - <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> - <dd>Дозволяє здійснювати низькорівневий контроль над варіаціями шрифтів OpenType чи TrueType, вказуючи назви осей з чотирьох букв для зміни разом з їх значеннями.</dd> - <dt>{{cssxref("@font-face/src", "src")}}</dt> - <dd> - <p>Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.</p> - - <p>Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції <code>format()</code>:</p> - - <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, - url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> - - <p>Достіпні типи: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, і <code>"svg"</code>.</p> - </dd> - <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> - <dd>Діапазон Unicode кодів, що буде використовуватись в шрифті.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<p>Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:</p> - -<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Дивитися live приклад</a></p> - -<pre class="brush: html"><html> -<head> - <title>Web Font Sample</title> - <style type="text/css" media="screen, print"> - @font-face { - font-family: "Bitstream Vera Serif Bold"; - src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); - } - - body { font-family: "Bitstream Vera Serif Bold", serif } - </style> -</head> -<body> - This is Bitstream Vera Serif Bold. -</body> -</html> -</pre> - -<p>В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":</p> - -<pre class="brush: css">@font-face { - font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); - font-weight: bold; -} -</pre> - -<h2 id="MIME-типи_шрифтів">MIME-типи шрифтів</h2> - -<table> - <thead> - <tr> - <th>Формат</th> - <th>MIME-тип</th> - </tr> - </thead> - <tbody> - <tr> - <td>TrueType</td> - <td><code>font/ttf</code></td> - </tr> - <tr> - <td>OpenType</td> - <td><code>font/otf</code></td> - </tr> - <tr> - <td>Web Open File Format</td> - <td><code>font/woff</code></td> - </tr> - <tr> - <td>Web Open File Format 2</td> - <td><code>font/woff2</code></td> - </tr> - </tbody> -</table> - -<h2 id="Нотатки">Нотатки</h2> - -<ul> - <li>Веб шрифти підлягають одному і тому ж обмеженню доменів (файли шрифтів повинні знаходитись на тому ж домен, що і сторінка на яких вони використовуться) , <a href="/en-US/docs/HTTP_access_control">HTTP контроль доступу</a> використовується для полегшення цього обмеження.</li> - <li><code>@font-face</code> не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме: - <pre class="brush: css; example-bad">.className { - @font-face { - font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); - font-weight: bold; - } -}</pre> - </li> -</ul> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td> - <td>{{Spec2('WOFF2.0')}}</td> - <td>Специфікація фомату шрифта з новим алгоритмом стиснення</td> - </tr> - <tr> - <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> - <td>{{Spec2('WOFF1.0')}}</td> - <td>Специфікація формата шрифта</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів </h2> - -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("css.at-rules.font-face")}}</p> - -<h2 id="Прогляньте_також">Прогляньте також</h2> - -<ul> - <li><a href="/en-US/docs/WOFF"> Про WOFF</a></li> - <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li> - <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Гарні шрифти @font-face</a></li> - <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> - <li><a class="external" href="http://caniuse.com/woff">Коли я можу використовувати WOFF?</a></li> - <li><a class="external" href="http://caniuse.com/svg-fonts">Коли я можу використовувати SVG Fonts?</a></li> - <li><a href="https://coolfont.org">Безкоштовні круті шрифти</a></li> -</ul> diff --git a/files/uk/web/css/@page/bleed/index.html b/files/uk/web/css/@page/bleed/index.html deleted file mode 100644 index 3f7ef352e1..0000000000 --- a/files/uk/web/css/@page/bleed/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: bleed -slug: Web/CSS/@page/bleed -tags: - - '@сторінка' - - CSS - - Web -translation_of: Web/CSS/@page/bleed ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>bleed </strong>це пропускний дескриптор правил css</span></font>, використовується з {{cssxref("@page")}} за правилом , визначає ступінь області пропуску сторінки за межами сторінки. Ця властивість має тільки ефект якщо позначки обрізання увімкнено за допомогою властивості {{cssxref("@page/marks", "marks")}} property.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css notranslate">/* Keyword values */ -bleed: auto; - -/* <length> values */ -bleed: 8pt; -bleed: 1cm; -</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Обчислюється до 6pt якщо значення в {{cssxref("@page/marks", "marks")}} є обрізаним. В іншому випадку він обчислюється до нуля.</dd> - <dt><code>{{cssxref("<довжина>")}}</code></dt> - <dd><br> - Вказує, наскільки назовні, в кожному напрямку, область випуску простягається поза полем сторінки. Значення можуть бути від’ємними, але можуть бути певні обмеження щодо реалізації.</dd> -</dl> - -<h2 id="Формальне_визначення">Формальне визначення</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Формальний_синтаксис">Формальний синтаксис</h2> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Встановлення_кровоточення_сторінки_в_1см.">Встановлення кровоточення сторінки в 1см.</h3> - -<pre class="brush: css notranslate">@page { - bleed: 1cm; -} -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Стан</th> - <th scope="col">Коментарі</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td> - <td>{{Spec2("CSS3 Paged Media")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сувмістність_з_браузерами">Сувмістність з браузерами</h2> - -<div class="hidden"> Таблиця сувмістності на цій сторінці on згенерована зі структорованих даних . Якщо ви хочете зробити свій внесок інформації</div> - -<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит на висвітлення.</div> - -<p>{{Compat("css.at-rules.page.bleed")}}</p> - -<h2 id="Зазвичай_переглядають">Зазвичай переглядають</h2> - -<ul> - <li>{{cssxref("@page/marks", "marks")}}</li> - <li>{{cssxref("@page/size", "size")}}</li> -</ul> diff --git a/files/uk/web/css/@page/index.html b/files/uk/web/css/@page/index.html deleted file mode 100644 index 99089c653c..0000000000 --- a/files/uk/web/css/@page/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: '@page' -slug: Web/CSS/@page -tags: - - '@page' - - At-rule - - CSS - - Layout - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/CSS/@page ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>@page</code></strong> CSS at-rule is used to modify some CSS properties when printing a document.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers notranslate">@page { - margin: 1cm; -} - -@page :first { - margin: 2cm; -}</pre> - -<h3 id="Descriptors">Descriptors</h3> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt> - <dd>Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt> - <dd>Adds crop and/or registration marks to the document.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> - <dd>Specifies the extent beyond the page box at which the page rendering is clipped.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>You can't change all CSS properties with <code>@page</code>. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.</p> - -<p>The <code>@page</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.</p> - -<div class="note"><strong>Note:</strong> The W3C is discussing how to handle viewport-related {{cssxref("<length>")}} units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Meanwhile do not use them within a <code>@page</code> at-rule.</div> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="page_pseudo-class_examples">@page pseudo-class examples</h3> - -<p>Please refer to the various <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> of <code>@page</code> for examples.</p> - -<ul> - <li>{{Cssxref(":blank")}}</li> - <li>{{Cssxref(":first")}}</li> - <li>{{Cssxref(":left")}}</li> - <li>{{Cssxref(":right")}}</li> - <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> - <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>Adds the <code>:recto</code> and <code>:verso</code> page selectors</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.page")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>See the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)</li> -</ul> diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html deleted file mode 100644 index aa90d1e19b..0000000000 --- a/files/uk/web/css/_colon_active/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -tags: - - CSS - - Веб - - Довідка - - Макет - - Псевдоклас -translation_of: 'Web/CSS/:active' ---- -<div>{{CSSRef}}</div> - -<p><a href="/en-US/docs/Web/CSS">CSS псевдо-клас</a> <strong><code>:active</code></strong> відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.</p> - -<pre class="brush: css no-line-numbers">/* Вибирає будь-який <a>, що активується */ -a:active { - color: red; -}</pre> - -<p>Псевдоклас <code>:active</code> частіш за все використовується на елементах {{HTMLElement("a")}} і {{HTMLElement("button")}}. Інші поширені варіанти застосування цього селектору включають елементи, що <em>містять</em> активований елемент, а також елементи форм, які активуються через асоційований із ними {{HTMLElement("label")}}.</p> - -<p>Стилі, задані псевдокласом <code>:active</code> будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом ({{cssxref(":link")}}, {{cssxref(":hover")}}, чи {{cssxref(":visited")}}), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила <code>:active</code> після всіх інших споріднених із посиланнями правил, як визначено порядком <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"><strong>Зауважте, що:</strong> на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас <code>:active</code> повинен застосовуватись лише для основної кнопки; у випадку правосторонньої миші це зазвичай крайня ліва кнопка.</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Активні_посилання">Активні посилання</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p>Цей абзац містить посилання: - <a href="#">Це посилання буде забарвлено у червоний при натисканні на нього.</a> - Цей абзац отримає сірий фон при натисканні на посилання. -</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">a:link { color: blue; } /* Невідвідані посилання */ -a:visited { color: purple; } /* Відвідані посилання */ -a:hover { background: yellow; } /* Посилання із наведеним курсором */ -a:active { color: red; } /* Активні посилання */ - -p:active { background: #eee; } /* Активні абзаци */</pre> - -<h4 id="Результат">Результат</h4> - -<p>{{EmbedLiveSample('Активні_посилання')}}</p> - -<h3 id="Активні_елементи_форм">Активні елементи форм</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><form> - <label for="my-button">Моя кнопка: </label> - <button id="my-button" type="button">Спробуйте натиснути на мене чи на мою мітку!</button> -</form></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">form :active { - color: red; -} - -form button { - background: white; -}</pre> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample('Активні_елементи_форм')}}</p> - -<h2 id="Специфікації"><span>Специфікації</span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Примітка</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Без змін.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Без змін.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Без змін.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Первинне визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> - -<div> -<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> - -<p>{{Compat("css.selectors.active")}}</p> -</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>Споріднені з посиланнями псевдокласи: {{cssxref(":link")}}, {{cssxref(":visited")}}, та {{cssxref(":hover")}}</li> -</ul> diff --git a/files/uk/web/css/_colon_root/index.html b/files/uk/web/css/_colon_root/index.html deleted file mode 100644 index 94153aa29d..0000000000 --- a/files/uk/web/css/_colon_root/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - Псевдо-клас -translation_of: 'Web/CSS/:root' ---- -<div>{{CSSRef}}</div> - -<h2 id="Опис">Опис</h2> - -<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-клас</a> <code>:root</code> вказує на кореневий елемент дерева документа. Якщо застосувати його до HTML, <code>:root</code> відображає {{HTMLElement("html")}} і є ідентичним селектору <code>html</code>, та не зважаючи на це, його <a href="/en-US/docs/Web/CSS/Specificity">вага</a> є більшою.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -{{csssyntax}} - -<h2 id="Приклад">Приклад</h2> - -<p>Використання <code>:root</code> може бути корисним при декларуванні глобальних <a href="/en-US/docs/Web/CSS/Using_CSS_variables">змінних CSS</a></p> - -<pre class="brush: css">:root { - --main-color: hotpink; - --pane-padding: 5px 42px; -} -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Стан</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Селектори', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Без змін</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Селектори', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Підтримка</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова</td> - <td>1</td> - <td>{{CompatGeckoDesktop("1.7")}}</td> - <td>9</td> - <td>9.5</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Підтримка</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/uk/web/css/_doublecolon_before/index.html b/files/uk/web/css/_doublecolon_before/index.html deleted file mode 100644 index 675b0c375d..0000000000 --- a/files/uk/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: '::before (:before)' -slug: 'Web/CSS/::before' -tags: - - CSS - - Web - - Псевдо-елемент - - Розмытка -translation_of: 'Web/CSS/::before' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> створює <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елемент</a>, що є першим дочірнім елементом вибраного елемента. Це часто використовується для косметичного вмісту елемента з властивістю {{cssxref("content")}}.</span> Він за замовчуванням лінійний</p> - -<pre class="brush: css"><code class="language-css"><span class="comment token">/* Додає серце перед посиланнями */</span> -<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{ -</span> <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span> -<span class="punctuation token">}</span></code></pre> - -<div class="note"> -<p><strong>Нотатка:</strong> Псевдо-елемент згенерований за допомогою <code>::before</code> і<code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">міститься в вікні форматування об'єкта</a>, і таким чином не приймає <em><a href="/en-US/docs/Web/CSS/Replaced_element">замінювані елементи</a> як </em> {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -{{csssyntax}} - -<div class="note"> -<p><strong>Нотатка:</strong> CSS3 представляє позначення <code>::before</code> (з двома двокрапками) щоб розрізняти <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класи</a> і <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елементи</a>. Браузер також приймає <code>:before</code>, представлений в CSS2.</p> -</div> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Додавання_лапок">Додавання лапок</h3> - -<p>Простий приклад використання псевдо-елемента <code>::before</code> додає лапки. Тут ми використовуємо і <code>::before</code> і <code>{{Cssxref("::after")}}</code> замість символів лапок.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html"><q>Деякі цитати,</q> сказав він, <q> кращі за інші.</q></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush:css">q::before { - content: "«"; - color: blue; -} - -q::after { - content: "»"; - color: red; -}</pre> - -<h4 id="Результат">Результат</h4> - -<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p> - -<h3 id="Декоративний_приклад">Декоративний приклад</h3> - -<p>Ми можемо стилізувати текст чи зображення у властивості {{cssxref("content")}} майже як завгодно.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><span class="ribbon">Зверніть увагу де помаранчевий блок</span></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.ribbon { - background-color: #5BC8F7; -} - -.ribbon::before { - content: "Подивіться на цей помаранчевий блок."; - background-color: #FFBA10; - border-color: black; - border-style: dotted; -}</pre> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p> - -<h3 id="Список_завдань">Список завдань</h3> - -<p>В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до UI щоб покращити user experience.</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><ul> - <li>Купити молоко</li> - <li>Вигуляти собаку</li> - <li>Вправи</li> - <li>Писати код</li> - <li>Грати музику</li> - <li>Відпочити</li> -</ul> -</pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">li { - list-style-type: none; - position: relative; - margin: 2px; - padding: 0.5em 0.5em 0.5em 2em; - background: lightgrey; - font-family: sans-serif; -} - -li.done { - background: #CCFF99; -} - -li.done::before { - content: ''; - position: absolute; - border-color: #009933; - border-style: solid; - border-width: 0 0.3em 0.25em 0; - height: 1em; - top: 1.3em; - left: 0.6em; - margin-top: -1em; - transform: rotate(45deg); - width: 0.5em; -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var list = document.querySelector('ul'); -list.addEventListener('click', function(ev) { - if (ev.target.tagName === 'LI') { - ev.target.classList.toggle('done'); - } -}, false); -</pre> - -<p>Вище - код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент <code>::before</code> які стилізовані за допомогою CSS.</p> - -<h4 id="Результат_3">Результат</h4> - -<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p> - -<h2 id="Нотатки">Нотатки</h2> - -<p>Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">специфікації CSS</a> "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для не табличних розміток. (наприклад, щоб досягти центрування) в випадку доки вміст, що має центруватись поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати <div/> перед і після). (І завжди пам'ятайте додавати ширину до float об'єкта, інакше він не буде обтікати!)</p> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html"><div class="example"> -<span id="floatme">"Floated Before" має згенеруватись ліворуч від -вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно -"Floated After" має з'являтись праворуч</span> -</div></pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css">#floatme { float: left; width: 50%; } - -/* Щоб отримати пусту колонку просто позначте в hex коді - нерозривний пробіл: \a0 у якості контенту -(Використовуйте \0000a0 коли іде після такого символа як пробіл ) -*/ -.example::before { - content: "Floated Before"; - float: left; - width: 25%; -} -.example::after { - content: "Floated After"; - float: right; - width: 25%; -} - -/* For styling */ -.example::before, .example::after { - background: yellow; - color: red; -}</pre> - -<h4 id="Результат_4">Результат</h4> - -<p>{{EmbedLiveSample("Notes")}}</p> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> - <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> - <td>No significant changes to the previous specification.</td> - </tr> - <tr> - <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> - <td>{{Spec2("CSS3 Transitions")}}</td> - <td>Allows transitions on properties defined on pseudo-elements.</td> - </tr> - <tr> - <td>{{Specname("CSS3 Animations", "", "")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td>Allows animations on properties defined on pseudo-elements.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Introduces the two-colon syntax.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Initial definition, using the one-colon syntax</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> - -<div> -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("css.selectors.before")}}</p> -</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{Cssxref("::after")}}</li> - <li>{{Cssxref("content")}}</li> -</ul> diff --git a/files/uk/web/css/_doublecolon_slotted/index.html b/files/uk/web/css/_doublecolon_slotted/index.html deleted file mode 100644 index a363141b7c..0000000000 --- a/files/uk/web/css/_doublecolon_slotted/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: '::slotted()' -slug: 'Web/CSS/::slotted' -translation_of: 'Web/CSS/::slotted' ---- -<div>{{ CSSRef }}</div> - -<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-елемент </a><code><strong>::slotted()</strong></code> являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Використання шаблонів і слотів</a>).</p> - -<p>Це працює тільки при використанні всередині CSS, поміщеного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">тіньовий DOM</a>. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.</p> - -<pre class="brush: css no-line-numbers">/* Вибір будь-якого елемента, поміщеного в слот */ -::slotted(*) { - font-weight: bold; -} - -/* Вибір будь-якого <span> елемента, поміщеного в слот */ -::slotted(span) { - font-weight: bold; -} -</pre> - -<h2 id="Синтакс">Синтакс</h2> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<p>Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">:slotted</a> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">див. демо</a>).</p> - -<p>У цьому демо ми використовуємо простий шаблон з трьома слотами:</p> - -<pre class="brush: html"><template id="person-template"> - <div> - <h2>Personal ID Card</h2> - <slot name="person-name">NAME MISSING</slot> - <ul> - <li><slot name="person-age">AGE MISSING</slot></li> - <li><slot name="person-occupation">OCCUPATION MISSING</slot></li> - </ul> - </div> -</template></pre> - -<p>Кастомний веб-компонент— <code><person-details></code> — визначений, як:</p> - -<pre class="brush: js">customElements.define('person-details', - class extends HTMLElement { - constructor() { - super(); - let template = document.getElementById('person-template'); - let templateContent = template.content; - - const shadowRoot = this.attachShadow({mode: 'open'}); - - let style = document.createElement('style'); - style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + - 'h2 { margin: 0 0 10px; }' + - 'ul { margin: 0; }' + - 'p { margin: 10px 0; }' + - '::slotted(*) { color: gray; font-family: sans-serif; } '; - - shadowRoot.appendChild(style); - shadowRoot.appendChild(templateContent.cloneNode(true)); - } -})</pre> - -<p>Ви побачите, що при заповненні елемента <code>стилю</code> певними значеннями, ми вибираємо всі слотовані елементи (<code>::slotted(*)</code>) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені. </p> - -<p>Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *. Для прикладу - селектор, який застосує стилі лише для <code>div</code> елементів, матиме наступний вигляд (<code>::slotted(div)</code>). Більше інформації про стилізацію <code>slot</code> елементів та розробку кастомних веб компонентів, ви можете знайти на <a href="https://github.com/Halochkin/Components/blob/master/Articles/CSS/How%20to%20style%20slot.childNodes%3F.md">моєму github</a>.</p> - -<p>При вставці на сторінку елемент виглядає наступним чином:</p> - -<p><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details></p> - -<h2 id="Cпецифікації">Cпецифікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}</td> - <td>{{ Spec2('CSS Scope') }}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерами</h2> - - - -<p>{{Compat("css.selectors.slotted")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/en-US/docs/Web/Web_Components">Веб компоненти</a></li> -</ul> diff --git a/files/uk/web/css/alternative_style_sheets/index.html b/files/uk/web/css/alternative_style_sheets/index.html deleted file mode 100644 index f805d1d125..0000000000 --- a/files/uk/web/css/alternative_style_sheets/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Альтернативні таблиці стилів -slug: Web/CSS/Alternative_style_sheets -tags: - - Стилі - - Теми -translation_of: Web/CSS/Alternative_style_sheets -original_slug: Web/CSS/Альтернативні_таблиці_стилів ---- -<p>Specifying <strong>alternative style sheets</strong> in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.</p> - -<p>Firefox lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.</p> - -<h2 id="An_example_specifying_the_alternative_stylesheets">An example: specifying the alternative stylesheets</h2> - -<p>The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with <code>rel="stylesheet alternate"</code> and <code>title="..."</code> attributes, for example:</p> - -<pre class="eval"><link href="reset.css" rel="stylesheet" type="text/css"> - -<link href="default.css" rel="stylesheet" type="text/css" title="Default Style"> -<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> -<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"> -</pre> - -<p>In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.</p> - -<p>No matter what style is selected, the rules from the reset.css stylesheet will always be applied.</p> - -<h3 id="Try_it_out">Try it out</h3> - -<p><a href="/samples/cssref/altstyles/index.html">Click here</a> for a working example you can try out.</p> - -<h2 id="Details">Details</h2> - -<p>Any stylesheet in a document falls into one of the following categories:</p> - -<ul> - <li><strong>Persistent</strong> (no <code>rel="alternate"</code>, no <code>title=""</code>): always applies to the document.</li> - <li><strong>Preferred</strong> (no <code>rel="alternate"</code>, with <code>title="..."</code> specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. <strong>There can only be one preferred stylesheet</strong>, so providing stylesheets with different title attributes will cause some of them to be ignored. See <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">Correctly Using Titles With External Stylesheets</a> for a more detailed discussion.</li> - <li><strong>Alternate</strong> (<code>rel="stylesheet alternate"</code>, <code>title="..."</code> must be specified): disabled by default, can be selected.</li> -</ul> - -<p>When style sheets are referenced with a <code>title</code> attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same <code>title</code> are part of the same choice. Style sheets linked without a <code>title</code> attribute are always applied.</p> - -<p>Use <code>rel="stylesheet"</code> to link to the default style, and <code>rel="alternate stylesheet"</code> to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>The CSS OM specification defines the concepts of the <strong>style sheet set name</strong>, its <strong>disabled flag</strong>, and the <strong>preferred CSS style sheet set name</strong>.<br> - It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to <strong><dfn>create a CSS style sheet</dfn></strong>.</td> - </tr> - <tr> - <td> - <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br> - {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br> - {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p> - </td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The HTML specification defines when and how the <strong><dfn>create a CSS style sheet</dfn></strong><dfn> algorithm is invoked while handling <link> and <style> elements, and also defines the behavior of <code><meta </code></dfn><code>http-equiv="default-style"></code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td> - <td>{{Spec2("HTML4.01")}}</td> - <td>Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.</td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/uk/web/css/animation-name/index.html b/files/uk/web/css/animation-name/index.html deleted file mode 100644 index c600b3ecd1..0000000000 --- a/files/uk/web/css/animation-name/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: animation-name -slug: Web/CSS/animation-name -translation_of: Web/CSS/animation-name ---- -<div>{{CSSRef}}</div> - -<div><strong><code>Animation-name </code></strong><code>- це</code> властивість <a href="/en-US/docs/CSS" title="CSS">CSS</a>, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на {{cssxref("@keyframes")}} правило, яке визначає значення властивостей для анімаційного ряду.</div> - -<div> </div> - -<pre class="brush:css no-line-numbers">/* Single animation */ -animation-name: none; -animation-name: test_05; -animation-name: -specific; -animation-name: sliding-vertically; - -/* Multiple animations */ -animation-name: test1, animation4; -animation-name: none, -moz-specific, sliding; - -/* Global values */ -animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a> -animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a> -animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a></pre> - -<p>Часто, буде зручно користуватися коротким варіантом {{cssxref("animation")}} для встановлення усіх властивостей анімації за один раз.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.</dd> - <dt>{{cssxref("<custom-ident>")}}</dt> - <dd>Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер <code>a<font face="Open Sans, arial, x-locale-body, sans-serif">-</font></code><code>z (без врахування регістру літер)</code>, цифр <code>0-</code><code>9</code>, підкреслення (<code>_</code>), і/або дефісу (<code>-</code>). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>.</dd> -</dl> - -<div class="note"> -<p><strong>Note</strong>: When you specify multiple comma-separated values on an <code>animation-*</code> property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a> for examples.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatChrome(43.0)}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> - <td>10 </td> - <td>12 {{property_prefix("-o")}}<br> - 12.10</td> - <td>4.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code>- prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> - <li>JavaScript {{domxref("AnimationEvent")}} API</li> -</ul> diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html deleted file mode 100644 index 85afa37991..0000000000 --- a/files/uk/web/css/attr()/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -tags: - - CSS - - CSS функція - - Web - - attr - - Макет -translation_of: Web/CSS/attr() ---- -<div>{{CSSRef}}</div> - -<div></div> - -<div></div> - -<div class="blockIndicator note"><strong>Примітка:</strong> Функція <code>attr()</code> може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж {{CSSxRef("content")}} є експериментальною, і підтримка для параметру type-or-unit обмежена.</div> - -<div></div> - -<p>Функція <strong><code>attr()</code></strong> в <a href="/en-US/docs/Web/CSS">CSS</a> використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Просте застосування */ -attr(data-count); -attr(title); - -/* З параметром type */ -attr(src url); -attr(data-count number); -attr(data-width px); - -/* З параметром fallback */ -attr(data-count number, 0); -attr(src url, ""); -attr(data-width px, inherit); -attr(data-something, "default"); - -</pre> - -<h2 id="Синтаксис">Синтаксис</h2> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>attribute-name</code></dt> - <dd>Це ім'я атрибута елемента HTML, на який функція посилається у CSS.</dd> - <dt><code style="white-space: nowrap;"><type-or-unit></code> {{Experimental_Inline}}</dt> - <dd>Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання <type-or-unit> як значення для даного атрибуту недійсне, вираз з attr() також буде недійсним. Якщо пропущено, за замовчуванням використовується string. Список дійсних значень: - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Ключове слово</th> - <th scope="col">Асоційований тип</th> - <th scope="col">Коментар</th> - <th scope="col">Значення за замовчуванням</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>string</code></td> - <td style="white-space: nowrap;">{{CSSxRef("<string>")}}</td> - <td>Значення атрибута трактується як CSS {{CSSxRef("<string>")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.</td> - <td>Пустий рядок.</td> - </tr> - <tr> - <td><code>color</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<color>")}}</td> - <td>Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("<string>")}}.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>currentColor</code></td> - </tr> - <tr> - <td><code>url</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<url>")}}</td> - <td>Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції <code>url()</code>.<br> - Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td> - </tr> - <tr> - <td><code>integer</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<integer>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<integer>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>number</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<number>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>length</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<length>")}} вимір, що вміщує одиниці виміру (наприклад, <code>12.5em</code>). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (e.g. <code>12.5</code>), і трактується як {{CSSxRef("<length>")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>angle</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<angle>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5deg</code>). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<angle>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>time</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<time>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5ms</code>). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<time>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані..</td> - <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>frequency</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<frequency>")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5kHz</code>). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.</td> - <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<frequency>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - <tr> - <td><code>%</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<percentage>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef ("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("<percentage>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0%</code>, або, якщо <code>0%</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - </tbody> - </table> - </dd> - <dt><code><fallback></code> {{Experimental_Inline}}</dt> - <dd>Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення <fallback> повинно мати тип, визначений <type-or-unit>. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного <type-or-unit>.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{CSSSyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Властивість_content">Властивість content</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p data-foo="hello">world</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css highlight[2] notranslate">[data-foo]::before { - content: attr(data-foo) " "; -}</pre> - -<h4 id="Результат">Результат</h4> - -<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p> - -<h3 id="<color>_значення"><color> значення</h3> - -<p>{{SeeCompatTable}}</p> - -<div id="color-value"> -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><div class="background" data-background="lime">background expect to be red if your browser does not support adavanced usage of attr()</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<div class="hidden"> -<pre class="brush: css notranslate">.background { - height: 100vh; -}</pre> -</div> - -<pre class="brush: css highlight[6] notranslate">.background { - background-color: red; -} - -.background[data-background] { - background-color: attr(data-background color, red); -}</pre> -</div> - -<h4 id="Результат_2">Результат</h4> - -<p>{{EmbedLiveSample("color-value", "100%", 50)}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>Без змін.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td> - <p>Додано два не обов'язкові параметри;<br> - може використовуватися зі всіма властивостями;<br> - може повертати інші значення, крім {{CSSxRef("<string>")}}.</p> - Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Обмежено властивісттю {{CSSxRef("content")}};<br> - завжди повертає {{CSSxRef("<string>")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_браузерів">Сумісність браузерів</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо Ви хочете зробити свій внесок у дані перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на отримання.</div> - -<p>{{Compat("css.types.attr")}}</p> - -<h2 id="Також_перегляньте">Також перегляньте</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> attributes</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> attributes</a></li> -</ul> diff --git a/files/uk/web/css/backdrop-filter/index.html b/files/uk/web/css/backdrop-filter/index.html deleted file mode 100644 index 6701367b35..0000000000 --- a/files/uk/web/css/backdrop-filter/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: backdrop-filter -slug: Web/CSS/backdrop-filter -translation_of: Web/CSS/backdrop-filter ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>Властивість backdrop-filter дозволяє застосувати графічні ефекти, такі як розмиття або зміщення кольорів до області позаду елемента. Оскільки це стосується всього, що стоїть поза елементом, щоб побачити ефект, ви повинні зробити елемент або його фон принаймні частково прозорим.</p> - -<pre class="brush: css no-line-numbers">/* Значення ключового слова */ -backdrop-filter: none; - -/* URL до SVG фільтру */ -backdrop-filter: url(commonfilters.svg#filter); - -/* Значення фільтру функцій */ -backdrop-filter: blur(2px); -backdrop-filter: brightness(60%); -backdrop-filter: contrast(40%); -backdrop-filter: drop-shadow(4px 4px 10px blue); -backdrop-filter: grayscale(30%); -backdrop-filter: hue-rotate(120deg); -backdrop-filter: invert(70%); -backdrop-filter: opacity(20%); -backdrop-filter: sepia(90%); -backdrop-filter: saturate(80%); - -/* Кілька фільтрів */ -backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); - -/* Глобальні значення */ -backdrop-filter: inherit; -backdrop-filter: initial; -backdrop-filter: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Фільтр відключений для фону</dd> - <dt><code><filter-function-list></code></dt> - <dd>Перелік фільтрів, розділених пробілами які застосовані для фону. Список фільтрів такий же як і для властивості <a href="/en-US/docs/Web/SVG/Element/filter">filter</a>.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклад">Приклад</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.box { - background-color: rgba(255, 255, 255, 0.3); - border-radius: 5px; - font-family: sans-serif; - text-align: center; - line-height: 1; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - max-width: 50%; - max-height: 50%; - padding: 20px 40px; -} - -html, -body { - height: 100%; - width: 100%; -} - -body { - background-image: url('https://lorempixel.com/400/200/'); - background-position: center center; - background-repeat: no-repeat; - background-size: cover; -} - -.container { - align-items: center; - display: flex; - justify-content: center; - height: 100%; - width: 100%; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="container"> - <div class="box"> - <p>backdrop-filter: blur(10px)</p> - </div> -</div> -</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample("Example", 600, 400)}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікаця</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> - <td>{{Spec2('Filters 2.0')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - - - -<p>{{Compat("css.properties.backdrop-filter")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{cssxref("filter")}}</li> - <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Blog post by Dom Neill with examples</a></li> - <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li> -</ul> diff --git a/files/uk/web/css/css_animations/index.html b/files/uk/web/css/css_animations/index.html deleted file mode 100644 index 9b1af6c15e..0000000000 --- a/files/uk/web/css/css_animations/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: CSS Animations -slug: Web/CSS/CSS_Animations -tags: - - CSS - - CSS анімації - - Довідка - - Огляд -translation_of: Web/CSS/CSS_Animations ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS-анімації</strong> - це модуль CSS, який дозволяє вам змінювати значення CSS-правил впродовж певного часу, використовуючи ключові кадри (keyframes). Поведінка цих анімацій може контролюватися шляхом встановлення їх функцій синхронізації, тривалості, числа повторів, та інших атрибутів.</p> - -<h2 id="Довідка">Довідка</h2> - -<h3 id="CSS_Властивості">CSS Властивості</h3> - -<div class="index"> -<ul> - <li>{{cssxref("animation")}}</li> - <li>{{cssxref("animation-delay")}}</li> - <li>{{cssxref("animation-direction")}}</li> - <li>{{cssxref("animation-duration")}}</li> - <li>{{cssxref("animation-fill-mode")}}</li> - <li>{{cssxref("animation-iteration-count")}}</li> - <li>{{cssxref("animation-name")}}</li> - <li>{{cssxref("animation-play-state")}}</li> - <li>{{cssxref("animation-timing-function")}}</li> -</ul> -</div> - -<h3 id="CSS_-правила">CSS @-правила</h3> - -<div class="index"> -<ul> - <li>{{cssxref("@keyframes")}}</li> -</ul> -</div> - -<h2 id="Посібники">Посібники</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Виявлення підтримки CSS-анімації</a></dt> - <dd>Описує техніку виявлення підтримки браузером CSS-анімації.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Використання CSS анімацій</a></dt> - <dd>Покроковий підручник про те, як створити анімацію засобами CSS. Дана стаття описує кожне відповідне CSS властивість і at-правило, та пояснює, як вони взаємодіють між собою.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Tips">Підказки і хитрощі для CSS анімацій</a></dt> - <dd>Підказки і хитрощі, які допоможуть вам досягти якнайкращих результатів у CSS-анімаціях. В даний момент описує техніку, що дозволяє програти спочатку уже запущену анімацію (API не підтримує напряму такий функціонал).</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Початкове визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Властивість</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - 43.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16.0")}}</td> - <td>10</td> - <td>12{{property_prefix("-o")}}<br> - 12.10<sup>[2]</sup></td> - <td>4.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Властивість</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.1 {{property_prefix("-webkit")}} [1]<br> - 4.0 {{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoMobile("16.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Часткова підтримка: властивість {{cssxref("animation-fill-mode")}} не підтримується в Android браузері до версії 2.3.</p> - -<p>[2] Ознайомтесь із <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>Подібно до CSS-анімацій, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> можуть запускати анімації на підставі дій користувача.</li> -</ul> - -<p> </p> diff --git a/files/uk/web/css/css_animations/using_css_animations/index.html b/files/uk/web/css/css_animations/using_css_animations/index.html deleted file mode 100644 index eb125ac0af..0000000000 --- a/files/uk/web/css/css_animations/using_css_animations/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Використання CSS анімацій -slug: Web/CSS/CSS_Animations/Using_CSS_animations -tags: - - CSS Animations - - Довідка -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations -original_slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій ---- -<p>{{SeeCompatTable}}{{CSSRef}}</p> - -<p><span class="seoSummary"><strong>CSS анімації</strong> роблять можливим анімацію переходів (<em>transitions</em>) з однєї конфігурації CSS стилю до іншої.</span> Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (<em>keyframes</em>), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.</p> - -<p>В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:</p> - -<ol> - <li>Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.</li> - <li>Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.</li> - <li>Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.</li> -</ol> - -<h2 id="Конфігурування_анімації">Конфігурування анімації</h2> - -<p>Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це <strong>не</strong> конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.</p> - -<p>Підвластивостями властивості {{ cssxref("animation") }} є:</p> - -<dl> - <dt>{{ cssxref("animation-delay") }}</dt> - <dd>Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.</dd> - <dt>{{ cssxref("animation-direction") }}</dt> - <dd>Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.</dd> - <dt>{{ cssxref("animation-duration") }}</dt> - <dd>Визначає тривалість циклу анімації.</dd> - <dt>{{ cssxref("animation-iteration-count") }}</dt> - <dd>Визначає кількість проходів (повторів) анімації; ви можете також обрати значення <strong><em><code>infinite</code></em></strong> для нескінченного повтору анімації.</dd> - <dt>{{ cssxref("animation-name") }}</dt> - <dd>Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.</dd> - <dt>{{ cssxref("animation-play-state") }}</dt> - <dd>Дозволяє вам призупиняти та відновлювати анімацію.</dd> - <dt>{{ cssxref("animation-timing-function") }}</dt> - <dd>Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.</dd> - <dt>{{ cssxref("animation-fill-mode") }}</dt> - <dd>Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.</dd> -</dl> - -<h2 id="Визначення_послідовності_анімації_через_ключові_кадри">Визначення послідовності анімації через ключові кадри</h2> - -<p>Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.</p> - -<p>Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: <em><strong><code>from</code></strong></em> і <em><strong><code>to</code></strong></em><code> відповідно</code>. Обидва ці імені є необов'язковими. Якщо <em><strong><code>from</code></strong></em>/<code>0%</code> чи <em><strong><code>to</code></strong></em>/<code>100%</code> не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.</p> - -<p>Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.</p> - -<h2 id="Приклади">Приклади</h2> - -<div class="note"><strong>Примітка:</strong> Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають <code>-webkit</code>-префіксовані версії.</div> - -<h3 id="Текст_що_ковзає_у_вікні_браузера">Текст, що ковзає у вікні браузера</h3> - -<p>Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.</p> - -<p>Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}<code>:hidden</code>.</p> - -<pre class="brush: css">p { - animation-duration: 3s; - animation-name: slidein; -} - -@keyframes slidein { - from { - margin-left: 100%; - width: 300%; - } - - to { - margin-left: 0%; - width: 100%; - } -} -</pre> - -<p>В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.</p> - -<p>Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.</p> - -<p>Ключові кадри визначені через at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я <em><strong><code>from</code></strong></em>). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).</p> - -<p>Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я <strong><em><code>to</code></em></strong>). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.</p> - -<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: -at last the Caterpillar took the hookah out of its mouth, and addressed -her in a languid, sleepy voice.</p> -</pre> - -<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)</p> - -<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p> - -<h3 id="Додавання_інших_ключових_кадрів">Додавання інших ключових кадрів</h3> - -<p>Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:</p> - -<pre class="brush: css">75% { - font-size: 300%; - margin-left: 25%; - width: 150%; -} -</pre> - -<pre class="brush: css hidden">p { - animation-duration: 3s; - animation-name: slidein; -} - -@keyframes slidein { - from { - margin-left: 100%; - width: 300%; - } - - 75% { - font-size: 300%; - margin-left: 25%; - width: 150%; - } - - to { - margin-left: 0%; - width: 100%; - } -} -</pre> - -<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: -at last the Caterpillar took the hookah out of its mouth, and addressed -her in a languid, sleepy voice.</p> -</pre> - -<p>Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.</p> - -<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)</p> - -<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p> - -<h3 id="Making_it_repeat">Making it repeat</h3> - -<p>Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення <em><strong><code>infinite</code></strong></em> для отримання постійної анімації:</p> - -<pre class="brush: css">p { - animation-duration: 3s; - animation-name: slidein; - animation-iteration-count: infinite; -} -</pre> - -<pre class="brush: css hidden">@keyframes slidein { - from { - margin-left: 100%; - width: 300%; - } - - to { - margin-left: 0%; - width: 100%; - } -} -</pre> - -<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: -at last the Caterpillar took the hookah out of its mouth, and addressed -her in a languid, sleepy voice.</p> -</pre> - -<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p> - -<h3 id="Змінюємо_напрямки_анімації">Змінюємо напрямки анімації</h3> - -<p>Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення <em><strong><code>alternate</code></strong></em>:</p> - -<pre class="brush: css">p { - animation-duration: 3s; - animation-name: slidein; - animation-iteration-count: infinite; - animation-direction: alternate; -} -</pre> - -<pre class="brush: css hidden">@keyframes slidein { - from { - margin-left: 100%; - width: 300%; - } - - to { - margin-left: 0%; - width: 100%; - } -} -</pre> - -<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: -at last the Caterpillar took the hookah out of its mouth, and addressed -her in a languid, sleepy voice.</p> -</pre> - -<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p> - -<h3 id="Використання_скорочень_для_правил_анімації">Використання скорочень для правил анімації</h3> - -<p>{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:</p> - -<pre class="brush: css">p { - animation-duration: 3s; - animation-name: slidein; - animation-iteration-count: infinite; - animation-direction: alternate; -} -</pre> - -<p>Їх можна замінити ось таким чином</p> - -<pre>p { - animation: 3s infinite alternate slideIn; -}</pre> - -<div class="note"> -<p><strong>Примітка</strong>: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :</p> -</div> - -<h3 id="Задання_множинних_значень_властивостей_анімації">Задання множинних значень властивостей анімації</h3> - -<p>Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:</p> - -<p>В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:</p> - -<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; -animation-duration: 3s; -animation-iteration-count: 1;</pre> - -<p>В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, <code>fadeInOut</code> має тривалість в 2.5s і кількість повторів 2, і т.д..</p> - -<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; -animation-duration: 2.5s, 5s, 1s; -animation-iteration-count: 2, 1, 5;</pre> - -<p>У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.</p> - -<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; -animation-duration: 2.5s, 5s; -animation-iteration-count: 2, 1;</pre> - -<h3 id="Використання_подій_анімації">Використання подій анімації</h3> - -<p>Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.</p> - -<p>Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.</p> - -<h4 id="Додавання_CSS">Додавання CSS</h4> - -<p>Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації <em><strong>alternate</strong></em> кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.</p> - -<pre class="brush: css">.slidein { - animation-duration: 3s; - animation-name: slidein; - animation-iteration-count: 3; - animation-direction: alternate; -} - -@keyframes slidein { - from { - margin-left:100%; - width:300% - } - - to { - margin-left:0%; - width:100%; - } -}</pre> - -<h4 id="Встановлення_animation_event_listeners_-_прослуховування_подій_анімації">Встановлення animation event listeners - прослуховування подій анімації</h4> - -<p>Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші <strong>event listeners</strong>; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.</p> - -<pre class="brush: js">var e = document.getElementById("watchme"); -e.addEventListener("animationstart", listener, false); -e.addEventListener("animationend", listener, false); -e.addEventListener("animationiteration", listener, false); - -e.className = "slidein"; -</pre> - -<p>Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.</p> - -<p>Чому? Тому що подія <strong><code>animationstart</code></strong> запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.</p> - -<h4 id="Отримання_подій">Отримання подій</h4> - -<p>Події надсилаються до функції <em><code>listener()</code></em>, як це показано нижче.</p> - -<pre class="brush: js">function listener(e) { - var l = document.createElement("li"); - switch(e.type) { - case "animationstart": - l.innerHTML = "Started: elapsed time is " + e.elapsedTime; - break; - case "animationend": - l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; - break; - case "animationiteration": - l.innerHTML = "New loop started at time " + e.elapsedTime; - break; - } - document.getElementById("output").appendChild(l); -} -</pre> - -<p>Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.</p> - -<p>Звіт після завершення роботи буде виглядати якось от так:</p> - -<ul> - <li>Started: elapsed time is 0</li> - <li>New loop started at time 3.01200008392334</li> - <li>New loop started at time 6.00600004196167</li> - <li>Ended: elapsed time is 9.234000205993652</li> -</ul> - -<p>Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія <strong><code>animationiteration</code></strong> не була надіслана; натомість надіслало подію <strong><code>animationend</code></strong>.</p> - -<h4 id="HTML">HTML</h4> - -<p>Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:</p> - -<pre class="brush: html"><h1 id="watchme">Watch me move</h1> -<p> - This example shows how to use CSS animations to make <code>H1</code> - elements move across the page. -</p> -<p> - In addition, we output some text each time an animation event fires, - so you can see them in action. -</p> -<ul id="output"> -</ul> -</body> -</pre> - -<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> - <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Визначення підтримки CSS анімації</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Використання CSS transitions</a></li> -</ul> diff --git a/files/uk/web/css/css_box_model/index.html b/files/uk/web/css/css_box_model/index.html deleted file mode 100644 index 5bd889607a..0000000000 --- a/files/uk/web/css/css_box_model/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Коробчаста модель CSS -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - Довідка - - Коробчаста модель CSS -translation_of: Web/CSS/CSS_Box_Model -original_slug: Web/CSS/Коробчаста_модель_CSS ---- -<div><strong>Коробчаста модель</strong> (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.</div> - -<h2 id="Довідка">Довідка</h2> - -<h3 id="Властивості">Властивості</h3> - -<h4 id="Властивості_що_визначають_потік_(flow)_вмісту">Властивості, що визначають потік (flow) вмісту</h4> - -<div class="index"> -<ul> - <li>{{cssxref("box-decoration-break")}}</li> - <li>{{cssxref("box-sizing")}}</li> - <li>{{cssxref("overflow")}}</li> - <li>{{cssxref("overflow-x")}}</li> - <li>{{cssxref("overflow-y")}}</li> -</ul> -</div> - -<h4 id="Властивості_що_визначають_розміри">Властивості, що визначають розміри</h4> - -<div class="index"> -<ul> - <li>{{cssxref("height")}}</li> - <li>{{cssxref("width")}}</li> - <li>{{cssxref("max-height")}}</li> - <li>{{cssxref("max-width")}}</li> - <li>{{cssxref("min-height")}}</li> - <li>{{cssxref("min-width")}}</li> -</ul> -</div> - -<h4 id="Властивості_що_визначають_відступи">Властивості, що визначають відступи</h4> - -<div class="index"> -<ul> - <li>{{cssxref("margin")}}</li> - <li>{{cssxref("margin-bottom")}}</li> - <li>{{cssxref("margin-left")}}</li> - <li>{{cssxref("margin-right")}}</li> - <li>{{cssxref("margin-top")}}</li> -</ul> -</div> - -<h4 id="Властивості_що_визначають_поля">Властивості, що визначають поля</h4> - -<div class="index"> -<ul> - <li>{{cssxref("padding")}}</li> - <li>{{cssxref("padding-bottom")}}</li> - <li>{{cssxref("padding-left")}}</li> - <li>{{cssxref("padding-right")}}</li> - <li>{{cssxref("padding-top")}}</li> -</ul> -</div> - -<h4 id="Інші_властивості">Інші властивості</h4> - -<div class="index"> -<ul> - <li>{{cssxref("visibility")}}</li> -</ul> -</div> - -<h2 id="Посібники">Посібники</h2> - -<dl> - <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Вступ до коробчастої моделі CSS</a></dt> - <dd>Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.</dd> - <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Згортання відступів</a></dt> - <dd>Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.</dd> - <dt><a href="/uk/docs/Web/CSS/Visual_formatting_model">Модель візуального формування</a></dt> - <dd>Описує та пояснює модель візуального формування.</dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box")}}</td> - <td>{{Spec2("CSS3 Box")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "box.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Первинне визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html deleted file mode 100644 index 44a6f7b56b..0000000000 --- a/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Згортання відступів -slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -tags: - - CSS - - Коробчаста модель CSS - - Посібник -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -original_slug: Web/CSS/CSS_Box_Model/Згортання_відступів ---- -<div dir="ltr">{{CSSRef}}</div> - -<p dir="ltr">The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position">absolutely positioned</a> elements never collapse.</p> - -<p dir="ltr">Margin collapsing occurs in three basic cases:</p> - -<dl> - <dt dir="ltr">Безпосередні (прилеглі) сусіди</dt> - <dd dir="ltr">The margins of adjacent siblings are collapsed (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd> - <dt dir="ltr">Батько та перший/останній дочірній елемент</dt> - <dd dir="ltr">If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.</dd> -</dl> - -<dl> - <dt dir="ltr">Порожні блоки</dt> - <dd dir="ltr">If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd> -</dl> - -<p dir="ltr">More complex margin collapsing (of more than two margins) occurs when these cases are combined.</p> - -<p dir="ltr">These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</p> - -<p dir="ltr">When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</p> - -<p dir="ltr">When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</p> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>The bottom margin of this paragraph is collapsed...</p> -<p>...with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> - -<div>This parent element contains two paragraphs! - <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> - <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> -</div> - -<p>Blah blah blah.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - margin: 2rem 0; - background: lavender; -} - -p { - margin: .4rem 0 1.2rem 0; - background: yellow; -}</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample('Examples','100%',250)}}</p> - -<h2 dir="ltr" id="Специфікації">Специфікації</h2> - -<table class="standard-table" dir="ltr"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Первинне визначення</td> - </tr> - </tbody> -</table> - -<h2 dir="ltr" id="Див._також">Див. також</h2> - -<ul> - <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> - <li dir="ltr">{{css_key_concepts}}</li> -</ul> diff --git a/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index bbd3d8d5e4..0000000000 --- a/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Використання CSS flexible-боксів -slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">CSS3 <strong>flex-бокс</strong>, або <strong>flexbox</strong>, це <a href="/en-US/docs/Web/CSS/Layout_mode">режим розмітки</a> створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.</span> В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і його контенту (margins collapse).</p> - -<p>Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.</p> - -<div class="note"><strong>Увага:</strong> Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">таблицею сумісності</a> для flex боксів</div> - -<h2 id="Концепція_flex-боксів">Концепція flex-боксів</h2> - -<p>Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.</p> - -<p>Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.</p> - -<h2 id="Словник_Flexible_box_термінів">Словник Flexible box термінів </h2> - -<p>Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Flex-контейнер</dt> - <dd>Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається <code>flex</code> або <code>inline-flex</code> значеннями {{Cssxref("display")}} властивості.</dd> - <dt>Flex-айтем</dt> - <dd> - <p>Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.</p> - </dd> - <dt>Осі</dt> - <dd> - <p>Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (<strong>main axis)</strong> - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (<strong>cross axis)</strong> вісь, що перпендикулярна до <strong>main axis</strong>.</p> - - <ul> - <li>Властивість <code><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> встановлює main axis.</li> - <li>Властивість <a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.</li> - <li>Властивість <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.</li> - <li>Властивість <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою <code>align-items.</code></li> - </ul> - </dd> - <dt>Напрямки</dt> - <dd> - <p>Головний початок/головний кінець(<strong>main start</strong>/<strong>main end) </strong>і перехресний початок/перехресний кінець(<strong>cross start</strong>/<strong>cross end)</strong> це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).</p> - - <ul> - <li>Властивість <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> присвоює елементи порядковим групам і визначає, який елемент є першим.</li> - <li>Властивість <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> це скорочена форма для <a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> та <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивостей.</li> - </ul> - </dd> - <dt>Лінії</dt> - <dd> - <p>Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.</p> - </dd> - <dt>Виміри</dt> - <dd>Еквівалентами для height і width для flex-айтемів є <strong>main size</strong> та <strong>cross size,</strong> які відповідно стосуються main axis і cross axis flex-контейнера.</dd> - <dd> - <ul> - <li>Початковим значенням для <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> і <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> є 0.</li> - <li>Властивість <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> виступає скороченням для <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, а також <code><a href="/en-US/docs/Web/CSS/flex-basis">flex-basis</a> </code>властивостей для встановлення гнучкості flex-айтема.</li> - </ul> - </dd> -</dl> - -<h2 id="Робимо_елемент_flexible-боксом">Робимо елемент flexible-боксом</h2> - -<p>Щоб зробити елемент flexible-боксом, вкажіт занчення <a href="/en-US/docs/Web/CSS/display">display</a> властивості наступним чином:</p> - -<pre class="brush: css">display : flex</pre> - -<p>або</p> - -<pre class="brush: css">display : inline-flex</pre> - -<p>Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення <code>flex</code> робить контейнер блоковим елементом. А <code>inline-flex</code> значення перетворює його на інлайн-елемент.</p> - -<div class="note"><strong>Увага:</strong> Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, <code>display : -webkit-flex</code>.</div> - -<h2 id="Характеристики_flex-айтема">Характеристики flex-айтема</h2> - -<p>Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило <code>display: none</code>.</p> - -<p>Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.</p> - -<p>У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів. Для детальної інформації прочитайте <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">вирівнювання з допомогою 'auto' марджінів</a> у W3C специфікації "модель Flexible-бокс розмітки" (англ.).</p> - -<p><s>Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте <code>min-width:auto</code> і/або <code>min-height:auto</code>. Для flex-айтемів, значення атрибуту <code>auto</code> вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.</s></p> - -<p>Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.</p> - -<p>For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p> - -<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p> - -<h2 id="Flexible_box_properties">Flexible box properties</h2> - -<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3> - -<p>Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:</p> - -<ul> - <li><code>column-*</code> properties of the <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> have no effect on a flex item.</li> - <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.</li> - <li>{{cssxref("vertical-align")}} has no effect on the alignment of flex items.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_flex_example">Basic flex example</h3> - -<p>This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - - .flex - { - /* basic styling */ - width: 350px; - height: 200px; - border: 1px solid #555; - font: 14px Arial; - - /* flexbox setup */ - display: -webkit-flex; - -webkit-flex-direction: row; - - display: flex; - flex-direction: row; - } - - .flex > div - { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - - width: 30px; /* To make the transition work nicely. (Transitions to/from - "width:auto" are buggy in Gecko and Webkit, at least. - See http://bugzil.la/731886 for more info.) */ - - -webkit-transition: width 0.7s ease-out; - transition: width 0.7s ease-out; - } - - /* colors */ - .flex > div:nth-child(1){ background : #009246; } - .flex > div:nth-child(2){ background : #F1F2F1; } - .flex > div:nth-child(3){ background : #CE2B37; } - - .flex > div:hover - { - width: 200px; - } - - </style> - - </head> - <body> - <p>Flexbox nuovo</p> - <div class="flex"> - <div>uno</div> - <div>due</div> - <div>tre</div> - </div> - </body> -</html></pre> - -<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3> - -<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - - body { - font: 24px Helvetica; - background: #999999; - } - - #main { - min-height: 800px; - margin: 0px; - padding: 0px; - display: -webkit-flex; - display: flex; - -webkit-flex-flow: row; - flex-flow: row; - } - - #main > article { - margin: 4px; - padding: 5px; - border: 1px solid #cccc33; - border-radius: 7pt; - background: #dddd88; - -webkit-flex: 3 1 60%; - flex: 3 1 60%; - -webkit-order: 2; - order: 2; - } - - #main > nav { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - -webkit-flex: 1 6 20%; - flex: 1 6 20%; - -webkit-order: 1; - order: 1; - } - - #main > aside { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - -webkit-flex: 1 6 20%; - flex: 1 6 20%; - -webkit-order: 3; - order: 3; - } - - header, footer { - display: block; - margin: 4px; - padding: 5px; - min-height: 100px; - border: 1px solid #eebb55; - border-radius: 7pt; - background: #ffeebb; - } - - /* Too narrow to support three columns */ - @media all and (max-width: 640px) { - - #main, #page { - -webkit-flex-flow: column; - flex-direction: column; - } - - #main > article, #main > nav, #main > aside { - /* Return them to document order */ - -webkit-order: 0; - order: 0; - } - - #main > nav, #main > aside, header, footer { - min-height: 50px; - max-height: 50px; - } - } - - </style> - </head> - <body> - <header>header</header> - <div id='main'> - <article>article</article> - <nav>nav</nav> - <aside>aside</aside> - </div> - <footer>footer</footer> - </body> -</html></pre> - -<h2 id="Playground">Playground</h2> - -<p>There are a few flexbox playgrounds available online for experimenting:</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> - <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> -</ul> - -<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2> - -<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p> - -<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> - -<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p> - -<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10<sup>[5]</sup><br> - 15 {{property_prefix("-webkit")}}</td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile("22.0")}}</td> - <td> - <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> - 1.1</p> - </td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoMobile("28.0")}}</td> - <td>1.3</td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p> - -<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p> - -<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p> - -<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p> - -<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p> - -<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}</p> diff --git a/files/uk/web/css/css_flexible_box_layout/index.html b/files/uk/web/css/css_flexible_box_layout/index.html deleted file mode 100644 index 3520d3040d..0000000000 --- a/files/uk/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: CSS Flexible Box Layout -slug: Web/CSS/CSS_Flexible_Box_Layout -tags: - - CSS - - CSS Flexible Boxes - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Flexible_Box_Layout ---- -<p>{{CSSRef}}</p> - -<p><strong>CSS Flexible Box Layout</strong> це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.</p> - -<p> </p> - -<p class="summary"> </p> - -<h2 id="Простий_Приклад">Простий Приклад</h2> - -<p>В наступному прикладі у контейнерa встановлено властивість <code>display: flex</code>, що означає - три його вкладені елементи є flex елементами. Значення <code>justify-content</code> має значення <code>space-between</code> для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості <code>align-items</code> рівний <code>stretch</code>. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> - -<h2 id="Reference">Reference</h2> - -<p class="summary"> </p> - -<h2 id="Reference_2">Reference</h2> - -<h3 id="CSS_Properties">CSS Properties</h3> - -<div class="index"> -<ul> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("align-items")}}</li> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("flex")}}</li> - <li>{{cssxref("flex-basis")}}</li> - <li>{{cssxref("flex-direction")}}</li> - <li>{{cssxref("flex-flow")}}</li> - <li>{{cssxref("flex-grow")}}</li> - <li>{{cssxref("flex-shrink")}}</li> - <li>{{cssxref("flex-wrap")}}</li> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("order")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt> - <dd>Step-by-step tutorial about how to build layouts using this feature.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt> - <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Flexbox') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("20.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>10.0{{property_prefix("-ms")}}<br> - 11.0</td> - <td>12.10</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>4.4</td> - <td>11</td> - <td>12.10</td> - <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html deleted file mode 100644 index 84c95201bb..0000000000 --- a/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Основна концепція макета grid -slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -tags: - - CSS Grid - - Посібник -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вводить двовимірну сітку до CSS. Сітки можуть бути використані для виділення основних областей сторінки або невеликих елементів інтерфейсу користувача. У цій статті надана схема CSS Grid Layout та нова термінологія, що є частиною специфікації CSS Grid Layout Level 1. Функції, наведені в цьому огляді, будуть більш детально пояснені далі в цьому посібнику.</p> - -<h2 id="Що_таке_grid">Що таке grid?</h2> - -<p>Grid є перехресним набором горизонтальних і вертикальних ліній, що перетинаються - один набір визначає стовпці, інший рядки. Елементи можуть бути розміщені на сітці, дотримуючись цих стовпців та рядків. Макет сітки CSS має такі особливості:</p> - -<h3 id="Фіксовані_та_гнучкі_розміри_смуг">Фіксовані та гнучкі розміри смуг</h3> - -<p>Ви можете створити сітку з фіксованими розмірами смуг – наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Ви також можете створити сітку з використанням гнучких розмірів у відсотках або з новою одиницею <code>fr</code>, яку розроблену саме для цієї мети.</p> - -<h3 id="Розміщення_елементів">Розміщення елементів</h3> - -<p>Ви можете розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.</p> - -<h3 id="Створення_додаткових_смуг_для_вмісту">Створення додаткових смуг для вмісту</h3> - -<p>Ви можете визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання " стільки стовпчиків, скільки вміститься в контейнер".</p> - -<h3 id="Управління_вирівнюванням">Управління вирівнюванням</h3> - -<p>Сітка містить функції вирівнювання для того, щоб ми могли контролювати, як вирівнюються розміщені в області сітки елементи та як вирівнюється вся Grid-сітка.</p> - -<h3 id="Управління_вмістом_що_перекривається">Управління вмістом, що перекривається</h3> - -<p>У секцію сітки можна додати більш ніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою {{cssxref("z-index")}} властивості.</p> - -<p>Grid - це потужна специфікація, яка у поєднанні з іншими можливостями CSS такими, як <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, дозволяє вам створювати макети, які раніше неможливо було створити за допомогою CSS. Все починається шляхом створення сітки у <strong>grid-контейнері</strong>.</p> - -<h2 id="Grid-контейнер">Grid-контейнер</h2> - -<p>Ми створюємо <em>grid-контейнер </em>оголошуючи <code>display: grid</code> або <code>display: inline-grid</code> на елементі. Як тільки ми це зробимо, всі <em>прямі діти </em>елементу стають <em>grid-елементами</em>.</p> - -<p>У цьому прикладі, у мене div-елемент з класом <em>wrapper</em>, що містить в собі п'ять дочірніх елементів.</p> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<p>Я роблю з класу <code>.wrapper</code> grid-контейнер.</p> - -<pre class="brush: css">.wrapper { - display: grid; -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> - -<p>Всі прямі нащадки тепер є grid-елементами. В браузері ви не помітите ніякої різниці між виглядом елементів до і після створення grid-контейнеру. З цієї точки зору вам буде корисно працювати в редакторі Firefox Developer Edition, який має <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, доступний як частина інструментів розробника. Якщо ви розглянете цей приклад в Firefox і перевірите grid, ви побачите маленький значок біля значення <code>grid</code>. Клікніть його і сітка накладеться на цей елемент у вікні браузера.</p> - -<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> - -<p>Як вийде - працюйте з CSS Grid Layout, це інструмент надасть вам краще розуміння того що відбувається з вашою grid-сіткою візуально. </p> - -<p>Якщо ми хочемо щоб це було більше grid-орієнтовано, треба додавати більше смуг-стовбців.</p> - -<h2 id="Grid_Смуги">Grid Смуги</h2> - -<p>Ми визначаємо рядки і стовпчики на нашій grid-сітці властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}. Вони визначають grid смуги. Grid-смуга – це простір будь якими двома лініями на grid-сітці. На зображенні нижче кольорова смуга – перша смуга-рядок на нашій grid-сітці.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> - -<p>До попереднього прикладу можна додати властивість <code>grid-template-columns</code>, визначаючи розмір смуг-стовпчиків.</p> - -<p>Таким чином створено grid-сітку з трьома смугами-стовпчиками шириною по 200 рх. Дочірні елементи вкладатимуться в цю grid-сітку в кожну клітинку. </p> - -<div id="grid_first"> -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 200px 200px 200px; -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> -</div> - -<h3 id="Одиниця_fr">Одиниця fr </h3> - -<p>Смуги визначаються одиницями довжини. Grid-сітка має додаткову одиницю довжини яка допомагає створювати гнучкі grid-смуги. Одиниця <code>fr</code> являє собою частку вільного простору в grid-контейнері. Наступна сітка створює три рівних по ширині смуги які стають більше і менше відповідно наявному простору. </p> - -<div id="fr_unit_ls"> -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> -</div> - -<p>В наступному прикладі ми створюємо визначення з <code>2fr</code> смугою і дві <code>1fr</code> смуги. Доступний простір розділений на чотири частини, дві з яких надаються першій смузі і по одній частині кожній з наступних двох.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 2fr 1fr 1fr; -} -</pre> - -<p>В останньому прикладі ми комбінуємо абсолютні одиниці ширини смуг з фракційними. Перша смуга 500 px, фіксована ширина відбирається з доступного простору. Решта простору ділиться на три і призначається двом гнучким смугам пропорційно. </p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 500px 1fr 2fr; -} -</pre> - -<h3 id="Визначення_смуг_зі_значенням_repeat()"><code>Визначення смуг зі значенням repeat()</code></h3> - -<p>Великі grid-сітки з багатьма стугами можуть використовувати значення <code>repeat()</code> для скорочення при визначенні стовпчиків: </p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; -} -</pre> - -<p>Також може бути записано як:</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); -} -</pre> - -<p>Значення repeat може використовуватись лише для частини стовпчиків. В наступному прикладі ініційовано смугу 20 рх, секцію з 6 смуг шириною <code>1fr,</code> і смугу 20 рх. </p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 20px repeat(6, 1fr) 20px; -} -</pre> - -<p>Значення repeat визначає смуги, тобто його можливо використовувати для створення цілих шаблонів стовпчиків. В наступному прикладі grid-сітка складається з 10 смуг. Смуга <code>1fr</code> , смуга <code>2fr</code> і так п'ять разів.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(5, 1fr 2fr); -} -</pre> - -<h3 id="Неявна_і_явна_Grid-сітка">Неявна і явна Grid-сітка</h3> - -<p>Cтворюючи Grid-сітку нашого прикладу, ми визначили стовпчики-смуги властивістю {{cssxref("grid-template-columns")}}, але дозволимо grid-сітці створювати рядки так, як краще для контенту. Такі рядки створюються в неявній grid-сітці. Явна grid-сітка складається з рядків і стовпчиків, які визначаються властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}.</p> - -<p>Якщо ми розташовуємо щось поза цією grid-сіткою, або кількість вмісту потребує більше grid смуг, тоді grid-сітка створює рядки і стовпчики в неявній grid-сітці. Такі смуги матимуть авторозмір за замовчуванням якраз щоб вмістити свій контент.</p> - -<p>Ви також можете визначити встановлений розмір для смуг, створених в неявній grid-сітці властивостями {{cssxref("grid-auto-rows")}} та {{cssxref("grid-auto-columns")}}.</p> - -<p>В прикладі нижче ми використовуємо <code>grid-auto-rows</code> щоб забезпечити неявне створення смуги висотою 200 рх.</p> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 200px; -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p> - -<h3 id="Розміри_смуги_і_minmax()">Розміри смуги і <code>minmax()</code></h3> - -<p>Встановлюючи явну grid-сітку або визначаючи розміри для автоматично створених рядків або стовпчиків може виникнути необхідність надання смугам мінімального розміру. Але треба переконатись що розширюючись, вони відповідатимуть будь якому доданому контенту. Наприклад ми хочемо щоб рядки ніколи не були менше 100 рх, але якщо контент розширюється до 300 рх, ми б хотіли щоб рядок розширився до такої висоти. </p> - -<p>Grid для таких випадків має функцію {{cssxref("minmax", "minmax()")}}. В наступному прикладі я використовую <code>minmax()</code>в значенні {{cssxref("grid-auto-rows")}}. Це означає, що автоматично створені рядки матимуть мінімальну висоту 100 рх, а максимальну <code>auto</code>. Використання <code>auto</code> означає, що розмір буде підлаштовуватись під розмір контенту таким чином, щоб вмістити найвищий елемент в цьому рядку.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(100px, auto); -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> - <div>One</div> - <div>Two - <p>I have some more content in.</p> - <p>This makes me taller than 100 pixels.</p> - </div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div></code></pre> - -<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}</p> - -<h2 id="Grid_Лінії">Grid Лінії</h2> - -<p>Варто зауважити що коли ми визначаємо Grid, ми визначаємо grid-смуги (але не grid-лінії). В такому випадку Grid дає нам нумеровані лінії для позиціонування елементів. В прикладі нижче Grid має 3 стовпчика, 2 рядки і 4 вертикальних лінії.</p> - -<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> - -<p>Лінії пронумеровано згідно способу нумерації документа: зліва направо і зверху вниз (якщо на мові що викоричтовується пишуть справа наліво, то і нумерація ліній справа наліво). Лінії також можуть бути поіменовані.</p> - -<h3 id="Позиціонування_елементів_по_лініях">Позиціонування елементів по лініях</h3> - -<p>Наступний приклад демонструє просте позиціонування елементів по лініях. При розміщенні елементів ми надаємо перевагу більше лініям ніж смугам.</p> - -<p>В наступному прикладі ми розміщуємо перші два елементи на Grid-cітці, яка складається з трьох смуг-стовпчиків, застосовуючи властивості {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} та {{cssxref("grid-row-end")}}. Рухаючись зліва направо, перший елемент починається з вертикальної лініі 1 і простягається до вертикальної лініі 4, що праворуч нашої Grid-сітки. Він починається на горизонтальній лінії 1 і закінчується на горизонтальній лінії 3, тобто займає два рядка смуг.</p> - -<p>Другий елемент починається з вертикальної лініі 1, і простягається на одну смугу. Це за замовчуванням, тому можна не вказувати кінцеву лінію. Також по рядках він простягається з горизонтальній лінії 3 до горизонтальній лінії 5. Інші елементи розміщуються в порожніх просторах на Grid-сітці.</p> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> - <div class="box4">Four</div> - <div class="box5">Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; -} -.box2 { - grid-column-start: 1; - grid-row-start: 3; - grid-row-end: 5; -} -</pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p> - -<p>Не забуваймо, що можна використовувати <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> в Firefox Developer Tools щоб побачити як елементи позиціонуються на лініях Grid-сітки.</p> - -<h2 id="Grid-клітини">Grid-клітини</h2> - -<p><em>Grid-клітина</em> – найменша одиниця Grid-сітки, по аналогії з чарунком таблиці. Як ми бачили в попередніх прикладах, якщо Grid-сітка визначена як батьківська, дочірні елементи лежатимуть по одному в кожній її клітині. На зображенні кольором позначено першу клітину Grid-сітки.</p> - -<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> - -<h2 id="Grid-ділянки">Grid-ділянки</h2> - -<p>Елементи можуть розташовуватись на одній або декількох клітинках як в рядок так і в стовпчик, і це створює Grid-ділянки. Grid-ділянки завжди прямокутні, неможлива, наприклад, L-подібна Grid-ділянка. На зображенні Grid-ділянка займає два рядки і два стовпчики.</p> - -<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> - -<h2 id="Розриви">Розриви</h2> - -<p><em>Розриви</em> між Grid-клітинами створюються властивістями {{cssxref("grid-column-gap")}} та {{cssxref("grid-row-gap")}}, або скорочено {{cssxref("grid-gap")}}. В наступному прикладі створюється проміжок у 10рх між стовпчиками та проміжок <code>1em</code> між рядками. </p> - -<pre class="brush: css line-numbers language-css"><code class="language-css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 10px; - row-gap: 1em; -}</code></pre> - -<div class="note"> -<p><strong>Примітка:</strong> Коли гріди тільки почали використовуватись браузерами {{cssxref("column-gap")}}, {{cssxref("row-gap")}} та {{cssxref("gap")}} мали префікси <code>grid-</code> як от {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} та {{cssxref("grid-gap")}} відповідно.</p> - -<p>Браузери наразі оновлюються, щоб видалити цей префікс, проте попередньо встановлені версії також будуть підтримуватися як псевдоніми, що робить їх безпечними для використання. В даний час деякі веб-переглядачі не підтримують безпрефіксний варіант, тому в прикладах цього посібника використовуюється версія з grid- префіксом.</p> -</div> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div></code></pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - grid-column-gap: 10px; - grid-row-gap: 1em; - - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('Gutters') }}</p> - -<p>Будь-який простір, відведений на розриви, буде враховуватись до відведення простору для гнучких <code>fr</code> довжин смуг. Розриви використовуваються в розмітці, як звичайні grid-смуги, за виключенням того, що ви не зможете в них нічого помістити. З точки зору лінійного позиціонування розрив діє як товста лінія.</p> - -<h2 id="Вкладені_Grid-сітки">Вкладені Grid-сітки</h2> - -<p>Grid-елементи можуть ставати Grid-контейнерами. В попередньому прикладі ми створили Grid-сітку з трьох стовпчиків з двома позиціонованими елементами. Перший з них має піделементи. Оскільки ці елементи не є прямими нащадками, вони не беруть участі в Grid-розкладці і відображаються в нормальному потоці. </p> - -<div id="nesting"> -<pre class="brush: html"><div class="wrapper"> - <div class="box box1"> - <div class="nested">a</div> - <div class="nested">b</div> - <div class="nested">c</div> - </div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> - -<p>Якщо застосувати <code>display: grid</code> до <code>box1</code>, то ця Grid-смуга також стане Grid-сіткою. А елементи, що в ній містяться, надалі розташовуватимуться на цій новій Grid-сітці.</p> - -<pre class="brush: css line-numbers language-css"><code class="language-css">.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - display: grid; - grid-template-columns: repeat(3, 1fr); -}</code></pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; - display: grid; - grid-template-columns: repeat(3, 1fr); -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} - -.box1 { - grid-column: 1 / 4; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -}</code></pre> -</div> -</div> - -<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> - -<p>В цьому випадку, дочірня сітка немає відношення до батьківської. Як ви можете бачити на прикладі, вона не наслідує батьківськи {{cssxref("grid-gap")}}, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.</p> - -<h3 id="Під-сітка">Під-сітка</h3> - -<p>У робочій чорнетці специфікації Grid Level 2 є функція під назвою <em>subgrid</em>, яка має дозволити нам створювати вкладені сітки, які б використовували визначення смуги батьківської сітки.</p> - -<div class="note"> -<p><strong>Примітка:</strong> під-сітки ще не реалізовані в жодному браузері, і їхня специфікація ще може змінюватися.</p> -</div> - -<p>У поточній специфікації ми відредагуємо вищезгаданий приклад вкладеної Grid-сітки, змінивши визначення смуги з <code>grid-template-columns: repeat(3, 1fr)</code> , на <code>grid-template-columns: subgrid</code>. Вкладена сітка надалі використовуватиме батьківські Grid-смуги до елементів макета.</p> - -<pre class="brush: css line-numbers language-css"><code class="language-css">.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - display: grid; - grid-template-columns: subgrid; -}</code></pre> - -<h2 id="Нашарування_елементів_за_допомогою_z-index">Нашарування елементів за допомогою <code>z-index</code></h2> - -<p>Grid-елементи можуть займати одну і ту ж саму клітину. Якщо повернутись до нашого прикладу з елементами, що розташовані за номером рядка, ми можемо змінити його так, щоб два елементи перекривали один одного.</p> - -<div id="l_ex"> -<pre class="brush: html line-numbers language-html"><code class="language-html"><div class="wrapper"> - <div class="box box1">One</div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div></code></pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} - -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; -} - -.box2 { - grid-column-start: 1; - grid-row-start: 2; - grid-row-end: 4; -}</code></pre> - -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code> -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> - -<p>Елемент <code>box2</code> тепер перекриває <code>box1</code>, він відображається зверху, тому що пізніше трапляеться в коді документу.</p> - -<h3 id="Керування_послідовністю">Керування послідовністю</h3> - -<p>Ми можемо контролювати порядок, в якому елементи накладаються один на одного, використовуючи властивість <code>z-index</code>. Якщо надати <code>box2</code> нижчий <code>z-index</code>, ніж в <code>box1</code>, то він і буде показаний нижче у стеці.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} - -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - z-index: 2; -} - -.box2 { - grid-column-start: 1; - grid-row-start: 2; - grid-row-end: 4; - z-index: 1; -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> - <div class="box box1">One</div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -}</code></pre> -</div> - -<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p> - -<h2 id="Наступні_кроки">Наступні кроки</h2> - -<p>У цій статті ми швидко переглянули специфікацію Grid Layout. Пограйте з прикладами коду, а потім переходьте до <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">наступної частини цього посібника, де ми насправді почнемо заглиблюватись в деталі CSS Grid Layout</a>.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/web/css/css_grid_layout/index.html b/files/uk/web/css/css_grid_layout/index.html deleted file mode 100644 index e403f8364f..0000000000 --- a/files/uk/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout -tags: - - CSS - - Grid Layout - - Grids - - Layout - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Grid_Layout ---- -<p><strong>CSS Grid layout</strong> відзначається тим, що розділяє сторінку на ділянки чи задає співвідношення між елементами, побудованими з HTML примітивів, з точки зору розміру, положення та слоїв.</p> - -<p>Подібно до таблиць, CSS Grid дозволяє автору вирівнювати елементи у стовпчиках та рядках. Однак, CSS Grid, в порівнянні з таблицями, надає більше можливостей і полегшує створення макетів. Наприклад, дочірні елементи Grid-контейнера можуть перекривати один одного і нашаровуватись, подібно до позиційованих CSS елементів.</p> - -<h2 id="Basic_Example" name="Basic_Example">Базовий приклад</h2> - -<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі показана сітка з трьома стовпчиками, в якій нові рядки мають мінімальну висоту 100 пікселів, а максимальна висота вираховується автоматично.</span> <span>Елементи розміщені в сітці використовуючи лінійне розташування .</span></span></p> - -<div id="example"> -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} -.wrapper { - max-width: 940px; - margin: 0 auto; -} - -.wrapper > div { - border: 2px solid rgb(233,171,88); - border-radius: 5px; - background-color: rgba(233,171,88,.5); - padding: 1em; - color: #d9480f; -}</pre> -</div> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="one">One</div> - <div class="two">Two</div> - <div class="three">Three</div> - <div class="four">Four</div> - <div class="five">Five</div> - <div class="six">Six</div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -.one { - grid-column: 1 / 3; - grid-row: 1; -} -.two { - grid-column: 2 / 4; - grid-row: 1 / 3; -} -.three { - grid-column: 1; - grid-row: 2 / 5; -} -.four { - grid-column: 3; - grid-row: 3; -} -.five { - grid-column: 2; - grid-row: 4; -} -.six { - grid-column: 3; - grid-row: 4; -} -</pre> - -<p>{{ EmbedLiveSample('example', '500', '440') }}</p> -</div> - -<h2 id="Посилання">Посилання</h2> - -<h3 id="CSS_властивості">CSS властивості</h3> - -<div class="index"> -<ul> - <li>{{cssxref("grid-template-columns")}}</li> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid-template-areas")}}</li> - <li>{{cssxref("grid-template")}}</li> - <li>{{cssxref("grid-auto-columns")}}</li> - <li>{{cssxref("grid-auto-rows")}}</li> - <li>{{cssxref("grid-auto-flow")}}</li> - <li>{{cssxref("grid")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row")}}</li> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-area")}}</li> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> -</ul> -</div> - -<h3 id="CSS_функції">CSS функції</h3> - -<div class="index"> -<ul> - <li>{{cssxref("repeat", "repeat()")}}</li> - <li>{{cssxref("minmax", "minmax()")}}</li> - <li>{{cssxref("fit-content", "fit-content()")}}</li> -</ul> -</div> - -<h3 id="Глосарій">Глосарій</h3> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> -</ul> -</div> - -<h2 id="Посібники">Посібники</h2> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> -</ul> -</div> - -<h2 id="Зовнішні_ресурси">Зовнішні ресурси</h2> - -<ul> - <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> - <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> - <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> - <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> - <li><a href="http://cssgridgarden.com">Grid Garden</a> - Гра для вивчення CSS grid</li> -</ul> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Grid') }}</td> - <td>{{ Spec2('CSS3 Grid') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html deleted file mode 100644 index 7f715c0986..0000000000 --- a/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ /dev/null @@ -1,628 +0,0 @@ ---- -title: Relationship of grid layout to other layout methods -slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -<p>CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.</p> - -<h2 id="Grid_and_flexbox">Grid and flexbox</h2> - -<p>The basic difference between CSS Grid Layout and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> is that flexbox was designed for layout in one dimension - either a row <em>or</em> a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.</p> - -<h3 id="Одновимірні_макети_проти_двовимірних">Одновимірні макети проти двовимірних</h3> - -<p>A simple example can demonstrate the difference between one- and two-dimensional layouts.</p> - -<p>In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 200 pixels.</p> - -<p>I have also set the {{cssxref("flex-wrap")}} property to <code>wrap</code>, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.</p> - -<div id="onedtwod"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: flex; - flex-wrap: wrap; -} -.wrapper > div { - flex: 1 1 200px; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> - -<p>In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. Space distribution happens across the row.</p> - -<p>A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.</p> - -<h3 id="The_same_layout_with_CSS_grids">The same layout with CSS grids</h3> - -<p>In this next example, I create the same layout using Grid. This time we have three <code>1fr</code> column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.</p> - -<div class="Two_Dimensional_With_Grid"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); -} -</pre> - -<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> -</div> - -<p>A simple question to ask yourself when deciding between grid or flexbox is:</p> - -<ul> - <li>do I only need to control the layout by row <u><em>or</em></u> column – use a flexbox</li> - <li>do I need to control the layout by row <u><em>and</em></u> column – use a grid</li> -</ul> - -<h3 id="Content_out_or_layout_in">Content out or layout in?</h3> - -<p>In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space <em>on that line</em>.</p> - -<p>Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.</p> - -<p>If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.</p> - -<h3 id="Box_alignment">Box alignment</h3> - -<p>The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to at least create the visual effect of.</p> - -<p>The alignment properties from the flexbox specification have been added to a new specification called <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.</p> - -<p>In a later guide in this series, I’ll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.</p> - -<p>In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to <code>flex-end</code> so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on <code>box1</code> so it will override the default and stretch to the height of the container and on <code>box2</code> so it aligns to the start of the flex container.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: flex; - align-items: flex-end; - min-height: 200px; -} -.box1 { - align-self: stretch; -} -.box2 { - align-self: flex-start; -} -</pre> - -<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p> - -<h3 id="Alignment_in_CSS_Grids">Alignment in CSS Grids</h3> - -<p>This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to <code>start</code> and <code>end</code> rather than <code>flex-start</code> and <code>flex-end</code>. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3,1fr); - align-items: end; - grid-auto-rows: 200px; -} -.box1 { - align-self: stretch; -} -.box2 { - align-self: start; -} -</pre> - -<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p> - -<h3 id="The_fr_unit_and_flex-basis">The <code>fr</code> unit and <code>flex-basis</code></h3> - -<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p> - -<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p> - -<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p> - -<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> - -<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p> - -<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, 200px); -} -</pre> - -<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> - -<h3 id="A_flexible_number_of_tracks">A flexible number of tracks</h3> - -<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fill</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); -} -</pre> - -<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> - -<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p> - -<h2 id="Grid_and_absolutely_positioned_elements">Grid and absolutely positioned elements</h2> - -<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p> - -<h3 id="A_grid_container_as_containing_block">A grid container as containing block</h3> - -<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p> - -<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3"> - This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. - </div> - <div class="box4">Four</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4,1fr); - grid-auto-rows: 200px; - grid-gap: 20px; - position: relative; -} -.box3 { - grid-column-start: 2; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - position: absolute; - top: 40px; - left: 40px; -} -</pre> - -<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p> - -<p>You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p> - -<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p> - -<h3 id="A_grid_container_as_parent">A grid container as parent</h3> - -<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p> - -<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> - -<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p> - -<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3> - -<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p> - -<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three - <div class="abspos"> - This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area. - </div> - </div> - <div class="box4">Four</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4,1fr); - grid-auto-rows: 200px; - grid-gap: 20px; -} -.box3 { - grid-column-start: 2; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - position: relative; -} -.abspos { - position: absolute; - top: 40px; - left: 40px; - background-color: rgba(255,255,255,.5); - border: 1px solid rgba(0,0,0,0.5); - color: #000; - padding: 10px; -} -</pre> - -<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p> - -<h2 id="Grid_and_display_contents">Grid and <code>display: contents</code></h2> - -<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p> - -<blockquote> -<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p> -</blockquote> - -<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p> - -<div id="Display_Contents_Before"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box box1"> - <div class="nested">a</div> - <div class="nested">b</div> - <div class="nested">c</div> - </div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(100px, auto); -} -.box1 { - grid-column-start: 1; - grid-column-end: 4; -} - -</pre> - -<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> -</div> - -<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p> - -<div id="Display_Contents_After"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div class="box box1"> - <div class="nested">a</div> - <div class="nested">b</div> - <div class="nested">c</div> - </div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(100px, auto); -} -.box1 { - grid-column-start: 1; - grid-column-end: 4; - display: contents; -} -</pre> - -<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> -</div> - -<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p> - -<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p> - -<h2 id="See_Also">See Also</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox Guides</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li> -</ul> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/web/css/css_selectors/index.html b/files/uk/web/css/css_selectors/index.html deleted file mode 100644 index 20f89ab44f..0000000000 --- a/files/uk/web/css/css_selectors/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: CSS селектори -slug: Web/CSS/CSS_Selectors -translation_of: Web/CSS/CSS_Selectors ---- -<div>{{CSSRef("Selectors")}}</div> - -<p class="summary"><span class="seoSummary"><strong>CSS селектори </strong> означують елемнти до яких застосовується набір правил CSS. </span></p> - -<h2 id="Прості_селектори">Прості селектори</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селектор за типом (Type selector)</a></dt> - <dd>Вибирає всі елементи, що відповідають вказаному імені вузла.<br> - <strong>Syntax:</strong> <code><var>eltname</var></code><br> - <strong>Example:</strong> <code>input</code> буде відповідати будь-якому елементу {{HTMLElement("input")}} .</dd> - <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селектор за класом (Class selector)</a></dt> - <dd>Вибирає всі елементи, що відповідають вказаному атрибуту <code>class</code>.<br> - <strong>Syntax:</strong> <code>.<var>classname</var></code><br> - <strong>Example:</strong> <code>.index</code> буде відповідати будь-якому елементу, що має клас "index".</dd> - <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селектор за ID (ID selector)</a></dt> - <dd>Вибирає елемент, відповідно до його значення атрибуту <code>id</code>. В документі повинен бути тільки один елемент з вказаним ID.<br> - <strong>Syntax:</strong> <code>#<var>idname</var></code><br> - <strong>Example:</strong> <code>#toc</code> буде відповідати елементу, що має ID зі значенням "toc".</dd> - <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Універсальний селектор (Universal selector)</a></dt> - <dd>Вибирає усі елементи. <span class="tlid-translation translation"><span title="">За бажанням, він може бути обмежений певним простором імен або всім простором імен.</span></span><br> - <strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> - <strong>Example:</strong> <code>*</code> буде відповідати усім елементам документу.</dd> - <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селектор за атрибутом (Attribute selector)</a></dt> - <dd>Вибирає елементи, відповідно до його значення вказаного атрибуту.<br> - <strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> - <strong>Example:</strong> <code>[autoplay]</code> буде відповідати всім елементам що мають виставлений атрибут <code>autoplay</code> (в будь яке значення).</dd> -</dl> - -<h2 id="Комбінатори">Комбінатори</h2> - -<dl> - <dt><a href="/uk/docs/Web/CSS/Adjacent_sibling_combinator">Комбінатор прилеглого елемента</a></dt> - <dd>Комбінатор <code>+</code> вибирає прилеглі елементи, що мають спільного нащадка (рівноправні). Це означає, що наступний елемент слідує безпосередньо за попереднім, і в обидвох спільний предок (обидва класи знаходятся в одному старшому класі).<br> - <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> - <strong>Приклад: </strong> під дію <code>h2 + p</code> підпадуть усі випадки, у яких елемент {{HTMLElement("p")}} знаходиться безпосередньо після елемента {{HTMLElement("h2")}}.</dd> - <dt><a href="/uk/docs/Web/CSS/General_sibling_combinator">Загальний комбінатор прилеглих елементів</a></dt> - <dd>Комбінатор <code>~</code> обирає сусідні елементи. Це значить, що другий елемент слідує за першим (хоча і не обов'язково безпосередньо зразу після нього), і обидва елементи знаходяться в межах лдного предка.<br> - <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> - <strong>Приклад:</strong> <code>p ~ span</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("span")}} слідує за елементом {{HTMLElement("p")}}.</dd> - <dt><a href="/uk/docs/Web/CSS/Child_combinator">Комбінатор прямого нащадка</a></dt> - <dd>Комбінатор <code>></code> обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.<br> - <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> - <strong>Приклад:</strong> <code>ul > li</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("li")}} буде вкладеним прямо в елемент {{HTMLElement("ul")}} (елемент {{HTMLElement("ul")}} складається з {{HTMLElement("li")}}, що значить, що {{HTMLElement("li")}} є його прямим нащадком.</dd> - <dt><a href="/uk/docs/Web/CSS/Descendant_combinator">Комбінатор за нащадками (Descendant combinator)</a></dt> - <dd>Комбінатор <code> </code> (space) обирає всі вузли, що є нащадками першого елемента.<br> - <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> - <strong>Приклад:</strong> <code>div span</code> обиратиме усі елементи {{HTMLElement("span")}}, що знаходяться всередині елемента {{HTMLElement("div")}}, хоча і необов'язково напряму (елемент {{HTMLElement("span")}} може бути всередині {{HTMLElement("table")}}, яка знаходиться в {{HTMLElement("div")}}).</dd> - <dt><a href="/uk/docs/Web/CSS/Column_combinator">Стовпчиковий комбінатор</a> {{Experimental_Inline}}</dt> - <dd>Комбінатор <code>||</code> вибирає усі вузли, що належать стовпчику.<br> - <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> - <strong>Приклад:</strong> <code>col || td</code> застосовуватиметься до усіх елементів {{HTMLElement("td")}}, що потрапляють в зону застосування {{HTMLElement("col")}}.</dd> -</dl> - -<h2 id="Псевдо-класи">Псевдо-класи</h2> - -<dl> - <dt><a href="/uk/docs/Web/CSS/Pseudo-classes">Псевдо-класи</a> роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.</dt> - <dd><strong>Приклад:</strong> <code>a:visited</code> застосовуватиметься для усіх {{HTMLElement("a")}}, що були відвідані користувачем.</dd> -</dl> - -<h2 id="Псевдо-елементи">Псевдо-елементи</h2> - -<dl> - <dt><a href="/uk/docs/Web/CSS/Pseudo-elements">Псевдо-елементи</a> представляють собою об'єкти, що не включені до HTML.</dt> - <dd><strong>Приклад:</strong> <code>p::first-line</code> застосовуватиметься лише до першої стрічки елементів {{HTMLElement("p")}}.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br> - Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br> - Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p> - -<h2 id="Див_також">Див також</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li> -</ul> diff --git a/files/uk/web/css/filter/index.html b/files/uk/web/css/filter/index.html deleted file mode 100644 index aca5425654..0000000000 --- a/files/uk/web/css/filter/index.html +++ /dev/null @@ -1,1184 +0,0 @@ ---- -title: filter -slug: Web/CSS/filter -translation_of: Web/CSS/filter ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Опис">Опис</h2> - -<p><span class="seoSummary"><code><font face="Open Sans, Arial, sans-serif">Властивість </font><strong>filter</strong></code> дає можливість застосувати до елементів такі графічні ефекти, як розмиття (blurring), збільшення чіткості (sharpening), зміна кольорів (color shifting). Зазвичай фільтри викорустовуються для налаштування рендерингу зображень, фонів (backgrounds) та границь (borders).</span></p> - -<p>У CSS стандарт включені декілька функцій, які досягають визначених ефектів. Ви можете також посилатися на SVG-фільтр за допомогою посилання(URL) на <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter element</a>.</p> - -<div class="note"><strong>Примітка: </strong>Більш старі версії браузера Windows Internet Explorer (4.0 - 9.0) підтримували нестандартний <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, який з того часу є застарілим.</div> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css">filter: url("filters.svg#filter-id"); -filter: blur(5px); -filter: brightness(0.4); -filter: contrast(200%); -filter: drop-shadow(16px 16px 20px blue); -filter: grayscale(50%); -filter: hue-rotate(90deg); -filter: invert(75%); -filter: opacity(25%); -filter: saturate(30%); -filter: sepia(60%); - -/* Apply multiple filters */ -filter: contrast(175%) brightness(3%); - -/* Global values */ -filter: inherit; -filter: initial; -filter: unset; -</pre> - -<p>З функцією використовуйте наступне:</p> - -<pre class="syntaxbox">filter: <filter-function> [<filter-function>]* | none -</pre> - -<p>Для посилання на SVG {{SVGElement("filter")}} елемент використовуйте наступне:</p> - -<pre class="syntaxbox">filter: url(file.svg#filter-element-id) -</pre> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<p>Приклади використання визначених функцій подаються нижче. Дивіться кожну функцію для конкретного прикладу.</p> - -<pre class="brush: css">.mydiv { filter: grayscale(50%) } - -/* зробить сірим на 50% та розмиє на 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>Приклади використання URL функції з SVG ресурсом наведені нижче.</p> - -<pre class="brush: css">.target { filter: url(#c1); } - -.mydiv { filter: url(commonfilters.xml#large-blur) } -</pre> - -<h2 id="Функції">Функції</h2> - -<p>Для того, щоб використовувати CSS властивість <code>filter</code>, необхідно вказати значення (value) для однієї з наступних функцій. Якщо значення не є валідним, функція повертає "none". За винятком зазначених випадків, функції, які приймають значення, виражені у відсотках (наприклад, 34%), також приймають і ті значення, що виражені десятковим дробом (наприклад, 0.34).</p> - -<h3 id="url()"><code>url()</code></h3> - -<p>Функція url() приймає місцезнаходження XML-файлу, який визначає SVG-фільтр і має містити якір(anchor) до конкретного фільтр-елемента.</p> - -<pre class="brush: css">filter: url(resources.svg#c1) -</pre> - -<h3 id="blur()"><code>blur()</code></h3> - -<p>Розмиття. Застосовує гаусове (Gaussian) розмиття до вхідного зображення. Значення радіусу (‘radius’) встановлює значення стандартного відхилення до гауссової (Gaussian) функції, або на скільки пікселі екрану мають зливатися один з одним. Тому більше значення забеспечить більше розмиття. Якщо жоден параметр не вказаний, використовується значення "0". Параметр визначений, як CSS довжина, але не приймає значень у відсотках.</p> - -<pre class="brush: css">filter: blur(5px) -</pre> - -<div id="blur_example" class="hidden"> -<pre class="brush: html"> <table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > - <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> - </filter> - <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table></pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -webkit-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> - </filter> -</svg></pre> - -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> - -<h3 id="brightness()"><code>brightness()</code></h3> - -<p>Яскравість. Застосовує лінійний множник(мультиплікатор) до вхідного зображення, щоб зробити його більш або менш яскравим. Значення "<code>0%" </code>створить абсолютно чорне зображення. Значення "100%" залишить зображення без змін. Інші значення є лінійними мультиплікаторами, що застосовуються до ефекту. Значення, більші за "100%", дозволяються і дають більш яскраві результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1".</p> - -<pre class="brush: css">filter: brightness(0.5)</pre> - -<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> - </feComponentTransfer> - </filter> -</svg></pre> - -<div id="brightness_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -o-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height:100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> - -<h3 id="contrast()"><code>contrast()</code></h3> - -<p>Контрастність. Налаштовує контраст зображення. Значення "<code>0%"</code> створить абсолютно сіре зображення. Значення "100%" залишить зображення без змін. Значення, більші за "100%", дозволяються і дають більш контрастні результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1". </p> - -<pre class="brush: css">filter: contrast(200%) -</pre> - -<pre class="brush: html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - </feComponentTransfer> - </filter> -</svg> -</pre> - -<div id="contrast_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="2" intercept="-0.5"/> - <feFuncG type="linear" slope="2" intercept="-0.5"/> - <feFuncB type="linear" slope="2" intercept="-0.5"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:contrast(200%); - -webkit-filter:contrast(200%); - -o-filter:contrast(200%); - -ms-filter:contrast(200%); - filter:contrast(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> - -<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> - -<p>Відкидання тіні. Застосовує відкидання тіні до вхідного зображення. Це фактично розмита, зміщена версія альфа-маски вхідного зображення, намальована певним кольором та створена під зображенням. Функція приймає параметр типу <shadow> (визначена у CSS3 Backgrounds), за винятком того, що ключове слово ‘inset’ не дозволене. Дана функція дуже схода на більш укорінену властивість {{cssxref("box-shadow")}}; різниця у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності. Нижче наведені параметри параметра <shadow>.</p> - -<dl> - <dt><code><offset-x></code> <code><offset-y></code> <small>(required)</small></dt> - <dd>Ці два обов'язкові {{cssxref("<length>")}} значення вказують зміщення тіні. <offset-x> визначає горизонтальну відстань. Від’ємні значення розміщують тінь лівіше елемента. <offset-y> визначає вертикальну відстань. Від’ємні значення розміщують тінь вище елемента. Дивіться {{cssxref("<length>")}} можливі одиниці. Якщо обидва значення "0", тінь розміщується за елементом (і може створювати ефект ромиття, якщо вказані <blur-radius> та/або <spread-radius>).</dd> - <dt><code><blur-radius></code> <small>(optional)</small></dt> - <dd>Це необов'язкове третє {{cssxref("<length>")}} значення. Чим більше значення, тим більше розмиття, тим більшою і світлішою стає тінь. Від’ємні значення не дозволені. Якщо значення не визначене, воно буде "0" (межі тіні будуть чіткими).</dd> - <dt><code><spread-radius></code> <small>(optional)</small></dt> - <dd>Це необов'язкове четверте {{cssxref("<length>")}} значення. Додатні значення розширять тінь і зроблять її більшою, а від'ємні - зменшать. Якщо значення не визначено, воно буде "0" (тінь буде мати какий розмір, як зображення). <br> - Примітка: Webkit та, можливо, інші браузери, не підтримують цей четвертий параметр; він не виконається, якщо його додати.</dd> - <dt><code><color></code> <small>(optional)</small></dt> - <dd>Дивіться {{cssxref("<color>")}} значення, щоб дізнатися можливі ключові слова та умовні позначення. Якщо значення не вказано, колір залежить від браузера. У Gecko (Firefox), Presto (Opera) та Trident (Internet Explorer), значення {{cssxref("color")}} властивості використовується. З іншого боку, тінь WebKit є прозорою, тому вона є марою, даремною, якщо значення <color> не вказане.</dd> -</dl> - -<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> - -<pre class="brush: html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> - <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> - <feFlood flood-color="[color]"/> - <feComposite in2="offsetblur" operator="in"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> -</svg> -</pre> - -<div id="shadow_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> - <feOffset dx="16" dy="16"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> - <filter id="drop-shadow2"> - <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> - <feOffset dx="8" dy="10"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> - </svg> - <div> - </td> - <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -o-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3, #img13 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> - -<h3 id="grayscale()"><code>grayscale()</code></h3> - -<p>Конвертує вхідне зображення у відтінках сірого. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" повністю конвертує зображення у відтінки сірого. Значення "0%" залишає зобращення без змін. Значення між "0%" та "100%" є лінійними множниками(мультиплікаторами) ефекта. Якщо парамент ‘amount’ не вказаний, використовується значення "0".</p> - -<pre class="brush: css">filter: grayscale(100%)</pre> - -<div id="grayscale_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"> - <filter id="grayscale"> - <feColorMatrix type="matrix" - values="0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> -</svg><div></td> - <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:grayscale(100%); - -webkit-filter:grayscale(100%); - -o-filter:grayscale(100%); - -ms-filter:grayscale(100%); - filter:grayscale(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> - -<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> - -<p>Зміна відтінків. Застосовує зміну відтінків до вхідного зображення. Значення ‘angle’ визначає кількість градусів на колірному крузі (color circle), які будуть застосовані до вхідного зображення. Значення (0deg) залишає зображення без змін. Якщо параметр ‘angle’ відсутній, використовується значення "0deg". Хоча і не існує максимального значення, ефект значень, більших за "360deg", буде обертатися навколо.</p> - -<pre class="brush: css">filter: hue-rotate(90deg)</pre> - -<div id="huerotate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"> - <filter id="hue-rotate"> - <feColorMatrix type="hueRotate" - values="90"/> - </filter> - <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> -</svg><div></td> - <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:hue-rotate(90deg); - -webkit-filter:hue-rotate(90deg); - -o-filter:hue-rotate(90deg); - -ms-filter:hue-rotate(90deg); - filter:hue-rotate(90deg); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgHueRotate" > - <feColorMatrix type="hueRotate" values="[angle]" /> - <filter /> -</svg></pre> - -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> - -<h3 id="invert()"><code>invert()</code></h3> - -<p>Інвертування. Інвертує зразки (samples) у вхідному зображенні. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%"</code> інвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%"</code> та "<code>100%"</code> є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘<code class="property">amount</code>’ відсутній, використовується значення "<code>0"</code>.</p> - -<pre class="brush: css">filter: invert(100%)</pre> - -<div id="invert_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"> - <filter id="invert"> - <feComponentTransfer> - <feFuncR type="table" tableValues="1 0"/> - <feFuncG type="table" tableValues="1 0"/> - <feFuncB type="table" tableValues="1 0"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> -</svg><div></td> - <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -o-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> - -<h3 id="opacity()"><code>opacity()</code></h3> - -<p>Непрозорість. Застосовує прозорість до вхідного зображення. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%"</code> зображення стає повністю прозорим. Значення "<code>100%"</code> залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Це еквівалентно множенню зразків (samples) зображення на ‘<code class="property">amount</code>’. Якщо параметр ‘amount’ відсутній, використовується значення "1". Ця функція схожа на більш укорінену властивість {{Cssxref("opacity")}}; ріниця полягає у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності.</p> - -<pre class="brush: css">filter: opacity(50%)</pre> - -<div id="opacity_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"> - <filter id="opacity"> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.5"> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> -</svg><div></td> - <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -o-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> - -<h3 id="saturate()"><code>saturate()</code></h3> - -<p>Насичення. Робить зображення більш насиченими. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%</code>" зображення стає повністю ненасиченим. Значення "<code>100%</code>" залишає зображення без змін. Інші значення є лінійними множниками (мультиплікаторами) ефекта. Значення, більші за "<code>100%"</code> дозволяються і забеспечують більш насиченими результатами. Якщо параметр ‘<code class="property">amount</code>’ відсутній, використовується значення "1".</p> - -<pre class="brush: css">filter: saturate(200%)</pre> - -<div id="saturate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"> - <filter id="saturate"> - <feColorMatrix type="saturate" - values="2"/> - </filter> - <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> -</svg><div></td> - <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -o-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> - -<h3 id="sepia()"><code>sepia()</code></h3> - -<p>Сепія. Конвертує зображення до сепії. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%</code>" конвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%</code>" та "<code>100%</code>" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’ відсутній, використовується значення "<code>0</code>".</p> - -<pre class="brush: css">filter: sepia(100%)</pre> - -<div id="sepia_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"> - <filter id="sepia"> - <feColorMatrix type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> -</svg><div></td> - <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -o-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> - -<h2 id="Combining_functions">Combining functions</h2> - -<p>Можна комбінувати будь-яку кількість функцій для маніпулювання рендерингом. Наступні приклади посилюють контрастність та яскравість зображення.</p> - -<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> - -<div id="combination_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -o-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td> - <td>{{ Spec2('Filters 1.0') }}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td> - <td>{{CompatNo}}<sup>[3]</sup></td> - <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>On SVG Elements</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td> - <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> - </td> - </tr> - <tr> - <td>On SVG Elements</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatGeckoDesktop(35)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] У Chrome 18 to 19, функція <code>saturate()</code> приймає тільки цілі десяткові числа та відсоткові значання. Цей баг виправлений у Chrome 20 та наступних.</p> - -<p>[2] До Firefox 34, Gecko виконував тільки <code>{{anch("url()")}}</code> форму властивості <code>filter</code>; так як формування ланцюжка (chaining) тоді не було реалізовано, було дозволено тільки одне <code>url()</code> (або коли <code>layout.css.filters.enabled</code> pref було встановлене як <code>false</code>).</p> - -<p>Функціональні значення <code>filter</code> контролюються <code>layout.css.filters.enabled</code> pref і був доступним, але заборонений за замовчуванням у Firefox 34.</p> - -<p>[3] Internet Explorer з 4.0 по 9.0 виконував нестандартну властивіст <code>filter</code>. Синтаксис сильно відрізняється і не був тут задокументований.</p> - -<p>[4] У даний момент Blink не виконує дану властивість(feature). Дивіться <a href="https://crbug.com/109224">bug 109224</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> - <li>The {{Cssxref("mask")}} property</li> - <li><a class="internal" href="/en-US/docs/Web/SVG">SVG</a></li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li> - <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters">CSS 3 filters</a> Tech Stream article</li> - <li><a class="external" href="http://davidwalsh.name/css-filters">CSS filters</a> By David Walsh</li> -</ul> diff --git a/files/uk/web/css/flex-grow/index.html b/files/uk/web/css/flex-grow/index.html deleted file mode 100644 index 8c70a17578..0000000000 --- a/files/uk/web/css/flex-grow/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: flex-grow -slug: Web/CSS/flex-grow -translation_of: Web/CSS/flex-grow ---- -<div>{{CSSRef}}</div> - -<h2 id="Опис">Опис</h2> - -<p>Властивість <strong><code>flex-grow</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> визначає яку частину вільного простору може зайняти дочірній flex елемент. Ця властивість встановлюється в одиницях відносних до інших контейнерів.</p> - -<p>{{cssinfo}}</p> - -<p>Можете більш детальніше довідатся як користуватись властивостями <strong>flex </strong>з наступної статті <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css">/* <number> values */ -flex-grow: 3; -flex-grow: 0.6; - -/* Global values */ -flex-grow: inherit; -flex-grow: initial; -flex-grow: unset; -</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code><number></code></dt> - <dd>Дивись {{cssxref("<number>")}}. Значення менші за <code>0</code> є недійсними.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Приклад">Приклад</h2> - -<h3 id="HTML">HTML</h3> - -<div id="Live_Sample"> -<pre class="brush: html"><h4>This is a Flex-Grow</h4> -<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> - <div class="box1" style="background-color:brown;">D</div> - <div class="box1" style="background-color:lightgreen;">E</div> - <div class="box" style="background-color:brown;">F</div> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#content { - -ms-box-orient: horizontal; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -moz-flex; - display: -webkit-flex; - display: flex; - - -webkit-justify-content: space-around; - justify-content: space-around; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-align-items: stretch; - align-items: stretch; -} - -.box { - flex-grow: 1; - border: 3px solid rgba(0,0,0,.2); -} - -.box1 { - flex-grow: 2; - border: 3px solid rgba(0,0,0,.2); -} -</pre> -</div> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample('Example', '750px', '400px', '', 'Web/CSS/flex-grow')}}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>11</td> - <td>12.10</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>< 0 animate</td> - <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> - <td>49.0</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>Edge</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>12.10</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>< 0 animate</td> - <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр <code>layout.css.flexbox.enabled на true </code>у файлі налаштувань about:config.</p> - -<p>В додаток до непрефіксної підтримки, Gecko 48.0 {{geckoRelease("48.0")}} додана підтримка для <code>-webkit префіксних варіацій властивостей для підтримки веб-сумісності, для цього потрібно змінити властивість layout.css.prefixes.webkit на true, яка за замовченням встановлена - false. Але з релізу </code>Gecko 49.0 {{geckoRelease("49.0")}} ця властивість набуває значення true за замовченням.</p> - -<p>[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на <code>0</code><code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>, <a href="https://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> -</ul> diff --git a/files/uk/web/css/flex/index.html b/files/uk/web/css/flex/index.html deleted file mode 100644 index f2205b145d..0000000000 --- a/files/uk/web/css/flex/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: flex -slug: Web/CSS/flex -tags: - - CSS - - CSS Flexible Boxes - - CSS Властивість - - flexbox -translation_of: Web/CSS/flex ---- -<div>{{CSSRef}}</div> - -<h2 id="Загальний_огляд">Загальний огляд</h2> - -<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> параметр <strong>flex </strong>є <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">скороченим записом</a> властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.</p> - -<p>{{cssinfo}}</p> - -<p>Перегляньте <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS контейнерів</a> для більш детальної інформації та опису властивостей.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="brush:css">/* 0 0 auto */ -flex: none; - -/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */ -flex: 2; - -/* Одне значення, width/height: flex-basis */ -flex: 10em; -flex: 30px; -flex: auto; -flex: content; - -/* Два значення: flex-grow | flex-basis */ -flex: 1 30px; - -/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */ -flex: 2 2; - -/* Три значення: flex-grow | flex-shrink | flex-basis */ -flex: 2 2 10%; - -/* Глобальні значення */ -flex: inherit; -flex: initial; -flex: unset; -</pre> - -<h3 id="Values" name="Values">Значення</h3> - -<dl> - <dt><code><'flex-grow'></code></dt> - <dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">ширину</a> </code>flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd> - <dt><code><'flex-shrink'></code></dt> - <dd>Визначає <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> flex елемента. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd> - <dt><code><'flex-basis'></code></dt> - <dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">базис</a> </code>flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри <code>width і</code> <code>height</code>. Значення <code>0</code> має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення <code>0%,</code> коли воно не вказується явно.</dd> - <dt><code>none</code></dt> - <dd>Ключове слово, котре по значенню рівне <code>0 0 auto</code>.</dd> - <dt> - <h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - </dt> -</dl> - -{{csssyntax}} - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: css">#flex-container { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; -} - -#flex-container > .flex-item { - -webkit-flex: auto; - flex: auto; -} - -#flex-container > .raw-item { - width: 5rem; -} -</pre> - -<pre class="brush: html"><div id="flex-container"> - <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> - <div class="raw-item" id="raw">Raw box</div> -</div> -</pre> - -<div class="hidden"> -<pre class="brush: js">var flex = document.getElementById("flex"); -var raw = document.getElementById("raw"); -flex.addEventListener("click", function() { - raw.style.display = raw.style.display == "none" ? "block" : "none"; -}); -</pre> - -<pre class="brush: css">#flex-container { - width: 100%; - font-family: Consolas, Arial, sans-serif; -} - -#flex-container > div { - border: 1px solid #f00; - padding: 1rem; -} - -#flex-container > .raw-item { - border: 1px solid #000; -} -</pre> -</div> - -<h3 id="Результат">Результат</h3> - -<p>{{EmbedLiveSample('Example','100%','60')}}</p> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Специфікація</th> - <th>Стан</th> - <th>Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Загальне визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Підтримка</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("20.0")}}<br> - {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> - 11.0<sup>[3]</sup></td> - <td>12.10</td> - <td> - <p>6.1{{property_prefix("-webkit")}}<br> - 9.0</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Підтримка</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatUnknown}}</td> - <td>4.4</td> - <td>11</td> - <td>12.10</td> - <td>7.1{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням <code>about:config</code> пунктом <code>layout.css.flexbox.enabled</code>, котрий по замовчуванню - <code>false</code>. </p> - -<p>[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.</p> - -<p>В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку <code>-webkit</code> префіксованої версії властивості з огляду на веб-сумісність з налаштуванням <code>layout.css.prefixes.webkit</code>, котре по замовчуванню дорівнює <code>false.</code> Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює <code>true</code>.</p> - -<p>[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> у частині <code>flex </code>синтаксису, що відповідає за властивість <code>flex-basis</code>. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> задля більш детального опису. Визначення <code>flex</code> зі значенням без одиниці виміру у частині, що відповідає за <code>flex-basis</code> вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за <code>flex-basis</code>, скороченого запису <code>flex</code>. Перегляньте <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> задля більш детільного опису.</p> - -<h2 id="See_also" name="See_also">Також варто переглянути</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS блоків</a></li> -</ul> diff --git a/files/uk/web/css/font-smooth/index.html b/files/uk/web/css/font-smooth/index.html deleted file mode 100644 index 97344e55bf..0000000000 --- a/files/uk/web/css/font-smooth/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: font-smooth -slug: Web/CSS/font-smooth -translation_of: Web/CSS/font-smooth ---- -<div>{{ CSSRef }} {{ Non-standard_header }}</div> - -<p><strong><code>font-smooth</code></strong> <a href="/en/CSS" title="CSS">CSS</a> властивість контролює застосування антиалайзингу коли відбувається рендеринг шрифта.</p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{ Xref_cssinitial() }}</strong></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><strong>Застосовується до</strong></td> - <td>всіх елементів і згенерованого контенту</td> - </tr> - <tr> - <td><strong>{{ Xref_cssinherited() }}</strong></td> - <td>yes</td> - </tr> - <tr> - <td><strong>Відсотки</strong></td> - <td>відносно розмірів шрифта батьківського елемента</td> - </tr> - <tr> - <td><strong>Media</strong></td> - <td>{{ Xref_cssvisual() }}</td> - </tr> - <tr> - <td><strong>{{ Xref_csscomputed() }}</strong></td> - <td>як зазначено в специфікації</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css">/* Keyword values */ -font-smooth: auto; -font-smooth: never; -font-smooth: always; - -/* <length> value */ -font-smooth: 2em; -</pre> - -<div class="note"> -<p><strong>WebKit</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-webkit-font-smoothing</code></strong>. <span class="tlid-translation translation" lang="uk"><span title="">Це працює тільки на</span></span> Mac OS X/macOS.</p> - -<ul> - <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">веб-переглядач працює в даному режимі за замовчуванням (Використовує субпіксель для згладжування, коли він доступний)</span></span></li> - <li><code>none</code> - <span class="tlid-translation translation" lang="uk"><span title="">відсутність згладжування шрифту;</span> <span title="">відображення тексту з нерівними гострими краями.</span></span></li> - <li><code>antialiased</code> - згладжує текст на піксельному рівні, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li> - <li><code>subpixel-antialiased</code> - на більшості не Retina дисплеях, результатом буде найчіткіший текст.</li> -</ul> -</div> - -<div class="note"> -<p><strong>Firefox</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-moz-osx-font-smoothing</code></strong>. Це працює тільки на Mac OS X/macOS.</p> - -<ul> - <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">дозволяє браузеру вибирати оптимізацію для вирівнювання шрифту, як правило</span></span> <code>grayscale</code>.</li> - <li><code>grayscale</code> - рендер тексту з використанням відтінків сірого, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li> -</ul> -</div> - -<h2 id="Специфікації">Специфікації</h2> - -<p>В ранніх версіях згладжування (2002) шрифтів <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts було присутнє</a>, але на даний момент <code>font-smooth</code> його було видалено і ця специфікація не відповідає стандартам.</p> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних.</span> <span title="">Якщо ви хочете зробити свій внесок у дані, будь ласка, ознайомтесь</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам pull запит.</div> - -<p>{{Compat("css.properties.font-smooth")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li> - <li><a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li> -</ul> diff --git a/files/uk/web/css/font-weight/index.html b/files/uk/web/css/font-weight/index.html deleted file mode 100644 index b65007bb13..0000000000 --- a/files/uk/web/css/font-weight/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/font-weight -translation_of: Web/CSS/font-weight ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>font-weight</code></strong> <a href="/uk/docs/CSS" title="CSS">CSS</a> property specifies the weight (or boldness) of the font. The font weights available to you will depend on the {{cssxref("font-family")}} you are using. Some fonts are only available in <code>normal</code> and <code>bold</code>.</p> - -<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers">/* Keyword values */ -font-weight: normal; -font-weight: bold; - -/* Keyword values relative to the parent */ -font-weight: lighter; -font-weight: bolder; - -/* Numeric keyword values */ -font-weight: 100; -font-weight: 200; -font-weight: 300; -font-weight: 400; -font-weight: 500; -font-weight: 600; -font-weight: 700; -font-weight: 800; -font-weight: 900; - -/* Global values */ -font-weight: inherit; -font-weight: initial; -font-weight: unset; -</pre> - -<p>The <code>font-weight</code> property is specified using a single keyword value from the list below.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>Normal font weight. Same as <code>400</code>.</dd> - <dt><code>bold</code></dt> - <dd>Bold font weight. Same as <code>700</code>.</dd> - <dt><code>lighter</code></dt> - <dd>One font weight lighter than the parent element (among the available weights of the font).</dd> - <dt><code>bolder</code></dt> - <dd>One font weight heavier than the parent element (among the available weights of the font).</dd> - <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt> - <dd>Numeric font weights for fonts that provide more than just <code>normal</code> and <code>bold</code>.</dd> -</dl> - -<h3 id="Fallback_weights">Fallback weights</h3> - -<p>If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:</p> - -<ul> - <li>If a weight greater than <code>500</code> is given, the closest available heavier weight is used (or, if there is none, the closest available lighter weight).</li> - <li>If a weight less than <code>400</code> is given, the closest available lighter weight is used (or, if there is none, the closest available heavier weight).</li> - <li>If a weight of exactly <code>400</code> is given, then <code>500</code> is used. If <code>500</code> is not available, then the heuristic for font weights less than 400 is used.</li> - <li>If a weight of exactly <code>500</code> is given, then <code>400</code> is used. If <code>400</code> is not available, then the heuristic for font weights less than 400 is used.</li> -</ul> - -<p>This means that for fonts that provide only <code style="font-style: normal;">normal</code> and <code style="font-style: normal;">bold</code>, <code style="font-style: normal;">100</code>-<code>500</code> are <code>normal</code>, and <code style="font-style: normal;">600</code>-<code style="font-style: normal;">900</code> are <code>bold</code>.</p> - -<h3 id="Meaning_of_relative_weights">Meaning of relative weights</h3> - -<p>When <code>lighter</code> or <code>bolder</code> is specified, the following chart shows how the absolute font weight of the element is determined:</p> - -<table class="standard-table"> - <thead> - <tr> - <th>Inherited value</th> - <th><code>bolder</code></th> - <th><code>lighter</code></th> - </tr> - </thead> - <tbody> - <tr> - <th>100</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>200</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>300</th> - <td>400</td> - <td>100</td> - </tr> - <tr> - <th>400</th> - <td>700</td> - <td>100</td> - </tr> - <tr> - <th>500</th> - <td>700</td> - <td>100</td> - </tr> - <tr> - <th>600</th> - <td>900</td> - <td>400</td> - </tr> - <tr> - <th>700</th> - <td>900</td> - <td>400</td> - </tr> - <tr> - <th>800</th> - <td>900</td> - <td>700</td> - </tr> - <tr> - <th>900</th> - <td>900</td> - <td>700</td> - </tr> - </tbody> -</table> - -<h3 id="Common_weight_name_mapping">Common weight name mapping</h3> - -<p>The numerical values (<code>100</code> to <code>900</code>) roughly correspond to the following common weight names:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Value</th> - <th scope="col">Common weight name</th> - </tr> - </thead> - <tbody> - <tr> - <td>100</td> - <td>Thin (Hairline)</td> - </tr> - <tr> - <td>200</td> - <td>Extra Light (Ultra Light)</td> - </tr> - <tr> - <td>300</td> - <td>Light</td> - </tr> - <tr> - <td>400</td> - <td>Normal (Regular)</td> - </tr> - <tr> - <td>500</td> - <td>Medium</td> - </tr> - <tr> - <td>600</td> - <td>Semi Bold (Demi Bold)</td> - </tr> - <tr> - <td>700</td> - <td>Bold</td> - </tr> - <tr> - <td>800</td> - <td>Extra Bold (Ultra Bold)</td> - </tr> - <tr> - <td>900</td> - <td>Black (Heavy)</td> - </tr> - </tbody> -</table> - -<h3 id="Interpolation">Interpolation</h3> - -<p>A <code>font-weight</code> value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.</p> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">Examples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> - Alice was beginning to get very tired of sitting by her sister on the - bank, and of having nothing to do: once or twice she had peeped into the - book her sister was reading, but it had no pictures or conversations in - it, 'and what is the use of a book,' thought Alice 'without pictures or - conversations?' -</p> - -<div>I'm heavy<br/> - <span>I'm lighter</span> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css">/* Set paragraph text to be bold. */ -p { - font-weight: bold; -} - -/* Set div text to two steps heavier than - normal but less than a standard bold. */ -div { - font-weight: 600; -} - -/* Set span text to be one step lighter - than its parent. */ -span { - font-weight: lighter; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples","400","300")}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Defines <code>font-weight</code> as animatable.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.properties.font-weight")}}</p> diff --git a/files/uk/web/css/grid-template-areas/index.html b/files/uk/web/css/grid-template-areas/index.html deleted file mode 100644 index 472a754d14..0000000000 --- a/files/uk/web/css/grid-template-areas/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: grid-template-areas -slug: Web/CSS/grid-template-areas -translation_of: Web/CSS/grid-template-areas ---- -<p><strong><code>grid-template-areas</code></strong> CSS властивість, що визначає іменовані {{glossary("grid areas")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> - - - -<p>Ці області не відносяться до певного грід-елемента, але можуть посилатися з властивостей грід-розташування{{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, та їх скорочень {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, і {{cssxref("grid-area")}}.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Keyword value */ -grid-template-areas: none; - -/* <string> values */ -grid-template-areas: "a b"; -grid-template-areas: "a b b" - "a c d"; - -/* Global values */ -grid-template-areas: inherit; -grid-template-areas: initial; -grid-template-areas: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Грід-контейнер не визначає жодні іменовані грід-області.</dd> - <dt><code>{{cssxref("<string>")}}+</code></dt> - <dd>Ряд створюється для кожного окремого рядка, а колонка для кожної клітинки рядка. Декілька іменованих клітинок у рядках та поміж ними створюють одну іменовану грід-область, що об'єднує відповідні клітинки. Оголошення непридатне, якщо ці клітинки утворюють прямокутник.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example">Example</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><section id="page"> - <header>Header</header> - <nav>Navigation</nav> - <main>Main area</main> - <footer>Footer</footer> -</section></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css; highlight[5-7]">#page { - display: grid; - width: 100%; - height: 250px; - grid-template-areas: "head head" - "nav main" - "nav foot"; - grid-template-rows: 50px 1fr 30px; - grid-template-columns: 150px 1fr; -} - -#page > header { - grid-area: head; - background-color: #8ca0ff; -} - -#page > nav { - grid-area: nav; - background-color: #ffa08c; -} - -#page > main { - grid-area: main; - background-color: #ffff64; -} - -#page > footer { - grid-area: foot; - background-color: #8cffa0; -} -</pre> - -<h3 id="Result">Result</h3> - -<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.properties.grid-template-areas")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> - <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> - <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> -</ul> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/uk/web/css/index.html b/files/uk/web/css/index.html deleted file mode 100644 index 50e7a47f9c..0000000000 --- a/files/uk/web/css/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: CSS -slug: Web/CSS -tags: - - CSS - - CSS3 - - Layout - - Reference - - Веб - - Дизайн - - Стиль - - ЦСС - - каскадна - - оформлення - - сайтів - - сторінок - - таблиця -translation_of: Web/CSS ---- -<p><span class="seoSummary"><strong>Каскадні таблиці стилів</strong> (<strong>CSS</strong>) - це мова стилів, яка використовується для опису представлення документу, написаного на <a href="/uk/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> чи <a href="/uk/docs/XML">XML</a> (включаючи XML діалекти такі, як <a href="/uk/docs/SVG">SVG</a> або <a href="/uk/docs/XHTML">XHTML</a>). CSS описує як елементи повинні відображатися на екрані, на папері, при озвученні, або на інших пристроях.</p> - -<p>CSS є одною з основних мов <em>відкритої мережі</em> і має стандартизовану <a class="external" href="http://w3.org/Style/CSS/#specs">W3C специфікацію</a>. Розроблена по рівнях, CSS1 в даний час застаріла, CSS2.1 є рекомендованою, і CSS3, яка тепер розділена на більш дрібні модулі та розвивається шляхом стандартизації.</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>CSS Посилання</span> - - <p><a href="/uk/docs/Web/CSS/Reference">Ексклюзивні посилання</a> для загартованих Web розробників, які описують кожний параметр і поняття CSS.</p> - </li> - <li><span>CSS Посібник</span> - <p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> складається з безлічі посібників, щоб підняти ваш рівень з початкового, до такого, на якому ви будете себе комфортно почувати в CSS, охоплюючи всі основні принципи.</p> - </li> - <li><span>Знайомство з CSS</span> - <p>Якщо ви початківець у веб програмуванні, переконайтеся, що ви прочитали нашу статтю <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS Основи</a>, щоб дізнатися що таке є CSS і як їх використовувати.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="Посібники">Посібники</h2> - -<p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> має декілька модулів, які дозволяють вивчити CSS з нуля — знання мови не вимагається.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ в CSS</a></dt> - <dd>Цей модуль дозволяє вам почати вивчення з базових понять як CSS працює, включаючи селектори і параметри, написання правил CSS, застосування CSS до HTML, як вказати довжину, колір та інші одиниці виміру в CSS, каскади і успадкування, основи блочної моделі та відлагоджування CSS.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt> - <dd>В даному модулі ми розглянемо основи стилізації тексту, включаючи налаштування шрифтів, товщини, курсиву, відстані між рядками і буквами, а також застосування тіней та інших можливостей стилізації тексту. Ми розглянемо в даному модулі використання власних шрифтів на вашій веб-сторінці, і стилізацію списків і посилань.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Стилізація блоків</a></dt> - <dd>Далі ми розглянемо стилізацію блоків, один з базових кроків у напрямку розбивання веб-сторінки на блоки. У данаму модулі ми підсумуємо блокову модель і тоді розглянемо методи контролю блоків, застосовуючи внутрішні відступи (padding), рамки (borders) і зовнішні відступи, застосування власних заливок фону, картинок та інших можливостей, і такої можливості, як падіння тіней і фільтрів на блоках.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">Макети CSS</a></dt> - <dd>До цього моменту ми вже розглянули базові поняття CSS, як стилізувати текст, я як стилізувати і маніпулювати блоками, щоб ваш контент поміщався в середину даних блоків. Тепер час розглянути розташування ваших блоків у правильному місці, по відношенню до точки огляду, і відносно один одного. Ми розкрили необхідні передумови, тому тепер ми можемо заглибитися в шаблони CSS детальніше, подивитися на налаштування для різних дисплеїв, традиційні методи шаблонів, включаючи плавання елементів по сторінці (float) і позиціонування (positioning), і нові сучасні інструменти для шаблонів такі, як флексбокс (flexbox).</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Посилання">Посилання</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS Посилання</a>: Вичерпний довідник для досвідчених веб-розробників, який описує кожний параметр і кожне поняття CSS.</li> - <li>CSS ключові поняття: - <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax">Синтаксис і форми даної мови</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity">Особливість</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance">успадкування</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/box_model">Блочна модель</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing">margin collapse</a></li> - <li>Контексти <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">форматування блоку</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value">Початкові</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">обчислені</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">фактичні</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value">ті, які використовуються</a> значення</li> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">CSS скорочені параметри</a></li> - </ul> - </li> -</ul> - -<h2 id="Інструменти_для_CSS_розробки">Інструменти для CSS розробки</h2> - -<ul> - <li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Сервіс Валідації</a> перевіряє чи CSS є валідним. Даний сервіс на <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> робить те ж саме. Це безцінні інструменти розробки.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox інструменти розробки</a> дозволяють переглядати і редагувати наживо CSS на сторінці за допомогою <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Iнспектора</a> і інструментів <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Редагування Стилів</a>.</li> - <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug розширення</a> для Firefox, це популярне розширення, яке дозволяє наживо редагувати CSS на переглянутих сайтах. Дуже практично тестувати деякі зміни, хоча це розширення робить набагато більше.</li> - <li><a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer розширення</a> для Firefox також дозволяє переглядати і наживо редагувати CSS на переглянутих сайтах. Простіше ніж Firebug, хоча й має менше можливостей.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools">Miscellaneous CSS інструменти.</a></li> -</ul> -</div> -</div> -</section> - -<h2 id="Дивитися_також">Дивитися також</h2> - -<ul> - <li>Mozilla's <a href="/uk/Learn/CSS">Розділ вивчення CSS</a></li> - <li>Веб мови CSS часто застосовуються до: <a href="/uk/docs/HTML">HTML</a>, <a href="/uk/docs/SVG">SVG</a>, <a href="/uk/docs/XHTML">XHTML</a> і <a href="/uk/docs/XML">XML</a>.</li> - <li>Технології Mozilla, які широко використовують CSS: <a href="/uk/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/uk/Firefox">Firefox</a>, і <a href="/uk/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/uk/docs/Extensions">розширення</a> і <a href="/uk/Add-ons/Themes">теми</a>.</li> -</ul> diff --git a/files/uk/web/css/layout_cookbook/index.html b/files/uk/web/css/layout_cookbook/index.html deleted file mode 100644 index 0af6191a71..0000000000 --- a/files/uk/web/css/layout_cookbook/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Кулінарна книга з CSS розмітки -slug: Web/CSS/Layout_cookbook -translation_of: Web/CSS/Layout_cookbook -original_slug: Web/CSS/Розмітка_кулінарна-книга ---- -<div>{{CSSRef}}</div> - -<p class="summary">The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are new to CSS layout then you might first like to take a look at our <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, as this will give you the basic grounding you need to make use of the recipes here.</p> -</div> - -<h2 id="The_Recipes">The Recipes</h2> - -<table class="standard-table" style="height: 543px; width: 1188px;"> - <thead> - <tr> - <th scope="col">Recipe</th> - <th scope="col">Description</th> - <th scope="col">Layout Methods</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td> - <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td> - <td>When to choose multi-column layout, flexbox or grid for your columns.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td> - <td>How to center an item horizontally and vertically.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td> - <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td> - <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td> - <td>A navigation pattern where some links are visually separated from the others.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td> - <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td> - <td>A list of items with a badge to display a count.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td> - <td>Links to pages of content (such as search results).</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td> - <td>A card component, which displays in a grid of cards.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td> - <td>For aligning grid content within a central wrapper, while also allowing items to break out.</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td> - </tr> - </tbody> -</table> - -<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2> - -<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p> diff --git a/files/uk/web/css/layout_mode/index.html b/files/uk/web/css/layout_mode/index.html deleted file mode 100644 index 504d11adc7..0000000000 --- a/files/uk/web/css/layout_mode/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Схема компонування -slug: Web/CSS/Layout_mode -tags: - - CSS - - Компонування - - Розмітка - - Розташування -translation_of: Web/CSS/Layout_mode -original_slug: Web/CSS/Схема_компонування ---- -<div><strong>Схема компонування</strong> (layout mode) в <a href="/en-US/docs/Web/CSS">CSS</a> являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:</div> - -<ul> - <li><em>Блокове компонування</em> (block), призначене для розмітки документів. Ця схема має відповідні засоби, як-от можливість зробити елементи <em><a href="/uk/docs/Web/CSS/float">рухомими</a></em> (плаваючими) або скомпонувати їх в <em><a href="/uk/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">кілька стовпчиків</a></em>.</li> - <li><em>Рядкове компонування</em> (inline), призначене насамперед для розмітки тексту.</li> - <li><em>Табличне компонування</em>, призначене для розмітки таблицею.</li> - <li><em><a href="/uk/docs/Web/CSS/position#Види_розташування">Компонування розміщенням</a></em> (positioned), призначене для застосування до елементів, що не надто взаємодіють з іншими.</li> - <li><em><a href="/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Компонування flexbox</a></em>, призначене для створення складної розмітки сторінок, які можна плавно масштабувати.</li> - <li><em><a href="/uk/docs/Web/CSS/CSS_Grid_Layout">Компонування сіткою</a></em>, призначене для розташування елементів відносно нерухомої сітки. {{experimental_inline}}</li> -</ul> - -<div class="note"> -<p><strong>Зауваження:</strong> Не всі <a href="/en-US/docs/Web/CSS/Reference">властивості CSS</a> застосовні до всіх <em>схем компонування</em>. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.</p> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{CSS_key_concepts}}</li> -</ul> diff --git a/files/uk/web/css/linear-gradient()/index.html b/files/uk/web/css/linear-gradient()/index.html deleted file mode 100644 index cf11a60ebc..0000000000 --- a/files/uk/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -translation_of: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><strong><code>linear-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу {{CSSxRef("<gradient>")}} , що є спеціальним видом {{CSSxRef("<image>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Як і будь-який градієнт, лінійний градієнт не має внутрішніх розмірів;</span> <span title="">тобто він не має природного або бажаного розміру, а також кращого співвідношення.</span> <span title="">Його розмір буде відповідати розміру елемента, до якого він застосовується.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб створити лінійний градієнт, який повторюється так, щоб заповнити його контейнер, скористайтеся функцією </span></span> {{CSSxRef("repeating-linear-gradient")}}.</p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки</span></span> <code><gradient></code> <span class="tlid-translation translation" lang="uk"><span title="">належить до типу даних</span></span> <code><image></code>, <span class="tlid-translation translation" lang="uk"><span title="">вони можуть використовуватися лише там, де можна використовувати</span></span> <code><image></code>. <span class="tlid-translation translation" lang="uk"><span title="">З цієї причини </span></span><code>linear-gradient()</code> не працюватиме там де застосовуються такі властивості як {{CSSxRef("background-color")}} і інших властивостях, що використовують тип даних {{CSSxRef("<color>")}}.</p> - -<h2 id="Композиція_лінійного_градієнту">Композиція лінійного градієнту</h2> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Лінійний градієнт визначається віссю - градієнтною лінією та двома або більше точками зупинки кольорів.</span> <span title="">Кожна точка на осі - виразний колір;</span> <span title="">щоб створити плавний градієнт, функція</span></span> <code>linear-gradient()</code> <span class="tlid-translation translation" lang="uk"><span title="">малює серію кольорових ліній, перпендикулярних лінії градієнта, кожна з яких відповідає кольору точки, де вона перетинає лінію градієнта.</span></span></p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Лінія градієнта визначається центром коробки, що містить зображення градієнта, і кутом.</span> <span title="">Кольори градієнта визначаються двома або більше точками: початковою точкою, кінцевою точкою та між ними необов’язковими кольоровими точками зупинки.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Початковою точкою є місце на лінії градієнта, де починається перший колір.</span> <span title="">Кінцевою точкою є точка, в якій закінчується останній колір.</span> <span title="">Кожна з цих двох точок визначається перетином лінії градієнта з перпендикулярною лінією, що проходить від кута коробки, який знаходиться в одному квадраті.</span> <span title="">Кінцеву точку можна просто зрозуміти як симетричну точку відліку.</span> <span title="">Ці дещо складні визначення призводять до цікавого ефекту, який іноді називають магічними кутами: кути, найближчі до початкової та кінцевої точок, мають той же колір, що і їхні відповідні початкові або кінцеві точки.</span></span></p> - -<h3 id="Налаштування_градієнтів"><span class="tlid-translation translation" lang="uk"><span title="">Налаштування градієнтів</span></span></h3> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Додавши більше точок зупинки кольорів у лінії градієнта, ви можете створити модифікований перехід між декількома кольорами.</span> <span title="">Позицію зупинки кольору можна чітко визначити, використовуючи</span></span> {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">або </span></span> {{CSSxRef("<percentage>")}}. <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви не вказали розташування кольору, він розміщується на півдорозі між тим, що йому передує, і тим, що слідує за ним.</span> <span title="">Наступні два градієнти рівнозначні.</span></span></p> - -<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.</p> - -<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо дві або більше кольорових зупинки знаходяться в одному місці, переходом буде суцільна лінія між першим і останнім кольорами, задекларованими в цьому місці.</span></span> </p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки повинні бути вказані у порядку зростання.</span> <span title="">Подальші зупинки кольорів з меншим значенням замінять значення попередньої зупинки кольору, створюючи жорсткий перехід.</span> <span title="">Наступні зміни від червоного до жовтого на позначці 30%, а потім переходи від жовтого до синього понад 35% градієнта</span></span></p> - -<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Допускається багатопозиційна зупинка кольору.</span> <span title="">Колір можна оголосити двома суміжними зупинками кольорів, задекларувавши обидві позиції в CSS.</span> <span title="">Наступні три градієнти еквівалентні:</span></span></p> - -<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням, якщо немає кольору із зупинкою 0%, перший заявлений колір буде в цій точці.</span> <span title="">Аналогічно, останній колір буде продовжуватись до позначки 100%, або буде на позначці 100%, якщо на останній зупинці не було оголошено жодної довжини.</span></span></p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="language-css" id="css">/* A gradient tilted 45 degrees, - starting blue and finishing red */ -linear-gradient(45deg, blue, red); - -/* A gradient going from the bottom right to the top left corner, - starting blue and finishing red */ -linear-gradient(to left top, blue, red); - -/* Color stop: A gradient going from the bottom to top, - starting blue, turning green at 40% of its length, - and finishing red */ -linear-gradient(0deg, blue, green 40%, red); - -/* Color hint: A gradient going from the left to right, - starting red, getting to the midpoint color - 10% of the way across the length of the gradient, - taking the rest of the 90% of the length to change to blue */ -linear-gradient(.25turn, red, 10%, blue); - -/* Multi-position color stop: A gradient tilted 45 degrees, - with a red bottom-left half and a blue top-right half, - with a hard line where the gradient changes from red to blue */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Позиція стартової точки градієнта. Якщо її вказано починається зі слова <code>to</code> і до двох ключових слів: <span class="tlid-translation translation" lang="uk"><span title="">одне вказує горизонтальну сторону</span></span> (<code>left</code> or <code>right</code>), а інше вертикальну сторону (<code>top</code> or <code>bottom</code>). <span class="tlid-translation translation" lang="uk"><span title="">Порядок бічних ключових слів не має значення.</span> <span title="">Якщо не вказано, він за замовчуванням буде </span></span> <code>to bottom</code> .</dd> - <dd>Значення <code>to top</code>, <code>to bottom</code>, <code>to left</code>, і <code>to right</code> еквівалентні <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, і <code>90deg</code>, відповідно. Інші значення конвертуються в значення кутів.</dd> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Кут нахилу лінії градієнта</span></span> . <span class="tlid-translation translation" lang="uk"><span title="">Значення</span></span> <code>0deg</code> еквівалентне <code>to top</code>; <span class="tlid-translation translation" lang="uk"><span title="">зростаючі значення обертаються за годинниковою стрілкою</span></span> .</dd> - <dt><code><linear-color-stop></code></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки</span></span> {{CSSxRef("<color>")}} значення, <span class="tlid-translation translation" lang="uk"><span title="">з подальшим одним або двома опціональними положеннями точок зупинки</span></span>, ( <span class="tlid-translation translation" lang="uk"><span title="">кожен з яких є або</span></span> {{CSSxRef("<percentage>")}} або {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">по осі градієнта</span></span> ).</dd> - <dt><code><color-hint></code></dt> - <dd>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> - <dd> - <div class="note"> - <p><strong>Примітка:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">linear-gradient( - [ <a href="/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [ left | right ] || [ top | bottom ] - and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Градієнт_під_кутом_45_градусів"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт під кутом 45 градусів</span></span></h3> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(45deg, red, blue); -}</pre> - -<p>{{EmbedLiveSample("Градієнт_під_кутом_45_градусів", 120, 120)}}</p> - -<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(135deg, orange, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p> - -<h3 id="Градієнт_з_багатопозиційними_точками_зупинки"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт з багатопозиційними точками зупинки</span></span></h3> - -<p>У цьому прикладі використовуються багатопозиційні кольорові зупинки, причому сусідні кольори мають однакове значення стоп кольору, створюючи смугастий ефект.</p> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Градієнт_з_багатопозиційними_точками_зупинки", 120, 120)}}</p> - -<div class="note"> -<p><strong>Примітка:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p> -</div> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Adds interpolation hints.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних</span></span> . If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li> - <li>Other gradient functions: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/uk/web/css/mozilla_extensions/index.html b/files/uk/web/css/mozilla_extensions/index.html deleted file mode 100644 index 649ee1de1a..0000000000 --- a/files/uk/web/css/mozilla_extensions/index.html +++ /dev/null @@ -1,680 +0,0 @@ ---- -title: CSS-розширення для Mozilla -slug: Web/CSS/Mozilla_Extensions -tags: - - CSS-розширення для Mozilla - - 'CSS: розширення Mozilla' - - нестандартні властивості - - нестандартні властивості CSS для Mozilla -translation_of: Web/CSS/Mozilla_Extensions ---- -<div>{{CSSRef}}</div> - -<div></div> - -<p class="summary"><span class="seoSummary">У таких додатках Mozilla, як Firefox, підтримується ряд спеціальних <strong>розширень Mozilla</strong> до </span><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></strong>,<span class="seoSummary"> включаючи властивості, значення, псевдо-елементи і псевдо-класи, at-правила і медіа-запити. Ці розширення мають префікс</span><code style="white-space: nowrap;">-moz-</code>.</p> - -<h2 id="Властивості_і_псевдокласи_тільки_для_Mozilla_уникайте_використання_на_веб-сайтах">Властивості і псевдокласи тільки для Mozilla (уникайте використання на веб-сайтах)</h2> - -<div class="blockIndicator note"> -<p><strong>Нотаток:</strong> Ці властивості і псевдокласи працюватимуть тільки в додатках Mozilla, таких як Firefox, і не працюють на стандартних технологічних схемах. Деякі з них можуть застосовуватися тільки до елементів XUL.</p> -</div> - -<div class="index"> -<h3 id="B">B</h3> - -<ul> - <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-box-align")}}</li> - <li>{{CSSxRef("-moz-box-direction")}}</li> - <li>{{CSSxRef("-moz-box-flex")}}</li> - <li>{{CSSxRef("-moz-box-ordinal-group")}}</li> - <li>{{CSSxRef("-moz-box-orient")}}</li> - <li>{{CSSxRef("-moz-box-pack")}}</li> -</ul> - -<h3 id="C–I">C–I</h3> - -<ul> - <li>{{CSSxRef("-moz-context-properties")}}</li> - <li>{{CSSxRef("-moz-float-edge")}}</li> - <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li> - <li>{{CSSxRef("-moz-image-region")}}</li> -</ul> - -<h3 id="O">O</h3> - -<ul> - <li>{{CSSxRef("-moz-orient")}}</li> - <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li> - <li>{{CSSxRef("-moz-outline-radius")}}</li> - <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li> - <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li> - <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li> - <li>{{CSSxRef("-moz-outline-radius-topright")}}</li> - <li>{{CSSxRef("overflow-clip-box")}}</li> - <li>{{CSSxRef("overflow-clip-box-block")}}</li> - <li>{{CSSxRef("overflow-clip-box-inline")}}</li> -</ul> - -<h3 id="S–Z">S–Z</h3> - -<ul> - <li>{{CSSxRef("-moz-stack-sizing")}}</li> - <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-user-focus")}}</li> - <li>{{CSSxRef("-moz-user-input")}}</li> - <li>{{CSSxRef("-moz-user-modify")}}</li> - <li>{{CSSxRef("-moz-window-dragging")}}</li> - <li>{{CSSxRef("-moz-window-shadow")}}</li> -</ul> -</div> - -<h2 id="Колись_патентовані_властивості_які_на_даний_час_є_стандартними"><span class="highlight-span">Колись патентовані властивості, які на даний час є стандартними</span></h2> - -<div class="blockIndicator note"> -<p><strong>Нотаток:</strong> Даби максимізувати сумісність вашого CSS, ви повинні використовувати непрефіксние стандартні властивості, а не префіксні, перераховані нижче. Як тільки задану властивість стандартизовано і реалізовано без префікса, префиксная версія, як правило, через деякий час видаляється.</p> -</div> - -<div class="index"> -<ul> - <li> - <h3 id="A">A</h3> - </li> - <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li> - <li> - <h3 id="B_2">B</h3> - </li> - <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li> - <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li> - <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Замінено на стандартну версію {{CSSxRef("box-decoration-break")}}]</li> - <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li> - <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end")}}]</li> - <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-color")}}]</li> - <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-style")}}]</li> - <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-width")}}]</li> - <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start")}}]</li> - <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-color")}}]</li> - <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-style")}}]</li> - <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-width")}}]</li> - <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li> - <h3 id="C">C</h3> - </li> - <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> - <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li> - <li> - <h3 id="F–M">F–M</h3> - </li> - <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> - <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-end")}}]</li> - <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-start")}}]</li> - <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> - <li> - <h3 id="O_2">O</h3> - </li> - <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li> - <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li> - <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li> - <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li> - <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li> - <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li> - <li> - <h3 id="P">P</h3> - </li> - <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-start")}}]</li> - <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-end")}}]</li> - <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li> - <li> - <h3 id="T–U">T–U</h3> - </li> - <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li> - <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li> - <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li> - <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li> - <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li> - <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li> -</ul> -</div> - -<h2 id="Значення_властивостей">Значення властивостей</h2> - -<h3 id="Глобальні_значення">Глобальні значення</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("initial","-moz-initial")}}</li> -</ul> -</div> - -<h3 id="-moz-appearance" name="-moz-appearance">{{CSSxRef("-moz-appearance")}}</h3> - -<div class="index"> -<ul> - <li><code>button</code></li> - <li><code>button-arrow-down</code></li> - <li><code>button-arrow-next</code></li> - <li><code>button-arrow-previous</code></li> - <li><code>button-arrow-up</code></li> - <li><code>button-bevel</code></li> - <li><code>checkbox</code></li> - <li><code>checkbox-container</code></li> - <li><code>checkbox-label</code></li> - <li><code>checkmenuitem</code></li> - <li><code>dialog</code></li> - <li><code>groupbox</code></li> - <li><code>listbox</code></li> - <li><code>menuarrow</code></li> - <li><code>menucheckbox</code></li> - <li><code>menuimage</code></li> - <li><code>menuitem</code></li> - <li><code>menuitemtext</code></li> - <li><code>menulist</code></li> - <li><code>menulist-button</code></li> - <li><code>menulist-text</code></li> - <li><code>menulist-textfield</code></li> - <li><code>menupopup</code></li> - <li><code>menuradio</code></li> - <li><code>menuseparator</code></li> - <li><code>-moz-mac-unified-toolbar</code></li> - <li><code>-moz-win-borderless-glass</code></li> - <li><code>-moz-win-browsertabbar-toolbox</code></li> - <li><code>-moz-win-communications-toolbox</code></li> - <li><code>-moz-win-glass</code></li> - <li><code>-moz-win-media-toolbox</code></li> - <li><code>-moz-window-button-box</code></li> - <li><code>-moz-window-button-box-maximized</code></li> - <li><code>-moz-window-button-close</code></li> - <li><code>-moz-window-button-maximize</code></li> - <li><code>-moz-window-button-minimize</code></li> - <li><code>-moz-window-button-restore</code></li> - <li><code>-moz-window-titlebar</code></li> - <li><code>-moz-window-titlebar-maximized</code></li> - <li><code>progressbar</code></li> - <li><code>progresschunk</code></li> - <li><code>radio</code></li> - <li><code>radio-container</code></li> - <li><code>radio-label</code></li> - <li><code>radiomenuitem</code></li> - <li><code>resizer</code></li> - <li><code>resizerpanel</code></li> - <li><code>scale-horizontal</code></li> - <li><code>scalethumb-horizontal</code></li> - <li><code>scalethumb-vertical</code></li> - <li><code>scale-vertical</code></li> - <li><code>scrollbarbutton-down</code></li> - <li><code>scrollbarbutton-left</code></li> - <li><code>scrollbarbutton-right</code></li> - <li><code>scrollbarbutton-up</code></li> - <li><code>scrollbar-small</code></li> - <li><code>scrollbarthumb-horizontal</code></li> - <li><code>scrollbarthumb-vertical</code></li> - <li><code>scrollbartrack-horizontal</code></li> - <li><code>scrollbartrack-vertical</code></li> - <li><code>separator</code></li> - <li><code>spinner</code></li> - <li><code>spinner-downbutton</code></li> - <li><code>spinner-textfield</code></li> - <li><code>spinner-upbutton</code></li> - <li><code>statusbar</code></li> - <li><code>statusbarpanel</code></li> - <li><code>tab</code></li> - <li><code>tabpanels</code></li> - <li><code>tab-scroll-arrow-back</code></li> - <li><code>tab-scroll-arrow-forward</code></li> - <li><code>textfield</code></li> - <li><code>textfield-multiline</code></li> - <li><code>toolbar</code></li> - <li><code>toolbarbutton-dropdown</code></li> - <li><code>toolbox</code></li> - <li><code>tooltip</code></li> - <li><code>treeheadercell</code></li> - <li><code>treeheadersortarrow</code></li> - <li><code>treeitem</code></li> - <li><code>treetwisty</code></li> - <li><code>treetwistyopen</code></li> - <li><code>treeview</code></li> - <li><code>window</code></li> -</ul> -</div> - -<h3 id="background-image" name="background-image">{{CSSxRef("background-image")}}</h3> - -<div class="index"> -<ul> - <li> - <h4 id="Gradients" name="Gradients">Градієнти{{Gecko_minversion_inline("1.9.2")}}</h4> - - <ul> - <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li> - </ul> - </li> - <li> - <h4 id="Elements" name="Elements">Елементи{{gecko_minversion_inline("2.0")}}</h4> - - <ul> - <li>{{CSSxRef("element","-moz-element")}}</li> - </ul> - </li> - <li> - <h4 id="Sub-images" name="Sub-images">Sub-зображення{{gecko_minversion_inline("2.0")}}</h4> - - <ul> - <li>{{CSSxRef("-moz-image-rect")}}</li> - </ul> - </li> -</ul> -</div> - -<h3 id="border-color" name="border-color">{{CSSxRef("border-color")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-use-text-color</code>{{Obsolete_Inline(52)}} (видалено в {{bug(1306214)}}); використовуйте {{CSSxRef("color_value#currentColor_keyword","currentcolor")}} замість цього.</li> -</ul> -</div> - -<h3 id="border-style_and_outline-style" name="border-style_and_outline-style">{{CSSxRef("border-style")}} and {{CSSxRef("outline-style")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li> - <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li> - <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li> -</ul> -</div> - -<h3 id="color_keywords" name="color_keywords">{{CSSxRef("<color>")}} keywords</h3> - -<div class="index"> -<ul> - <li><code>-moz-activehyperlinktext</code></li> - <li><code>-moz-hyperlinktext</code></li> - <li><code>-moz-visitedhyperlinktext</code></li> - <li><code>-moz-buttondefault</code></li> - <li><code>-moz-buttonhoverface</code></li> - <li><code>-moz-buttonhovertext</code></li> - <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li> - <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li> - <li><code>-moz-cellhighlight</code></li> - <li><code>-moz-cellhighlighttext</code></li> - <li><code>-moz-field</code></li> - <li><code>-moz-fieldtext</code></li> - <li><code>-moz-dialog</code></li> - <li><code>-moz-dialogtext</code></li> - <li><code>-moz-dragtargetzone</code></li> - <li><code>-moz-mac-accentdarkestshadow</code></li> - <li><code>-moz-mac-accentdarkshadow</code></li> - <li><code>-moz-mac-accentface</code></li> - <li><code>-moz-mac-accentlightesthighlight</code></li> - <li><code>-moz-mac-accentlightshadow</code></li> - <li><code>-moz-mac-accentregularhighlight</code></li> - <li><code>-moz-mac-accentregularshadow</code></li> - <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li> - <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li> - <li><code>-moz-mac-focusring</code></li> - <li><code>-moz-mac-menuselect</code></li> - <li><code>-moz-mac-menushadow</code></li> - <li><code>-moz-mac-menutextselect</code></li> - <li><code>-moz-menuhover</code></li> - <li><code>-moz-menuhovertext</code></li> - <li><code>-moz-win-communicationstext</code></li> - <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li> - <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li> -</ul> -</div> - -<h3 id="display" name="display">{{CSSxRef("display")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-box</code> {{Deprecated_Inline}}</li> - <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li> - <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li> - <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li> - <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li> - <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li> - <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li> -</ul> -</div> - -<h3 id="empty-cells" name="empty-cells">{{CSSxRef("empty-cells")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-show-background</code> <span style="white-space: nowrap;">(за замовчуванням в режимі сумісності)</span></li> -</ul> -</div> - -<h3 id="font" name="font">{{CSSxRef("font")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-button</code></li> - <li><code>-moz-info</code></li> - <li><code>-moz-desktop</code></li> - <li><code>-moz-dialog</code> (як color)</li> - <li><code>-moz-document</code></li> - <li><code>-moz-workspace</code></li> - <li><code>-moz-window</code></li> - <li><code>-moz-list</code></li> - <li><code>-moz-pull-down-menu</code></li> - <li><code>-moz-field</code> <span style="white-space: nowrap;">(як color)</span></li> -</ul> -</div> - -<h3 id="font-family" name="font-family">{{CSSxRef("font-family")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-fixed</code></li> -</ul> -</div> - -<h3 id="image-rendering" name="image-rendering">{{CSSxRef("image-rendering")}}</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("image-rendering","-moz-crisp-edges")}}{{Gecko_minversion_inline("1.9.2")}}</li> -</ul> -</div> - -<h3 id="length" name="length">{{CSSxRef("<length>")}}</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("-moz-calc")}}{{gecko_minversion_inline("2.0")}}</li> -</ul> -</div> - -<h3 id="list-style-type" name="list-style-type">{{CSSxRef("list-style-type")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-arabic-indic</code></li> - <li><code>-moz-bengali</code></li> - <li><code>-moz-cjk-earthly-branch</code></li> - <li><code>-moz-cjk-heavenly-stem</code></li> - <li><code>-moz-devanagari</code></li> - <li><code>-moz-ethiopic-halehame</code></li> - <li><code>-moz-ethiopic-halehame-am</code></li> - <li><code>-moz-ethiopic-halehame-ti-er</code></li> - <li><code>-moz-ethiopic-halehame-ti-et</code></li> - <li><code>-moz-ethiopic-numeric</code></li> - <li><code>-moz-gujarati</code></li> - <li><code>-moz-gurmukhi</code></li> - <li><code>-moz-hangul</code></li> - <li><code>-moz-hangul-consonant</code></li> - <li><code>-moz-japanese-formal</code></li> - <li><code>-moz-japanese-informal</code></li> - <li><code>-moz-kannada</code></li> - <li><code>-moz-khmer</code></li> - <li><code>-moz-lao</code></li> - <li><code>-moz-malayalam</code></li> - <li><code>-moz-myanmar</code></li> - <li><code>-moz-oriya</code></li> - <li><code>-moz-persian</code></li> - <li><code>-moz-simp-chinese-formal</code></li> - <li><code>-moz-simp-chinese-informal</code></li> - <li><code>-moz-tamil</code></li> - <li><code>-moz-telugu</code></li> - <li><code>-moz-thai</code></li> - <li><code>-moz-trad-chinese-formal</code></li> - <li><code>-moz-trad-chinese-informal</code></li> - <li><code>-moz-urdu</code></li> -</ul> -</div> - -<h3 id="overflow" name="overflow">{{CSSxRef("overflow")}}</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("-moz-scrollbars-none")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-scrollbars-horizontal")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("-moz-scrollbars-vertical")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("-moz-hidden-unscrollable")}}</li> -</ul> -</div> - -<h3 id="text-align" name="text-align">{{CSSxRef("text-align")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-center</code></li> - <li><code>-moz-left</code></li> - <li><code>-moz-right</code></li> -</ul> -</div> - -<h3 id="text-decoration" name="text-decoration">{{CSSxRef("text-decoration")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-anchor-decoration</code></li> -</ul> -</div> - -<h3 id="-moz-user-select" name="-moz-user-select">{{CSSxRef("-moz-user-select")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-all</code></li> - <li><code>-moz-none</code></li> -</ul> -</div> - -<h3 id="width_min-width_and_max-width" name="width_min-width_and_max-width">{{CSSxRef("width")}}, {{CSSxRef("min-width")}}, and {{CSSxRef("max-width")}}</h3> - -<div class="index"> -<ul> - <li><code>-moz-min-content</code></li> - <li><code>-moz-fit-content</code></li> - <li><code>-moz-max-content</code></li> - <li><code>-moz-available</code></li> -</ul> -</div> - -<h2 id="Псевдоелементи_та_псевдокласи">Псевдоелементи та псевдокласи</h2> - -<div class="index"> -<ul> - <li> - <h3 id="A_–_D">A – D</h3> - </li> - <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> - <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li> - <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> - <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef("::-moz-canvas")}}</li> - <li>{{CSSxRef("::-moz-color-swatch")}}</li> - <li>{{CSSxRef("::-moz-cell-content")}}</li> - <li>{{CSSxRef(":-moz-drag-over")}}</li> - <li> - <h3 id="F_–_I">F – I</h3> - </li> - <li>{{CSSxRef(":-moz-first-node")}}</li> - <li>{{CSSxRef("::-moz-focus-inner")}}</li> - <li>{{CSSxRef("::-moz-focus-outer")}}</li> - <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li> - <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef("::-moz-inline-table")}}</li> - <li> - <h3 id="L">L</h3> - </li> - <li>{{CSSxRef(":-moz-last-node")}}</li> - <li>{{CSSxRef(":-moz-list-bullet")}}</li> - <li>{{CSSxRef(":-moz-list-number")}}</li> - <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li> - <h3 id="N_–_R">N – R</h3> - </li> - <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li> - <li>{{CSSxRef(":-moz-only-whitespace")}}</li> - <li>{{CSSxRef("::-moz-page")}}</li> - <li>{{CSSxRef("::-moz-page-sequence")}}</li> - <li>{{CSSxRef("::-moz-pagebreak")}}</li> - <li>{{CSSxRef("::-moz-pagecontent")}}</li> - <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li> - <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li> - <li>{{CSSxRef("::-moz-progress-bar")}}</li> - <li>{{CSSxRef("::-moz-range-progress")}}</li> - <li>{{CSSxRef("::-moz-range-thumb")}}</li> - <li>{{CSSxRef("::-moz-range-track")}}</li> - <li>{{CSSxRef(":-moz-read-only")}}</li> - <li>{{CSSxRef(":-moz-read-write")}}</li> - <li> - <h3 id="S">S</h3> - </li> - <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li> - <li>{{CSSxRef("::-moz-scrolled-content")}}</li> - <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li> - <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li> - <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li> - <li> - <h3 id="T">T</h3> - </li> - <li>{{CSSxRef("::-moz-table")}}</li> - <li>{{CSSxRef("::-moz-table-cell")}}</li> - <li>{{CSSxRef("::-moz-table-column")}}</li> - <li>{{CSSxRef("::-moz-table-column-group")}}</li> - <li>{{CSSxRef("::-moz-table-outer")}}</li> - <li>{{CSSxRef("::-moz-table-row")}}</li> - <li>{{CSSxRef("::-moz-table-row-group")}}</li> - <li>{{CSSxRef(":-moz-tree-cell")}}</li> - <li>{{CSSxRef(":-moz-tree-cell-text")}}</li> - <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-tree-checkbox")}}</li> - <li>{{CSSxRef(":-moz-tree-column")}}</li> - <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li> - <li>{{CSSxRef(":-moz-tree-image")}}</li> - <li>{{CSSxRef(":-moz-tree-indentation")}}</li> - <li>{{CSSxRef(":-moz-tree-line")}}</li> - <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li> - <li>{{CSSxRef(":-moz-tree-row")}}</li> - <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-tree-separator")}}</li> - <li>{{CSSxRef(":-moz-tree-twisty")}}</li> - <li> - <h3 id="U_–_X">U – X</h3> - </li> - <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef("::-moz-viewport")}}</li> - <li>{{CSSxRef("::-moz-viewport-scroll")}}</li> - <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li> -</ul> -</div> - -<h2 id="At-правила">At-правила</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef("@-moz-document")}}</li> -</ul> -</div> - -<h2 id="Компоненти_медіа_запитів">Компоненти медіа запитів</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li> - <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li> - <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li> -</ul> -</div> - -<h2 id="Інше">Інше</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef("-moz-alt-content")}} (дивіться {{Bug(11011)}})</li> -</ul> -</div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Gecko/Chrome/CSS"><span style="white-space: nowrap;">Довідник CSS тільки для Chrome</span></a></li> - <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">CSS-розширення для Microsoft</a></li> - <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">CSS-розширення для WebKit</a></li> -</ul> diff --git a/files/uk/web/css/order/index.html b/files/uk/web/css/order/index.html deleted file mode 100644 index 44839c5c2b..0000000000 --- a/files/uk/web/css/order/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: order -slug: Web/CSS/order -tags: - - CSS - - CSS Flexible Boxes - - Порядок -translation_of: Web/CSS/order ---- -<div>{{CSSRef}}</div> - -<h2 id="Загальний_огляд">Загальний огляд</h2> - -<p><a href="/en-US/docs/Web/CSS">CSS</a> параметр <strong><code>order</code></strong> визначає порядок розташування flex елементів відносно їхнього батьківського flex контейнера. Елементи розташовуються у порядку зростання значення order. Елементи з однаковим значенням параметра <code>order</code> розташовуються в такому порядку, в якому вони розташовані в основному коді.</p> - -<div class="note"> -<p><strong>Примітка</strong>: параметр <code>order</code> лише впливає на <strong>візуальний порядок</strong> елементів і не впливає на їх логічний порядок або порядок табуляції. <code><strong>order</strong></code> не повинен використовуватися на невізуальних носіях, таких як голосові читалки.</p> -</div> - -<p>{{cssinfo}}</p> - -<p>Дивіться <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Використання CSS flexible boxes</a> для більш детальної інформації, а також опису інших параметрів.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css">/* Числові значення включаючи від'ємні числа */ -order: 5; -order: -5; - -/* Глобальні значення */ -order: inherit; -order: initial; -order: unset; -</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code><integer></code></dt> - <dd>Відображає порядковий номер групи, до якої flex елемент був присвоєний.</dd> -</dl> - -<h3 id="Офіційний_синтаксис">Офіційний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<p>Тут є базовий уривок HTML:</p> - -<pre class="brush:html;"><!DOCTYPE html> -<header>...</header> -<div id='main'> - <article>Article</article> - <nav>Nav</nav> - <aside>Aside</aside> -</div> -<footer>...</footer></pre> - -<p>Наступний CSS код повинен створити класичний шаблон з двома бічними панелями, які оточують блок з контентом. Flexible Box Layout Module автоматично створює блоки з однаковими вертикальними розмірами і буде займати стільки горизонтального простору, скільки буде доступно.</p> - -<pre class="brush:css;">#main { display: flex; text-align:center; } -#main > article { flex:1; order: 2; } -#main > nav { width: 200px; order: 1; } -#main > aside { width: 200px; order: 3; }</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p> - -<h2 id="sect1"> </h2> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Особливість</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br> - 29</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td> - <td> - <p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> - 11</p> - </td> - <td>12.10</td> - <td>7 {{property_prefix("-webkit")}}<br> - 9</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Особливість</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> - {{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>12.10</td> - <td>7 {{property_prefix("-webkit")}}<br> - 9</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference <code>layout.css.flexbox.enabled</code> на <code>true</code>. Багаторядкові flexible boxes підтримуються з Firefox 28.</p> - -<p>Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися {{bug("812687")}}.</p> - -<p>[2] На додаток до підтримки без префікса, Gecko 48.0 {{geckoRelease("48.0")}} добавила підтримку для <code>-webkit</code> префіксної версії даного параметра, for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' <code>display:-ms-flexbox,</code> а не <code>display:flex</code>. Даний параметр реалізований під нестандартним іменем <code>-ms-flex-order</code>.</p> - -<h2 id="Дивитися_також">Дивитися також</h2> - -<ul> - <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Використання CSS flexible boxes</a></li> -</ul> diff --git a/files/uk/web/css/position/index.html b/files/uk/web/css/position/index.html deleted file mode 100644 index 2d057ef9cc..0000000000 --- a/files/uk/web/css/position/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: position -slug: Web/CSS/position -tags: - - CSS - - CSS-властивість - - Розміщення -translation_of: Web/CSS/position ---- -<div>{{CSSRef}}</div> - -<p><a href="/uk/docs/CSS">CSS</a>-властивість <strong><code>position</code></strong> вказує, як елемент розміщено в документі. А властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, та {{Cssxref("left")}} визначають остаточне положення елемента.</p> - -<pre class="brush: css no-line-numbers">/* Keyword values */ -position: static; -position: relative; -position: absolute; -position: fixed; -position: sticky; - -/* Global values */ -position: inherit; -position: initial; -position: unset; -</pre> - -<div id="position"> -<div class="hidden"> -<pre class="brush: html"><div id="container"> - <div class="box"><strong>static</strong></div> - <div class="box relative"><strong>relative</strong><br/><br/>top: 30px;<br/>right: 20px;</div> - <div class="box sticky"><strong>sticky</strong><br/><br/>top: 20px;</div> - <div class="box fixed"><strong>fixed</strong><br/><br/>left: 280px;</div> - - <div class="text"> - <p>Try scrolling this example to see the effect of - <strong><code>fixed</code></strong> or - <strong><code>sticky</code></strong> positioning.</p> - <p>With <strong><code>fixed</code></strong> positioning, the - element does not move as the viewport scrolls.</p> - <p>With <strong><code>sticky</code></strong> positioning, the - element moves until it reaches a threshold: - in this case 20 pixels from the top of the container.</p> - <p>The other two boxes show the effect of - <strong><code>static</code></strong> and - <strong><code>relative</code></strong> positioning.</p> - </div> -</div> -</pre> -</div> - -<div class="hidden"> -<pre class="brush: css">#container { - border: 5px solid #F4F7F8; - width: 100%; - height: 300px; - display: flex; - overflow: scroll; - box-sizing: border-box; -} - -.box { - height: 80px; - margin: 5px; - padding: 5px; - margin-top: 100px; - background-color: yellow; - border: 2px solid red; - color: red; - font-family: monospace; -} - -.text { - max-width: 120px; - padding: 0 0.5em 0 120px; - font-family: sans-serif; -} - - -.relative { - position: relative; - top: 30px; - right: 20px; -} - -.sticky { - position: sticky; - top: 20px; -} - -.fixed { - position: fixed; - left: 280px; -} -</pre> -</div> -{{EmbedLiveSample("position", 1200, 300, "", "", "example-outcome-frame")}}</div> - -<p>{{cssinfo}}</p> - -<h3 id="Види_розміщення">Види розміщення</h3> - -<ul> - <li><strong>Розміщеним елементом</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>relative</code>, <code>absolute</code>, <code>fixed</code>, або <code>sticky</code>. Інакше кажучи, все окрім <code>static</code>.</li> - <li>Елементом з <strong>відносним розміщенням </strong>називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code style="font-size: 14px;">relative</code>. Властивості {{Cssxref("top")}} і {{Cssxref("bottom")}} вказують доземний (вертикальний) зсув від початкового положення; натомість властивості {{Cssxref("left")}} і {{Cssxref("right")}} визначають поземний (горизонтальний) зсув.</li> - <li>Елементом з <strong>абсолютним розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>absolute</code> або <code>fixed</code>. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують зсуви від країв блока, що містить елемент (себто той блок є батьківським і відносно нього здійснюється розміщення елемента). Якщо елемент має {{cssxref("margin", "відступи")}}, то вони додаються до зсувів.</li> - <li>Елементом з <strong>«липким» розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>sticky</code>. До певної межі (поки блок, всередині якого той елемент розташовано, не перетинає зазначеного порогового значення) це працює так само, як відносне розміщення, а тоді — як нерухоме (fixed).</li> -</ul> - -<p><span style="line-height: 1.5;">Most of the time, absolutely positioned elements that have</span><span style="line-height: 1.5;"> {{Cssxref("height")}} and {{Cssxref("width")}} set to <code>auto</code> are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">). They can likewise be made to fill the available horizontal space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</span></p> - -<p>Except for the case just described of absolutely positioned elements filling the available space:</p> - -<ul> - <li>If both <code>top</code> and <code>bottom</code> are specified (technically, not <code>auto</code>), <code>top</code> wins.</li> - <li>If both <code>left</code> and <code>right</code> are specified, <code>left</code> wins when {{Cssxref("direction")}} is <code>ltr</code> (English, horizontal Japanese, etc.) and <code>right</code> wins when {{Cssxref("direction")}} is <code>rtl</code> (Persian, Arabic, Hebrew, etc.).</li> -</ul> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>Значення властивості <code>position</code> може бути одним із ключових слів, що їх перелік наведено нижче.</p> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>static</code></dt> - <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd> - <dt><code>relative</code></dt> - <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The effect of <code>relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd> - <dt><code>absolute</code></dt> - <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.</dd> - <dt><span style="font-family: courier new,andale mono,monospace; font-weight: inherit; line-height: normal;">fixed</span></dt> - <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. When an ancestor has the <code>transform</code> property set to something other than <code>none</code>, that ancestor is used as the container instead of the viewport (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>). In printed documents, the element is placed in the same position on <em>every page</em>.</dd> -</dl> - -<dl> - <dt><code style="font-size: 14px;">sticky</code> {{experimental_inline}}</dt> - <dd>The element is positioned according to the normal flow of the document, and then offset relative to <em>its flow root and containing block</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. The effect of <code style="font-size: 14px;">sticky</code> on table-related elements is the same as <code style="font-size: 14px;">relative</code>. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>)</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Relative_positioning" name="Relative_positioning">Відносне розміщення</h3> - -<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.box { - display: inline-block; - width: 100px; - height: 100px; - background: red; - color: white; -} - -#two { - position: relative; - top: 20px; - left: 20px; - background: blue; -} -</pre> - -<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> - -<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютне розміщення</h3> - -<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <code><body></code> of the document.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.box { - display: inline-block; - width: 100px; - height: 100px; - background: red; - color: white; -} - -#two { - position: absolute; - top: 20px; - left: 20px; - background: blue; -}</pre> - -<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p> - -<h3 id="Fixed_positioning" name="Fixed_positioning">Нерухоме розміщення</h3> - -<p>Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the <em>viewport</em>. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><div class="outer"> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <div class="box" id="one">One</div> -</div> -</pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">.box { - width: 100px; - height: 100px; - background: red; - color: white; -} - -#one { - position: fixed; - top: 80px; - left: 10px; - background: blue; -} - -.outer { - width: 500px; - height: 300px; - overflow: scroll; - padding-left: 150px; -} -</pre> - -<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> - -<h3 id="Sticky_positioning" name="Sticky_positioning">«Липке» розміщення</h3> - -<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...</p> - -<pre class="brush: css">#one { position: sticky; top: 10px; }</pre> - -<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p> - -<div>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</div> - -<div> </div> - -<div>You must specify a threshold with at least one of <span style="line-height: 1.5;"><code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</span></div> - -<div> </div> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html"><dl> - <div> - <dt>A</dt> - <dd>Andrew W.K.</dd> - <dd>Apparat</dd> - <dd>Arcade Fire</dd> - <dd>At The Drive-In</dd> - <dd>Aziz Ansari</dd> - </div> - <div> - <dt>C</dt> - <dd>Chromeo</dd> - <dd>Common</dd> - <dd>Converge</dd> - <dd>Crystal Castles</dd> - <dd>Cursive</dd> - </div> - <div> - <dt>E</dt> - <dd>Explosions In The Sky</dd> - </div> - <div> - <dt>T</dt> - <dd>Ted Leo &amp; The Pharmacists</dd> - <dd>T-Pain</dd> - <dd>Thrice</dd> - <dd>TV On The Radio</dd> - <dd>Two Gallants</dd> - </div> -</dl> -</pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css">* { - box-sizing: border-box; -} - -dl > div { - background: #FFF; - padding: 24px 0 0 0; -} - -dt { - background: #B8C1C8; - border-bottom: 1px solid #989EA4; - border-top: 1px solid #717D85; - color: #FFF; - font: bold 18px/21px Helvetica, Arial, sans-serif; - margin: 0; - padding: 2px 0 0 12px; - position: -webkit-sticky; - position: sticky; - top: -1px; -} - -dd { - font: bold 20px/45px Helvetica, Arial, sans-serif; - margin: 0; - padding: 0 0 0 12px; - white-space: nowrap; -} - -dd + dd { - border-top: 1px solid #CCC; -} -</pre> - -<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> - -<ul> -</ul> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>Adds <code>sticky</code> property value.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка веб-переглядачами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [1]</td> - <td>4.0 [3]</td> - <td>4.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>fixed </code>value</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [4]</td> - <td>7.0</td> - <td>4.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>sticky</code> value</td> - <td>{{CompatChrome(56)}}</td> - <td>{{CompatUnknown}} [5]</td> - <td>32 (32.0) [2]</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>6.1 {{ property_prefix("-webkit-") }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [1]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>7.0 {{ property_prefix("-webkit-") }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Since Firefox 30, Gecko allows {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, and {{HTMLElement("tfoot")}} elements with a <code>position: relative;</code> style to act as absolute positioning containers. This means that a <code>position: absolute;</code> styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting <code>position: relative;</code> on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.</p> - -<p>[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the <code>about:config</code> preference <code>layout.css.sticky.enabled</code> is set to <code>true</code>. From Firefox 27 to 31, <code>true</code> is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.</p> - -<p>[3] In Internet Explorer, fixed positioning doesn't work if the document is in <a href="http://msdn.microsoft.com/en-us/library/ie/ms531140(v=vs.85).aspx" title="position Property - MSDN">quirks mode</a>.</p> - -<p>[4] Prior to Firefox 44, <code>position: fixed</code> didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.</p> - -<p>[5] Sticky positioning is <a href="https://dev.modern.ie/platform/status/positionsticky/">in preview</a> for Edge.</p> diff --git a/files/uk/web/css/reference/index.html b/files/uk/web/css/reference/index.html deleted file mode 100644 index 1eb6730f98..0000000000 --- a/files/uk/web/css/reference/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: CSS довідник -slug: Web/CSS/Reference -translation_of: Web/CSS/Reference -original_slug: Web/CSS/Довідник ---- -<p><span class="seoSummary">This <em>CSS Reference</em> shows the basic syntax of a CSS rule; lists all standard <a href="/uk/docs/CSS">CSS</a> properties, <a href="/uk/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/uk/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/uk/docs/Web/CSS/At-rule">@-rules</a>, <a href="/uk/docs/Web/CSS/length">units</a>, and <a href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>, all together in <a href="#Keyword_index">alphabetical order</a>, as well as just the <a href="#Selectors">selectors by type</a>; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any <a href="/uk/docs/Web/CSS/CSS3">CSS3</a> property and concept standardized, or already stabilized. Also included is a brief <a href="#DOM_CSS">DOM-CSS / CSSOM reference</a>.</span></p> - -<p>Note that CSS rule-definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM, the rule-management system, is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> - -<p>See also <a href="/uk/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> for Gecko-specific properties prefixed with <code>-moz</code>; and <a href="/uk/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> for WebKit-specific properties. See <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> by Peter Beverloo for all prefixed properties.</p> - -<h2 id="Basic_rule_syntax">Basic rule syntax</h2> - -<p>Be warned that any syntax error in a rule definition will invalidate the entire rule.</p> - -<h3 id="Style_rules">Style rules</h3> - -<pre class="syntaxbox"><strong><var>selectorlist</var> { <var>property</var>: <var>value</var>;</strong> <var>[more property:value; pairs]</var> <strong>}</strong> - -...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> - -See <a href="#Selectors"><em>selector</em></a>, <a href="#pelm"><em>pseudo-element</em></a>, <a href="#pcls"><em>pseudo-class</em></a> lists below. -</pre> - -<h4 id="Examples">Examples</h4> - -<pre class="brush: css">strong { color: red;} -div.menu-bar li:hover > ul { display: block; } -</pre> - -<p>More about examples: <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p> - -<h3 id="rules">@rules</h3> - -<p>As these have so many different structure-formats, see the desired <a href="/uk/docs/Web/CSS/At-rule">At-rule</a> for syntax.</p> - -<h2 id="Keyword_index">Keyword index</h2> - -<div>{{CSS_Ref}}</div> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Selectors">Selectors</h2> - -<ul> - <li>Basic Selectors - <ul> - <li><a href="/uk/docs/Web/CSS/Type_selectors">Type selectors</a><code> elementname</code></li> - <li><a href="/uk/docs/Web/CSS/Class_selectors">Class selectors</a> <code>.classname</code></li> - <li><a href="/uk/docs/Web/CSS/ID_selectors">ID selectors</a> <code>#idname</code></li> - <li><a href="/uk/docs/Web/CSS/Universal_selectors">Universal selectors</a><code> * ns|* *|*</code></li> - <li><a href="/uk/docs/Web/CSS/Attribute_selectors">Attribute selectors</a><code> [attr=value]</code></li> - </ul> - </li> - <li>Combinators <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">(more info)</a> - <ul> - <li><a href="/uk/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li> - <li><a href="/uk/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li> - <li><a href="/uk/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A > B</code></li> - <li><a href="/uk/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li> - </ul> - </li> - <li id="pelm">Pseudo-elements <a href="/uk/docs/Web/CSS/Pseudo-elements">(more info)</a> - <ul> - <li>{{ Cssxref("::after") }}</li> - <li>{{ Cssxref("::before") }}</li> - <li>{{ Cssxref("::first-letter") }}</li> - <li>{{ Cssxref("::first-line") }}</li> - <li>{{ Cssxref("::selection") }}</li> - <li>{{ Cssxref("::backdrop") }}</li> - <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> - <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> - <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> - <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> - </ul> - </li> - <li id="pcls">Standard pseudo-classes <a href="/uk/docs/Web/CSS/Pseudo-classes">(more info)</a> - <div class="index"> - <ul> - <li>{{ Cssxref(":active") }}</li> - <li>{{ cssxref(':any')}}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":default") }}</li> - <li>{{ Cssxref(":dir", ":dir()")}}</li> - <li>{{ Cssxref(":disabled") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":first") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":fullscreen") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":indeterminate") }}</li> - <li>{{ Cssxref(":in-range") }}</li> - <li>{{ Cssxref(":invalid") }}</li> - <li>{{ Cssxref(":lang", ":lang()") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":left") }}</li> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":not", ":not()") }}</li> - <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> - <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> - <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> - <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> - <li>{{ Cssxref(":only-child") }}</li> - <li>{{ Cssxref(":only-of-type") }}</li> - <li>{{ Cssxref(":optional") }}</li> - <li>{{ Cssxref(":out-of-range") }}</li> - <li>{{ Cssxref(":read-only") }}</li> - <li>{{ Cssxref(":read-write") }}</li> - <li>{{ Cssxref(":required") }}</li> - <li>{{ Cssxref(":right") }}</li> - <li>{{ Cssxref(":root") }}</li> - <li>{{ Cssxref(":scope") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":valid") }}</li> - <li>{{ Cssxref(":visited") }}</li> - </ul> - </div> - </li> -</ul> - -<p>A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p> - -<h2 id="CSS3_Tutorials">CSS3 Tutorials</h2> - -<p>These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:</p> - -<ul> - <li><a href="/uk/docs/Web/Guide/CSS/Media_queries">Using CSS media queries</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Counters">Using CSS counters</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_gradients">Using CSS gradients</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_animations">Using CSS animations</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_multiple_backgrounds">Using CSS multiple backgrounds</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> -</ul> - -<h2 id="Concepts">Concepts</h2> - -<ul> - <li><a href="/uk/docs/Web/CSS/Syntax">CSS syntax</a></li> - <li><a href="/uk/docs/Web/CSS/At-rule">At-rule</a></li> - <li><a href="/uk/docs/Web/CSS/Comments">Comments</a></li> - <li><a href="/uk/docs/Web/CSS/Specificity">Specificity</a></li> - <li><a href="/uk/docs/Web/CSS/initial_value">Initial value</a></li> - <li><a href="/uk/docs/Web/CSS/inheritance">Inheritance</a></li> - <li><a href="/uk/docs/Web/CSS/specified_value">Specified value</a></li> - <li><a href="/uk/docs/Web/CSS/computed_value">Computed value</a></li> - <li><a href="/uk/docs/Web/CSS/used_value">Used value</a></li> - <li><a href="/uk/docs/Web/CSS/actual_value">Actual value</a></li> - <li><a href="/uk/docs/Web/CSS/resolved_value">Resolved value</a></li> - <li><a href="/uk/docs/Web/CSS/box_model">Box model</a></li> - <li><a href="/uk/docs/Web/CSS/Replaced_element">Replaced element</a></li> - <li><a href="/uk/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> - <li><a href="/uk/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> - <li><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li> - <li><a href="/uk/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> - <li><a href="/uk/docs/Web/CSS/Layout_mode">Layout mode</a></li> -</ul> - -<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> - -<p>Major object types:</p> - -<ul> - <li>document . <a href="/uk/docs/Web/API/Document/styleSheets">styleSheets</a></li> - <li>styleSheets[x] . <a href="/uk/docs/Web/API/CSSRuleList">cssRules</a></li> - <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li> - <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> - <li>elem . <a href="/uk/docs/Web/API/HTMLElement/style">style</a></li> - <li>elem . style . <a href="/uk/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li> - <li>elem . <a href="/uk/docs/Web/API/Element/className">className</a></li> - <li>elem . <a href="/uk/docs/Web/API/Element/classList">classList</a></li> -</ul> - -<p>Important methods:</p> - -<ul> - <li>{{domxref("CSSStyleSheet.insertRule")}}</li> - <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> -</ul> -</div> -</div> diff --git a/files/uk/web/css/resize/index.html b/files/uk/web/css/resize/index.html deleted file mode 100644 index 7a11fcc18c..0000000000 --- a/files/uk/web/css/resize/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: resize -slug: Web/CSS/resize -tags: - - CSS - - CSS Властивість - - Зміна розміру - - Розмір -translation_of: Web/CSS/resize ---- -<div>{{CSSRef}}</div> - -<h2 id="Зведення">Зведення</h2> - -<p>The <strong><code>resize</code></strong> CSS property lets you control the resizability of an element.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: css">/* Keyword values */ -resize: none; -resize: both; -resize: horizontal; -resize: vertical; -resize: block; -resize: inline; - -/* Global values */ -resize: inherit; -resize: initial; -resize: unset; -</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>none</code></dt> - <dd>The element offers no user-controllable method for resizing the element.</dd> - <dt><code>both</code></dt> - <dd>The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.</dd> - <dt><code>horizontal</code></dt> - <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.</dd> - <dt><code>vertical</code></dt> - <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.</dd> - <dt><code>block</code> {{experimental_inline}}</dt> - <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.</dd> - <dt><code>inline</code> {{experimental_inline}}</dt> - <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.</dd> -</dl> - -<div class="note"><strong>Note:</strong> <code>resize</code> does not apply to blocks for which the {{cssxref("overflow")}} property is set to <code>visible</code>.</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Disabling_resizability_of_textareas">Disabling resizability of textareas</h3> - -<h4 id="CSS">CSS</h4> - -<p>By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:</p> - -<pre class="brush: css">textarea.example { - resize: none; /* disables resizability */ -} -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><textarea class="example">Type some text here.</textarea></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p> - -<h3 id="Using_resize_with_arbitrary_elements">Using resize with arbitrary elements</h3> - -<p>You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):</p> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.resizable { - resize: both; - overflow: scroll; - border: 1px solid black; -} - -div { - height: 300px; - width: 300px; -} - -p { - height: 200px; - width: 200px; -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div class="resizable"> - <p class="resizable"> - This paragraph is resizable, because the CSS resize property is set to 'both' on this - element. - </p> -</div> -</pre> - -<h4 id="Result_2">Result</h4> - -<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>Adds the values <code>block</code> and <code>inline</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support (on {{HTMLElement("textarea")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}</td> - <td>{{CompatNo}}</td> - <td>12.1</td> - <td>3.0 (522)</td> - </tr> - <tr> - <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> - <td>4.0</td> - <td>{{CompatGeckoDesktop("5.0")}}[1]</td> - <td>{{CompatNo}}</td> - <td>15</td> - <td>4.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{HTMLElement("textarea")}})</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>resize</code> doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/uk/web/css/visual_formatting_model/index.html b/files/uk/web/css/visual_formatting_model/index.html deleted file mode 100644 index 521725152a..0000000000 --- a/files/uk/web/css/visual_formatting_model/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Модель візуального формування -slug: Web/CSS/Visual_formatting_model -tags: - - CSS - - NeedsUpdate - - Коробчаста модель CSS -translation_of: Web/CSS/Visual_formatting_model -original_slug: Web/CSS/Модель_візуального_формування ---- -<p class="summary"><em>Модель візуального форматування</em> (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.</p> - -<p>Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:</p> - -<ul> - <li>Розміри прямокутника: точно зазначені, обмежені, або ні;</li> - <li>Тип компонування: рядковий (inline), рядкового рівня (inline-level), неподільний рядкового рівня чи блоковий;</li> - <li>Схема розміщення: в нормальному потоці (flow), {{cssxref("float", "рухомий")}}, чи абсолютно розміщений;</li> - <li>Решта елементів у дереві: нащадки та сусідські елементи;</li> - <li>Розмір {{glossary("viewport", "вікна")}} та розміщення в ньому;</li> - <li>Справжні (первинні) розміри зображень, що їх містять елементи;</li> - <li>Інша інформація ззовні.</li> -</ul> - -<p>Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.</p> - -<h2 id="Утворення_прямокутників">Утворення прямокутників</h2> - -<p>Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.</p> - -<h3 id="Block-level_elements_and_block_boxes">Block-level elements and block boxes</h3> - -<p>Елемент називається <em>блочним</em>, коли його вираховане значення {{ cssxref("display") }} CSS property is: <code>block</code>, <code>list-item</code>, or <code>table</code>. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.</p> - -<p>Each block-level box participates in a <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block formatting context</a>. Each block-level element generates at least one block-level box, called the <em>principal block-level</em><em> box</em>. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.</p> - -<p>The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">positioning scheme</a>.</p> - -<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">A block-level box may also be a block container box. A <em>block container box</em> is a box that contains only other block-level boxes, or creates an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>, thus containing only inline boxes.</p> - -<p>It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.</p> - -<p>Block-level boxes that also are block container boxes are called <em>block boxes</em>.</p> - -<h4 id="Anonymous_block_boxes">Anonymous block boxes</h4> - -<p>In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called <em>anonymous boxes</em>.</p> - -<p>Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the <code>inherit</code> value, and all non-inheritable CSS properties, have the <code>initial</code> value.</p> - -<p>Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.</p> - -<h3 id="Example">Example</h3> - -<p>If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have <code>display:block</code> :</p> - -<pre class="syntaxbox"><code><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div></code></pre> - -<p>Two anonymous block boxes are created: one for the text before the paragraph (<code>Some inline text</code>), and another for the text after it (<code>followed by more inline text</code>). This builds the following block structure:</p> - -<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> - -<p>Leading to:</p> - -<pre>Some inline text -followed by a paragraph -followed by more inline text. -</pre> - -<p>Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the <code>initial</code> value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the<code> initial</code> value for that property, and thus the background of the <code><div></code> is visible. A specific background color can be applied to the <code><p></code> box. Similarly, the two anonymous boxes always use the same color for their text.</p> - -<p>Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an <em>anonymous block box</em>, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.</p> - -<p>If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.</p> - -<h3 id="Example_2">Example</h3> - -<p>If we take the following HTML code, with {{ HTMLElement("p") }} have <code>display:inline</code> and {{ HTMLElement("span") }} have <code>display:block</code> :</p> - -<pre class="syntaxbox"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code></pre> - -<p>Two anonymous block boxes are created, one for the text before the span Element (<code>Some <em>inline</em> text</code>) and one for the text after it (<code>followed by more inline text</code>), which gives the following block structure:</p> - -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> - -<p>Which leads to:</p> - -<pre>Some inline text -followed by a paragraph -followed by more inline text. -</pre> - -<h3 id="Inline-level_elements_and_inline_boxes">Inline-level elements and inline boxes</h3> - -<p>An element is said to be <em>inline-level</em> when the calculated value of its {{ cssxref("display") }} CSS property is: <code>inline</code>, <code>inline-block</code> or <code>inline-table</code>. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.</p> - -<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> - -<div class="warning"> -<p>This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2</p> -</div> - -<p>Inline-level elements generate <em>inline-level boxes</em> that are defined as boxes participating to an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p> - -<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div> - -<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context. -<div style=""> -<pre><style> - span { - display:inline; /* default value*/ - } -</style> -<div style="width:20em;"> - The text in the span <span>can be split in several - lines as it</span> is an inline box. -</div> -</pre> - -<p>which leads to:</p> - -<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> - -<pre><style> - span { - display:inline-block; - } -</style> -<div style="width:20em;"> - The text in the span <span>cannot be split in several - lines as it</span> is an inline-block box. -</div> -</pre> - -<p>which leads to:</p> - -<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div> -</div> -</div> - -<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4> - -<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p> - -<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p> - -<div class="note">Example TBD</div> - -<h3 id="Other_types_of_boxes">Other types of boxes</h3> - -<h4 id="Line_boxes">Line boxes</h4> - -<p><em>Line boxes</em> are generated by the <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p> - -<p>These boxes are technical, and Web authors do not usually have to bother with them.</p> - -<h4 id="Run-in_boxes">Run-in boxes</h4> - -<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p> - -<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div> - -<h4 class="note" id="Model-induced_boxes">Model-induced boxes</h4> - -<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p> - -<ul> - <li>The <a href="/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li> - <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li> - <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li> -</ul> - -<h4 id="Positioning_schemes">Positioning schemes</h4> - -<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p> - -<ul> - <li>The <em>normal flow</em> - positions each box one after the other.</li> - <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li> - <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li> -</ul> - -<h3 id="Normal_flow">Normal flow</h3> - -<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p> - -<h3 id="Example_3">Example</h3> - -<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:<br> -<br> -[image]<br> -<br> -When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:<br> -<br> -[image]</div> - -<p class="note">There are two sub-cases of the normal flow: static positioning and relative positioning:</p> - -<ul> - <li class="note">In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.<br> - [image]</li> - <li class="note">In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li> -</ul> - -<h3 id="Floats">Floats</h3> - -<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p> - -<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p> - -<p>[image]</p> - -<h3 id="Absolute_positioning">Absolute positioning</h3> - -<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p> - -<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p> - -<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> - <li>{{css_key_concepts}}</li> -</ul> diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html deleted file mode 100644 index 364b1044a2..0000000000 --- a/files/uk/web/css/z-index/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: z-index -slug: Web/CSS/z-index -translation_of: Web/CSS/z-index ---- -<div>{{CSSRef}}</div> - -<p>CSS властивість <strong><code>z-index</code></strong> встановлює порядок осі Z <a href="/en-US/docs/Web/CSS/position">спозицйонованого</a> елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.</p> - -<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> - -<p class="hidden">Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та вишли нам pull request.</p> - -<p>В спозицйонованому елементі (такому, в якому властивість <code>position</code> є будь-якою окрім <code>static</code>) властивість <code>z-index</code> вказує:</p> - -<ol> - <li>Рівень накладання елемента в поточному <a href="/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">контексті накладання</a>.</li> - <li>Чи створює цей елемент локальний контекст накладання.</li> -</ol> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css no-line-numbers">/* Властивість, зазначена ключовим словом */ -z-index: auto; - -/* Цифрові значення <integer> */ -z-index: 0; -z-index: 3; -z-index: 289; -z-index: -1; /* Цифри менше нуля зменьшують приорітет */ - -/* Глобальні значення */ -z-index: inherit; -z-index: initial; -z-index: unset; -</pre> - -<p>Властивість <code>z-index</code> вказується або ключовим словом <code><a href="#auto">auto</a></code> або цифрою <code><a href="#<integer>"><integer></a></code>.</p> - -<h3 id="Вартості">Вартості</h3> - -<dl> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> - <dd>Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.</dd> - <dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt> - <dd>{{cssxref("<integer>")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює <code>0</code>. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> {{cssxref("<integer>")}}</pre> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="dashed-box">Коробка з пунктиром - <span class="gold-box">Золота коробка</span> - <span class="green-box">Зелена коробка</span> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[3,11,19]">.dashed-box { - position: relative; - z-index: 1; - border: dashed; - height: 8em; - margin-bottom: 1em; - margin-top: 2em; -} -.gold-box { - position: absolute; - z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */ - background: gold; - width: 80%; - left: 60px; - top: 3em; -} -.green-box { - position: absolute; - z-index: 2; /* розташуй .green-box над .dashed-box */ - background: lightgreen; - width: 20%; - left: 65%; - top: -25px; - height: 7em; - opacity: 0.9; -} -</pre> - -<h3 id="Результат">Результат</h3> - -<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Означає <code>z-index</code> як такий, який можна анімувати.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Початкове визначення</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і вишли нам pull request.</div> - -<p>{{Compat("css.properties.z-index")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li>Властивість CSS {{Cssxref("position")}}</li> - <li><a href="/en-US/docs/CSS/Understanding_z-index">Зрозуміти CSS z-index</a></li> -</ul> diff --git a/files/uk/web/events/index.html b/files/uk/web/events/index.html deleted file mode 100644 index ff23bb9e4c..0000000000 --- a/files/uk/web/events/index.html +++ /dev/null @@ -1,2310 +0,0 @@ ---- -title: Event reference -slug: Web/Events -tags: - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Events ---- -<p>DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.</p> - -<p>This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p> - -<h2 id="Standard_events">Standard events</h2> - -<p>These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.</p> - -<table class="standard-table" style="width: 100%;"> - <thead> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("abort")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td> - <td>The loading of a resource has been aborted.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> - <td>Progression has been terminated (not due to an error).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> - <td>A transaction has been aborted.</td> - </tr> - <tr> - <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> - <td>The associated document has started printing or the print preview has been closed.</td> - </tr> - <tr> - <td>{{event("animationend")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> - </tr> - <tr> - <td>{{event("animationiteration")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> - </tr> - <tr> - <td>{{event("animationstart")}}</td> - <td>{{domxref("AnimationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> - </tr> - <tr> - <td>{{event("audioprocess")}}</td> - <td>{{domxref("AudioProcessingEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> - <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> - </tr> - <tr> - <td>{{event("audioend")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The user agent has finished capturing audio for speech recognition.</td> - </tr> - <tr> - <td>{{event("audiostart")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The user agent has started to capture audio for speech recognition.</td> - </tr> - <tr> - <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> - <td>The associated document is about to be printed or previewed for printing.</td> - </tr> - <tr> - <td>{{event("beforeunload")}}</td> - <td>{{domxref("BeforeUnloadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td> - <td> </td> - </tr> - <tr> - <td>{{event("beginEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> - </tr> - <tr> - <td>{{event("blur")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td> - <td>An element has lost focus (does not bubble).</td> - </tr> - <tr> - <td>{{event("boundary")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The spoken utterance reaches a word or sentence boundary</td> - </tr> - <tr> - <td>{{event("cached")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> - </tr> - <tr> - <td>{{event("canplay")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td> - <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> - </tr> - <tr> - <td>{{event("canplaythrough")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td> - <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> - </tr> - <tr> - <td>{{event("change")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> - <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td> - </tr> - <tr> - <td>{{event("chargingchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The battery begins or stops charging.</td> - </tr> - <tr> - <td>{{event("chargingtimechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>chargingTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("checking")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td> - </tr> - <tr> - <td>{{event("click")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td> - <td>A pointing device button has been pressed and released on an element.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been closed.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> - <td> </td> - </tr> - <tr> - <td>{{event("complete")}}</td> - <td>{{domxref("OfflineAudioCompletionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> - <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> - </tr> - <tr> - <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td> - <td>The composition of a passage of text has been completed or canceled.</td> - </tr> - <tr> - <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td> - <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td> - </tr> - <tr> - <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td> - <td>{{domxref("CompositionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td> - <td>A character is added to a passage of text being composed.</td> - </tr> - <tr> - <td>{{event("contextmenu")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> - <td>The right button of the mouse is clicked (before the context menu is displayed).</td> - </tr> - <tr> - <td>{{event("copy")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> - <td>The text selection has been added to the clipboard.</td> - </tr> - <tr> - <td>{{event("cut")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> - <td>The text selection has been removed from the document and added to the clipboard.</td> - </tr> - <tr> - <td>{{event("dblclick")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td> - <td>A pointing device button is clicked twice on an element.</td> - </tr> - <tr> - <td>{{event("devicelight")}}</td> - <td>{{domxref("DeviceLightEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td> - <td>Fresh data is available from a light sensor.</td> - </tr> - <tr> - <td>{{event("devicemotion")}}</td> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> - <td>Fresh data is available from a motion sensor.</td> - </tr> - <tr> - <td>{{event("deviceorientation")}}</td> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> - <td>Fresh data is available from an orientation sensor.</td> - </tr> - <tr> - <td>{{event("deviceproximity")}}</td> - <td>{{domxref("DeviceProximityEvent")}}</td> - <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td> - <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td> - </tr> - <tr> - <td>{{event("dischargingtimechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>dischargingTime</code> attribute has been updated.</td> - </tr> - <tr> - <td><code>DOMActivate</code> {{deprecated_inline}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td> - <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationNameEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td> - <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td> - <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td> - <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td>{{event("DOMContentLoaded")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> - <td>The document has finished loading (but not its dependent resources).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationNameEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td> - <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code>DOMFocusIn</code> {{deprecated_inline}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td> - <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td> - </tr> - <tr> - <td><code>DOMFocusOut</code> {{deprecated_inline}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td> - <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td> - <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td> - <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td> - <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td> - <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td> - <td>{{domxref("MutationEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td> - <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> - </tr> - <tr> - <td>{{event("downloading")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td> - </tr> - <tr> - <td>{{event("drag")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> - <td>An element or text selection is being dragged (every 350ms).</td> - </tr> - <tr> - <td>{{event("dragend")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> - <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> - </tr> - <tr> - <td>{{event("dragenter")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> - <td>A dragged element or text selection enters a valid drop target.</td> - </tr> - <tr> - <td>{{event("dragleave")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> - <td>A dragged element or text selection leaves a valid drop target.</td> - </tr> - <tr> - <td>{{event("dragover")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> - <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> - </tr> - <tr> - <td>{{event("dragstart")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> - <td>The user starts dragging an element or text selection.</td> - </tr> - <tr> - <td>{{event("drop")}}</td> - <td>{{domxref("DragEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> - <td>An element is dropped on a valid drop target.</td> - </tr> - <tr> - <td>{{event("durationchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> - <td>The <code>duration</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("emptied")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> - <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> - </tr> - <tr> - <td>{{event("end_(SpeechRecognition)","end")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service has disconnected.</td> - </tr> - <tr> - <td>{{event("end_(SpeechSynthesis)","end")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td> - <td>The utterance has finished being spoken.</td> - </tr> - <tr> - <td>{{event("ended")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> - <td>Playback has stopped because the end of the media was reached.</td> - </tr> - <tr> - <td>{{event("ended_(Web_Audio)", "ended")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td> - <td> </td> - </tr> - <tr> - <td>{{event("endEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td> - <td>A resource failed to load.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> - <td>Progression has failed.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>An error occurred while downloading the cache manifest or updating the content of the application.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>An event source connection has been failed.</td> - </tr> - <tr> - <td>{{event("error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>A request caused an error and failed.</td> - </tr> - <tr> - <td>{{event("error_(SpeechRecognitionError)","error")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>A speech recognition error occurs.</td> - </tr> - <tr> - <td>{{event("error_(SpeechSynthesisError)","error")}}</td> - <td>{{domxref("SpeechSynthesisErrorEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>An error occurs that prevents the utterance from being succesfully spoken.</td> - </tr> - <tr> - <td>{{event("focus")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td> - <td>An element has received focus (does not bubble).</td> - </tr> - <tr> - <td>{{event("focusin")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td> - <td>An element is about to receive focus (bubbles).</td> - </tr> - <tr> - <td>{{event("focusout")}}</td> - <td>{{domxref("FocusEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td> - <td>An element is about to lose focus (bubbles).</td> - </tr> - <tr> - <td>{{event("fullscreenchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> - <td>An element was turned to fullscreen mode or back to normal mode.</td> - </tr> - <tr> - <td>{{event("fullscreenerror")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> - <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> - </tr> - <tr> - <td>{{event("gamepadconnected")}}</td> - <td>{{domxref("GamepadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> - <td>A gamepad has been connected.</td> - </tr> - <tr> - <td>{{event("gamepaddisconnected")}}</td> - <td>{{domxref("GamepadEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> - <td>A gamepad has been disconnected.</td> - </tr> - <tr> - <td>{{event("gotpointercapture")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> - <td>Element receives pointer capture.</td> - </tr> - <tr> - <td>{{event("hashchange")}}</td> - <td>{{domxref("HashChangeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> - <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> - </tr> - <tr> - <td>{{event("lostpointercapture")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> - <td>Element lost pointer capture.</td> - </tr> - <tr> - <td>{{event("input")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> - <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> - </tr> - <tr> - <td>{{event("invalid")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> - <td>A submittable element has been checked and doesn't satisfy its constraints.</td> - </tr> - <tr> - <td>{{event("keydown")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td> - <td>A key is pressed down.</td> - </tr> - <tr> - <td>{{event("keypress")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td> - <td>A key is pressed down and that key normally produces a character value (use input instead).</td> - </tr> - <tr> - <td>{{event("keyup")}}</td> - <td>{{domxref("KeyboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td> - <td>A key is released.</td> - </tr> - <tr> - <td>{{event("languagechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> - <td> </td> - </tr> - <tr> - <td>{{event("levelchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> - <td>The <code>level</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("load")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td> - <td>A resource and its dependent resources have finished loading.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> - <td>Progression has been successful.</td> - </tr> - <tr> - <td>{{event("loadeddata")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> - <td>The first frame of the media has finished loading.</td> - </tr> - <tr> - <td>{{event("loadedmetadata")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> - <td>The metadata has been loaded.</td> - </tr> - <tr> - <td>{{event("loadend")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> - <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> - </tr> - <tr> - <td>{{event("loadstart")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> - <td>Progress has begun.</td> - </tr> - <tr> - <td>{{event("mark")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The spoken utterance reaches a named SSML "mark" tag.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A message is received through a WebSocket.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> - <td>A message is received from a Web Worker.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> - <td>A message is received from a child (i)frame or a parent window.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> - <td>{{domxref("MessageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>A message is received through an event source.</td> - </tr> - <tr> - <td>{{event("message_(ServiceWorker)","message")}}</td> - <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td> - <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td> - <td>A message is received from a service worker, or a message is received in a service worker from another context.</td> - </tr> - <tr> - <td>{{event("mousedown")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td> - <td>A pointing device button (usually a mouse) is pressed on an element.</td> - </tr> - <tr> - <td>{{event("mouseenter")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td> - <td>A pointing device is moved onto the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mouseleave")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td> - <td>A pointing device is moved off the element that has the listener attached.</td> - </tr> - <tr> - <td>{{event("mousemove")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td> - <td>A pointing device is moved over an element.</td> - </tr> - <tr> - <td>{{event("mouseout")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td> - <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> - </tr> - <tr> - <td>{{event("mouseover")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td> - <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> - </tr> - <tr> - <td>{{event("mouseup")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td> - <td>A pointing device button is released over an element.</td> - </tr> - <tr> - <td>{{event("nomatch")}}</td> - <td>{{domxref("SpeechRecognitionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service returns a final result with no significant recognition.</td> - </tr> - <tr> - <td>{{event("notificationclick")}}</td> - <td>{{domxref("NotificationEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> - <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td> - </tr> - <tr> - <td>{{event("noupdate")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The manifest hadn't changed.</td> - </tr> - <tr> - <td>{{event("obsolete")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> - </tr> - <tr> - <td>{{event("offline")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> - <td>The browser has lost access to the network.</td> - </tr> - <tr> - <td>{{event("online")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> - <td>The browser has gained access to the network (but particular websites might be unreachable).</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> - <td>A WebSocket connection has been established.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> - <td>An event source connection has been established.</td> - </tr> - <tr> - <td>{{event("orientationchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> - <td>The orientation of the device (portrait/landscape) has changed</td> - </tr> - <tr> - <td>{{event("pagehide")}}</td> - <td>{{domxref("PageTransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> - <td>A session history entry is being traversed from.</td> - </tr> - <tr> - <td>{{event("pageshow")}}</td> - <td>{{domxref("PageTransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> - <td>A session history entry is being traversed to.</td> - </tr> - <tr> - <td>{{event("paste")}}</td> - <td>{{domxref("ClipboardEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> - <td>Data has been transfered from the system clipboard to the document.</td> - </tr> - <tr> - <td>{{event("pause")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> - <td>Playback has been paused.</td> - </tr> - <tr> - <td>{{event("pause_(SpeechSynthesis)", "pause")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The utterance is paused part way through.</td> - </tr> - <tr> - <td>{{event("pointercancel")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> - <td>The pointer is unlikely to produce any more events.</td> - </tr> - <tr> - <td>{{event("pointerdown")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> - <td>The pointer enters the active buttons state.</td> - </tr> - <tr> - <td>{{event("pointerenter")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> - <td>Pointing device is moved inside the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerleave")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> - <td>Pointing device is moved out of the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerlockchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> - <td>The pointer was locked or released.</td> - </tr> - <tr> - <td>{{event("pointerlockerror")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> - <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> - </tr> - <tr> - <td>{{event("pointermove")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> - <td>The pointer changed coordinates.</td> - </tr> - <tr> - <td>{{event("pointerout")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> - <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> - </tr> - <tr> - <td>{{event("pointerover")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> - <td>The pointing device is moved into the hit-testing boundary.</td> - </tr> - <tr> - <td>{{event("pointerup")}}</td> - <td>{{domxref("PointerEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> - <td>The pointer leaves the active buttons state.</td> - </tr> - <tr> - <td>{{event("play")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> - <td>Playback has begun.</td> - </tr> - <tr> - <td>{{event("playing")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> - <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> - </tr> - <tr> - <td>{{event("popstate")}}</td> - <td>{{domxref("PopStateEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> - <td>A session history entry is being navigated to (in certain cases).</td> - </tr> - <tr> - <td>{{event("progress")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> - <td>In progress.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> - <td>The user agent is downloading resources listed by the manifest.</td> - </tr> - <tr> - <td>{{event("push")}}</td> - <td>{{domxref("PushEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> - <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td> - </tr> - <tr> - <td>{{event("pushsubscriptionchange")}}</td> - <td>{{domxref("PushEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> - <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td> - </tr> - <tr> - <td>{{event("ratechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> - <td>The playback rate has changed.</td> - </tr> - <tr> - <td>{{event("readystatechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> - <td>The readyState attribute of a document has changed.</td> - </tr> - <tr> - <td>{{event("repeatEvent")}}</td> - <td>{{domxref("TimeEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> - </tr> - <tr> - <td>{{event("reset")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> - <td>A form is reset.</td> - </tr> - <tr> - <td>{{event("resize")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td> - <td>The document view has been resized.</td> - </tr> - <tr> - <td>{{event("resourcetimingbufferfull")}}</td> - <td>{{domxref("Performance")}}</td> - <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> - <td>The browser's resource timing buffer is full.</td> - </tr> - <tr> - <td>{{event("result")}}</td> - <td>{{domxref("SpeechRecognitionEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td> - </tr> - <tr> - <td>{{event("resume")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>A paused utterance is resumed.</td> - </tr> - <tr> - <td>{{event("scroll")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td> - <td>The document view or an element has been scrolled.</td> - </tr> - <tr> - <td>{{event("seeked")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> - <td>A <em>seek</em> operation completed.</td> - </tr> - <tr> - <td>{{event("seeking")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> - <td>A <em>seek</em> operation began.</td> - </tr> - <tr> - <td>{{event("select")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td> - <td>Some text is being selected.</td> - </tr> - <tr> - <td>{{event("selectstart")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> - <td>A selection just started.</td> - </tr> - <tr> - <td>{{event("selectionchange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> - <td>The selection in the document has been changed.</td> - </tr> - <tr> - <td>{{event("show")}}</td> - <td>{{domxref("MouseEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> - <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> - </tr> - <tr> - <td>{{event("soundend")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Any sound — recognisable speech or not — has stopped being detected.</td> - </tr> - <tr> - <td>{{event("soundstart")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Any sound — recognisable speech or not — has been detected.</td> - </tr> - <tr> - <td>{{event("speechend")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Speech recognised by the speech recognition service has stopped being detected.</td> - </tr> - <tr> - <td>{{event("speechstart")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>Sound that is recognised by the speech recognition service as speech has been detected.</td> - </tr> - <tr> - <td>{{event("stalled")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> - <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td>{{event("start_(SpeechRecognition)","start")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td> - </tr> - <tr> - <td>{{event("start_(SpeechSynthesis)","start")}}</td> - <td>{{domxref("SpeechSynthesisEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The utterance has begun to be spoken.</td> - </tr> - <tr> - <td>{{event("storage")}}</td> - <td>{{domxref("StorageEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> - <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> - </tr> - <tr> - <td>{{event("submit")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> - <td>A form is submitted.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>A request successfully completed.</td> - </tr> - <tr> - <td>{{event("suspend")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> - <td>Media data loading has been suspended.</td> - </tr> - <tr> - <td>{{event("SVGAbort")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> - </tr> - <tr> - <td>{{event("SVGError")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> - </tr> - <tr> - <td>{{event("SVGLoad")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td> - </tr> - <tr> - <td>{{event("SVGResize")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td> - </tr> - <tr> - <td>{{event("SVGScroll")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td> - </tr> - <tr> - <td>{{event("SVGUnload")}}</td> - <td>{{domxref("SVGEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td> - </tr> - <tr> - <td>{{event("SVGZoom")}}</td> - <td>{{domxref("SVGZoomEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> - <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td> - </tr> - <tr> - <td>{{event("timeout")}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> - <td> </td> - </tr> - <tr> - <td>{{event("timeupdate")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> - <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{event("touchcancel")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> - <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> - </tr> - <tr> - <td>{{event("touchend")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> - <td>A touch point is removed from the touch surface.</td> - </tr> - <tr> - <td>{{event("touchenter")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> - <td>A touch point is moved onto the interactive area of an element.</td> - </tr> - <tr> - <td>{{event("touchleave")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> - <td>A touch point is moved off the interactive area of an element.</td> - </tr> - <tr> - <td>{{event("touchmove")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> - <td>A touch point is moved along the touch surface.</td> - </tr> - <tr> - <td>{{event("touchstart")}}</td> - <td>{{domxref("TouchEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> - <td>A touch point is placed on the touch surface.</td> - </tr> - <tr> - <td>{{event("transitionend")}}</td> - <td>{{domxref("TransitionEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> - <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> - </tr> - <tr> - <td>{{event("unload")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td> - <td>The document or a dependent resource is being unloaded.</td> - </tr> - <tr> - <td>{{event("updateready")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td> - <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> - <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> - </tr> - <tr> - <td>{{event("userproximity")}}</td> - <td>{{domxref("UserProximityEvent")}}</td> - <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td> - <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> - </tr> - <tr> - <td>{{event("voiceschanged")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> - <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> - <td> </td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> - <td>A <code>versionchange</code> transaction completed.</td> - </tr> - <tr> - <td>{{event("visibilitychange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> - <td>The content of a tab has become visible or has been hidden.</td> - </tr> - <tr> - <td>{{event("volumechange")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> - <td>The volume has changed.</td> - </tr> - <tr> - <td>{{event("waiting")}}</td> - <td>{{domxref("Event")}}</td> - <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> - <td>Playback has stopped because of a temporary lack of data.</td> - </tr> - <tr> - <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td> - <td>{{domxref("WheelEvent")}}</td> - <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td> - <td>A wheel button of a pointing device is rotated in any direction.</td> - </tr> - </tbody> -</table> - -<h2 id="Non-standard_events">Non-standard events</h2> - -<table class="standard-table" style="width: 100%;"> - <thead> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{event("afterscriptexecute")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla Specific</em></td> - <td>A script has been executed.</td> - </tr> - <tr> - <td>{{event("beforescriptexecute")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla Specific</em></td> - <td>A script is about to be executed.</td> - </tr> - <tr> - <td>{{event("beforeinstallprompt")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Chrome specific</em></td> - <td>A user is prompted to save a web site to a home screen on mobile.</td> - </tr> - <tr> - <td>{{event("cardstatechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td> - </tr> - <tr> - <td>{{event("change")}}</td> - <td>{{domxref("DeviceStorageChangeEvent")}}</td> - <td><em>Firefox OS specific</em></td> - <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> - </tr> - <tr> - <td>{{event("connectionInfoUpdate")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td> - <td>The informations about the signal strength and the link speed have been updated.</td> - </tr> - <tr> - <td>{{event("cfstatechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The call forwarding state changes.</td> - </tr> - <tr> - <td>{{event("datachange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td> - </tr> - <tr> - <td>{{event("dataerror")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> - </tr> - <tr> - <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td> - </tr> - <tr> - <td><code>dragdrop</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>An element is dropped (use {{event("drop")}} instead).</td> - </tr> - <tr> - <td><code>dragexit</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>A drag operation is being ended(use {{event("dragend")}} instead).</td> - </tr> - <tr> - <td><code>draggesture</code> {{deprecated_inline}}</td> - <td><code>DragEvent</code></td> - <td><em>Mozilla specific</em></td> - <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td> - </tr> - <tr> - <td>{{event("icccardlockerror")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td> - </tr> - <tr> - <td>{{event("iccinfochange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td> - </tr> - <tr> - <td>{{event("localized")}}</td> - <td> </td> - <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> - <td>The page has been localized using data-l10n-* attributes.</td> - </tr> - <tr> - <td>{{event("mousewheel")}}{{deprecated_inline}}</td> - <td> </td> - <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> - <td>The wheel button of a pointing device is rotated.</td> - </tr> - <tr> - <td>{{event("MozAudioAvailable")}}</td> - <td>{{domxref("Event")}}</td> - <td><em>Mozilla specific</em></td> - <td>The audio buffer is full and the corresponding raw samples are available.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A window is about to be resized.</td> - </tr> - <tr> - <td>{{event("mozbrowseractivitydone")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when some activity has been completed (complete description TBD.)</td> - </tr> - <tr> - <td>{{event("mozbrowserasyncscroll")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td> - </tr> - <tr> - <td>{{event("mozbrowseraudioplaybackchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td> - </tr> - <tr> - <td>{{event("mozbrowsercaretstatechanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserclose")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td> - </tr> - <tr> - <td>{{event("mozbrowsercontextmenu")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> - </tr> - <tr> - <td>{{event("mozbrowserdocumentfirstpaint")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td> - </tr> - <tr> - <td>{{event("mozbrowsererror")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an error occured while trying to load a content within a browser iframe</td> - </tr> - <tr> - <td>{{event("mozbrowserfindchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> - </tr> - <tr> - <td>{{event("mozbrowserfirstpaint")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td> - </tr> - <tr> - <td>{{event("mozbrowsericonchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the favicon of a browser iframe changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserlocationchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an browser iframe's location changes.</td> - </tr> - <tr> - <td>{{event("mozbrowserloadend")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser iframe has finished loading all its assets.</td> - </tr> - <tr> - <td>{{event("mozbrowserloadstart")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser iframe starts to load a new page.</td> - </tr> - <tr> - <td>{{event("mozbrowsermanifestchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td> - </tr> - <tr> - <td>{{event("mozbrowsermetachange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td> - </tr> - <tr> - <td>{{event("mozbrowseropensearch")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a link to a search engine is found.</td> - </tr> - <tr> - <td>{{event("mozbrowseropentab")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td> - </tr> - <tr> - <td>{{event("mozbrowseropenwindow")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserresize")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td> - </tr> - <tr> - <td>{{event("mozbrowserscroll")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td> - </tr> - <tr> - <td>{{event("mozbrowserscrollareachanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the available scrolling area in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td> - </tr> - <tr> - <td>{{event("mozbrowserscrollviewchange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td> - </tr> - <tr> - <td>{{event("mozbrowsersecuritychange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the SSL state changes within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserselectionstatechanged")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td> - </tr> - <tr> - <td>{{event("mozbrowsershowmodalprompt")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td> - </tr> - <tr> - <td>{{event("mozbrowsertitlechange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the document.title changes within a browser iframe.</td> - </tr> - <tr> - <td>{{event("mozbrowserusernameandpasswordrequired")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when an HTTP authentification is requested.</td> - </tr> - <tr> - <td>{{event("mozbrowservisibilitychange")}}</td> - <td> </td> - <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> - <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td> - </tr> - <tr> - <td>{{event("MozGamepadButtonDown")}}</td> - <td> </td> - <td><em>To be specified</em></td> - <td>A gamepad button is pressed down.</td> - </tr> - <tr> - <td>{{event("MozGamepadButtonUp")}}</td> - <td> </td> - <td><em>To be specified</em></td> - <td>A gamepad button is released.</td> - </tr> - <tr> - <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> - </tr> - <tr> - <td>{{event("MozOrientation")}} {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> - </tr> - <tr> - <td>{{event("MozScrolledAreaChanged")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>The document view has been scrolled or resized.</td> - </tr> - <tr> - <td>{{event("moztimechange")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>The time of the device has been changed.</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is placed on the touch surface (use touchstart instead).</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is moved along the touch surface (use touchmove instead).</td> - </tr> - <tr> - <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A touch point is removed from the touch surface (use touchend instead).</td> - </tr> - <tr> - <td>{{event("alerting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The correspondent is being alerted (his/her phone is ringing).</td> - </tr> - <tr> - <td>{{event("busy")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The line of the correspondent is busy.</td> - </tr> - <tr> - <td>{{event("callschanged")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been added or removed from the list of current calls.</td> - </tr> - <tr> - <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been connected.</td> - </tr> - <tr> - <td>{{event("connecting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to connect.</td> - </tr> - <tr> - <td>{{event("delivered")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been successfully delivered.</td> - </tr> - <tr> - <td>{{event("dialing")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The number of a correspondent has been dialed.</td> - </tr> - <tr> - <td>{{event("disabled")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> - <td>Wifi has been disabled on the device.</td> - </tr> - <tr> - <td>{{event("disconnected")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been disconnected.</td> - </tr> - <tr> - <td>{{event("disconnecting")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to disconnect.</td> - </tr> - <tr> - <td>{{event("enabled")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> - <td>Wifi has been enabled on the device.</td> - </tr> - <tr> - <td>{{event("error_(Telephony)","error")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>An error occurred.</td> - </tr> - <tr> - <td>{{event("held")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call has been held.</td> - </tr> - <tr> - <td>{{event("holding")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to be held.</td> - </tr> - <tr> - <td>{{event("incoming")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is being received.</td> - </tr> - <tr> - <td>{{event("received")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been received.</td> - </tr> - <tr> - <td>{{event("resuming")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>A call is about to resume.</td> - </tr> - <tr> - <td>{{event("sent")}}</td> - <td>{{domxref("SMSEvent")}}</td> - <td><em>To be specified</em></td> - <td>An SMS has been sent.</td> - </tr> - <tr> - <td>{{event("statechange")}}</td> - <td>{{domxref("CallEvent")}}</td> - <td><em>To be specified</em></td> - <td>The state of a call has changed.</td> - </tr> - <tr> - <td>{{event("statuschange")}}</td> - <td> </td> - <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td> - <td>The status of the Wifi connection changed.</td> - </tr> - <tr> - <td>{{event("overflow")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> - </tr> - <tr> - <td>{{event("smartcard-insert")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> - </tr> - <tr> - <td>{{event("smartcard-remove")}}</td> - <td> </td> - <td><em>Mozilla specific</em></td> - <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td> - </tr> - <tr> - <td>{{event("stkcommand")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> - </tr> - <tr> - <td>{{event("stksessionend")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> - </tr> - <tr> - <td><code>text</code></td> - <td> </td> - <td><em>Mozilla Specific</em></td> - <td>A generic composition event occurred.</td> - </tr> - <tr> - <td>{{event("underflow")}}</td> - <td>{{domxref("UIEvent")}}</td> - <td><em>Mozilla specific</em></td> - <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> - </tr> - <tr> - <td><code>uploadprogress</code> {{deprecated_inline}}</td> - <td>{{domxref("ProgressEvent")}}</td> - <td><em>Mozilla Specific</em></td> - <td>Upload is in progress (see {{event("progress")}}).</td> - </tr> - <tr> - <td> - <p>{{event("ussdreceived")}}</p> - </td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> - </tr> - <tr> - <td>{{event("voicechange")}}</td> - <td> </td> - <td><em>Firefox OS specific</em></td> - <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td> - </tr> - </tbody> -</table> - -<h2 id="Mozilla-specific_events">Mozilla-specific events</h2> - -<div class="note"> -<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p> -</div> - -<h3 id="XUL_events">XUL events</h3> - -<table class="standard-table" style="width: 100%;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td>{{event("broadcast")}}</td> - <td> </td> - <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> - <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> - </tr> - <tr> - <td>{{event("CheckboxStateChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> - <td> </td> - <td>XUL</td> - <td>The close button of the window has been clicked.</td> - </tr> - <tr> - <td>{{event("command")}}</td> - <td> </td> - <td>XUL</td> - <td>An element has been activated.</td> - </tr> - <tr> - <td>{{event("commandupdate")}}</td> - <td> </td> - <td>XUL</td> - <td>A command update occurred on a <code>commandset</code> element.</td> - </tr> - <tr> - <td>{{event("DOMMenuItemActive")}}</td> - <td> </td> - <td>XUL</td> - <td>A menu or menuitem has been hovered or highlighted.</td> - </tr> - <tr> - <td>{{event("DOMMenuItemInactive")}}</td> - <td> </td> - <td><em>XUL</em></td> - <td>A menu or menuitem is no longer hovered or highlighted.</td> - </tr> - <tr> - <td>{{event("popuphidden")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip has been hidden.</td> - </tr> - <tr> - <td>{{event("popuphiding")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip is about to be hidden.</td> - </tr> - <tr> - <td>{{event("popupshowing")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip is about to become visible.</td> - </tr> - <tr> - <td>{{event("popupshown")}}</td> - <td><code>PopupEvent</code></td> - <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> - <td>A menupopup, panel or tooltip has become visible.</td> - </tr> - <tr> - <td>{{event("RadioStateChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> - </tr> - <tr> - <td>{{event("ValueChange")}}</td> - <td> </td> - <td>XUL</td> - <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> - </tr> - </tbody> -</table> - -<h3 id="Add-on-specific_events">Add-on-specific events</h3> - -<table class="standard-table" style="width: 100%;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A touch point is swiped across the touch surface</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points start to move away from each other.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points start to rotate around a point.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Two touch points are tapped on the touch surface.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Content has been repainted.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A popup has been blocked</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window has been created.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window is about to be closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>The title of a window has changed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>A link has been added a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> - <td> </td> - <td><em>Addons specifc</em></td> - <td>A link has been removed inside from a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code>meta</code> element has been added to a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code>meta</code> element has been removed from a document.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A modal dialog is about to open.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A modal dialog has been closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The content of an element has been auto-completed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The frame has finished loading (but not its dependent resources).</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Browser fullscreen mode has been entered or left.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The session store will stop tracking this window.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The session store will stop tracking this tab.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab is about to be restored.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been restored.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window state has switched to "ready".</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A window state has switched to "busy".</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The search feature of Panorama has been activated</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The search feature of Panorama has been deactivated</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The frame container of Panorama has been initialized</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The Panorama tab has been shown</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>The Panorama tab has been hidden</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been opened.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been closed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been selected.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been shown.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been hidden.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been pinned.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> - <td> </td> - <td><em>Addons specific</em></td> - <td>A tab has been unpinned.</td> - </tr> - </tbody> -</table> - -<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3> - -<table class="standard-table" style="width: 100%;"> - <tbody> - <tr> - <th class="header" style="width: 220px;">Event Name</th> - <th class="header" style="width: 90px;">Event Type</th> - <th class="header" style="width: 100px;">Specification</th> - <th class="header">Fired when...</th> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>The "Rules" view of the style inspector has been updated.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>The "Rules" view of the style inspector has been changed.</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> - <td> </td> - <td><em>devtools specific</em></td> - <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> - </tr> - </tbody> -</table> - -<h2 id="Categories">Categories</h2> - -<h3 id="Animation_events">Animation events</h3> - -<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p> - -<h3 id="Battery_events">Battery events</h3> - -<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p> - -<h3 id="Call_events">Call events</h3> - -<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p> - -<h3 id="CSS_events">CSS events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p> - -<h3 id="Database_events">Database events</h3> - -<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> - -<h3 id="Document_events">Document events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p> - -<h3 id="DOM_mutation_events">DOM mutation events</h3> - -<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> - -<h3 id="Drag_events">Drag events</h3> - -<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p> - -<h3 id="Element_events">Element events</h3> - -<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p> - -<h3 id="Focus_events">Focus events</h3> - -<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p> - -<h3 id="Form_events">Form events</h3> - -<p>{{event("reset")}}, {{event("submit")}}</p> - -<h3 id="Frame_events">Frame events</h3> - -<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p> - -<h3 id="Input_device_events">Input device events</h3> - -<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p> - -<h3 id="Media_events">Media events</h3> - -<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p> - -<h3 id="Menu_events">Menu events</h3> - -<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p> - -<h3 id="Network_events">Network events</h3> - -<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p> - -<h3 id="Notification_events">Notification events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p> - -<h3 id="Pointer_events">Pointer events</h3> - -<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p> - -<h3 id="Popup_events">Popup events</h3> - -<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p> - -<h3 id="Printing_events">Printing events</h3> - -<p>{{event("afterprint")}}, {{event("beforeprint")}}</p> - -<h3 id="Progress_events">Progress events</h3> - -<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p> - -<h3 id="Resource_events">Resource events</h3> - -<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p> - -<h3 id="Script_events">Script events</h3> - -<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p> - -<h3 id="Sensor_events">Sensor events</h3> - -<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p> - -<h3 id="Session_history_events">Session history events</h3> - -<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p> - -<h3 id="Smartcard_events">Smartcard events</h3> - -<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p> - -<h3 id="SMS_and_USSD_events">SMS and USSD events</h3> - -<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p> - -<h3 id="Storage_events">Storage events</h3> - -<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p> - -<h3 id="SVG_events">SVG events</h3> - -<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p> - -<h3 id="Tab_events">Tab events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p> - -<h3 id="Text_events">Text events</h3> - -<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p> - -<h3 id="Touch_events">Touch events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p> - -<h3 id="Update_events">Update events</h3> - -<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p> - -<h3 id="Value_change_events">Value change events</h3> - -<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p> - -<h3 id="View_events">View events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p> - -<h3 id="Websocket_events">Websocket events</h3> - -<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p> - -<h3 id="Window_events">Window events</h3> - -<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p> - -<h3 id="Uncategorized_events">Uncategorized events</h3> - -<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Event")}}</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> -</ul> diff --git a/files/uk/web/guide/graphics/index.html b/files/uk/web/guide/graphics/index.html deleted file mode 100644 index 1c2b45e7a9..0000000000 --- a/files/uk/web/guide/graphics/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Графіка для Web -slug: Web/Guide/Graphics -tags: - - 2D - - 3D - - Canvas - - HTML5 - - SVG - - WebGL - - WebRTC - - Веб - - Графіка -translation_of: Web/Guide/Graphics -original_slug: Web/Guide/Графіка ---- -<p><span class="seoSummary">Сучасним сайтам і веб-додаткам потрібне відображення графіки.</span> Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. <span class="seoSummary">В статтях далі сказано як це можна зробити.</span></p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="2D_Графіка">2D Графіка</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> - <dd>Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> - <dd>Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Переглянути все...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="3D_Графіка">3D Графіка</h2> - -<dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.</dd> -</dl> - -<h2 id="Відео">Відео</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Використання HTML5 аудіо і відео</a></dt> - <dd>Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.</dd> - <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> - <dd>RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).</dd> -</dl> -</div> -</div> diff --git a/files/uk/web/guide/html/content_categories/index.html b/files/uk/web/guide/html/content_categories/index.html deleted file mode 100644 index 4ec3c5ecbc..0000000000 --- a/files/uk/web/guide/html/content_categories/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Категорії вмісту -slug: Web/Guide/HTML/Content_categories -tags: - - Веб - - Навчальний - - ПотребуєОновлення - - Просунутий -translation_of: Web/Guide/HTML/Content_categories ---- -<p><span class="seoSummary">Кожен елемент HTML має дотримуватись правил, що визначають який тип вмісту він може мати. Такі правила згруповано у моделі вмісту, котрі є такими самими по відношенню до кількох елементів. Кожен елемент HTML належить до жодного, одного, або кількох моделей вмісту, кожна з котрих визначає правила, котрих має дотримуватись вміст елемента у документі, написаного за допомогою HTML.</span></p> - -<p>Існує три типи категорій вмісту:</p> - -<ul> - <li>Основні категорії вмісту, котрі визначають основні правила, котрими користується велика кількість елементів;</li> - <li>Категорії вмісту для форм, котрі визначають правила вмісту для елементів в межах форм;</li> - <li>Особливі категорії вмісту, котрі описують рідкісні категорії, що використовуються лише кількома елементами, інколи лише у специфічних випадках.</li> -</ul> - -<div class="note"> -<p><strong>Примітка: </strong><span id="result_box" lang="uk"><span>Більш докладне обговорення цих категорій вмісту та їх порівняльних функцій виходить за межі цієї статті;</span> <span>для цього ви можете прочитати </span></span><a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">відповідні частини специфікації HTML.</a></p> -</div> - -<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> - -<h2 id="Основні_категорії_вмісту">Основні категорії вмісту</h2> - -<h3 id="Вміст_метаданих">Вміст метаданих</h3> - -<p>Елементи, що належать до категорії вмісту метаданих, змінюють презентацію або поведінку цілого документу, налаштовують посилання на інші документи, або ж передають несуть, незалежну інформацію.</p> - -<p>Елементи, що належать до цієї категорії {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} і {{HTMLElement("title")}}.</p> - -<h3 id="Потоковий_вміст">Потоковий вміст</h3> - -<p>До елементів, що належать до потокового вмісту, типовим є текстовий або ж вбудований вміст. Такими елементами є: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} і текст.</p> - -<p>Є іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p> - -<ul> - <li>{{HTMLElement("area")}}, якщо він є нащадком елемента {{HTMLElement("map")}}</li> - <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> - <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> - <li>{{HTMLElement("style")}}, якщо присутній атрибут {{htmlattrxref("scoped","style")}}</li> -</ul> - -<h3 id="Секційний_вміст">Секційний вміст</h3> - -<p>Елементи, що належать до секційної моделі вмісту, створюють <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">секцію в заданому документі</a>, котра визначає межі елементів у {{HTMLElement("header")}}, {{HTMLElement("footer")}} і <a href="#Heading_content" title="#heading content">вмісту заголовків</a>.</p> - -<p>Елементами, котрі належать цій категорії є: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} та {{HTMLElement("section")}}. </p> - -<div class="note"> -<p><em>Примітка: </em> Не сплутайте цю модель вмісту з <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">кореневою секційною</a> категорією, котра ізолює свій вміст від загального обрису документу.</p> -</div> - -<h3 id="Вміст_заголовку">Вміст заголовку</h3> - -<p>Контент заголовку визначає назву секції, котра явно визначена елементом <a href="#Sectioning_content" title="#sectioning content">секційного вмісту</a> або ж неявно визначена самим елементом вмісту заголовку.</p> - -<p>Елементами, що належать до заданої категорії є: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} та {{HTMLElement("hgroup")}}.</p> - -<div class="note"> -<p><em>Примітка:</em> попри те, що {{HTMLElement("header")}} елемент швидше за все матиме "вміст заголовку", сам він не відноситься до елементів вмісту заголовку.</p> -</div> - -<h3 id="Фразовий_вміст">Фразовий вміст</h3> - -<p>Фразовий вміст визначає текст та розмітку, котру він вміщує. Фразовий вміст формує абзаци.</p> - -<p>Елементами, що належать до цієї категорії є {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} також чистий текст (в тому числі котрий складається з пробілів).</p> - -<p>Іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p> - -<ul> - <li>{{HTMLElement("a")}}, якщо вміщує лише фразовий вміст</li> - <li>{{HTMLElement("area")}}, якщо є нащадком елемента {{HTMLElement("map")}}</li> - <li>{{HTMLElement("del")}}, якщо вміщує лише фразовий вміст</li> - <li>{{HTMLElement("ins")}}, якщо вміщує лише фразовий вміст</li> - <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> - <li>{{HTMLElement("map")}}, якщо вміщує лише фразовий вміст</li> - <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> -</ul> - -<h3 id="Вбудований_вміст">Вбудований вміст</h3> - -<p>Вбудований вміст імпортує інші ресурси, або ж вставляє вміст з інших мов розмітки або простору імен у документ. Елементи, що належать до цієї категорії включають: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> - -<h3 id="Інтерактивний_вміст">Інтерактивний вміст</h3> - -<p>Інтерактивний вміст включає елементи, котрі спроектовано виключно для взаємодії з користувачем. Елементи, котрі належать до цієї категорії: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</p> - -<p>Декотрі елементи належать до цієї категорії лише за певних обставин:</p> - -<ul> - <li>{{HTMLElement("audio")}}, якщо присутній атрибут {{htmlattrxref("controls", "audio")}}</li> - <li>{{HTMLElement("img")}}, якщо присутній атрибут {{htmlattrxref("usemap", "img")}}</li> - <li>{{HTMLElement("input")}}, якщо атрибут {{htmlattrxref("type", "input")}} не у прихованому стані</li> - <li>{{HTMLElement("menu")}}, якщо атрибут {{htmlattrxref("type", "menu")}} у стані "панелі інструментів"</li> - <li>{{HTMLElement("object")}}, якщо присутній атрибут {{htmlattrxref("usemap", "object")}}</li> - <li>{{HTMLElement("video")}}, якщо присутній атрибут {{htmlattrxref("controls", "video")}}</li> -</ul> - -<h3 id="Видимий_вміст">Видимий вміст</h3> - -<p>Вміст є видимим коли він не пустий і не прихований. Елементи чиєю моделлю є потоковий міст або фразовий вміст, повинні мати принаймні один вузол видимого вмісту.</p> - -<h3 id="Вміст_форм">Вміст форм</h3> - -<p>Вміст форм вміщує елементи, котрі мають власника форми, визначеного атрибутом <strong>form</strong>. Власником форми є елемент {{HTMLElement("form")}}, або ж елемент, чий ідентифікатор (id), вказано у атрибуті <strong>form</strong>.</p> - -<ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> - -<p> <span class="short_text" id="result_box" lang="uk"><span>Ця категорія містить кілька підкатегорій</span></span>:</p> - -<dl> - <dt><a name="Form_listed">listed</a></dt> - <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, перелічені в</span></span> <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> та fieldset.elements IDL колекціях. Містять {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> - <dt><a name="Form_labelable">labelable</a></dt> - <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, що можна пов'язати</span></span> з {{HTMLElement("label")}} елементами. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> - <dt><a name="Form_submittable">submittable</a></dt> - <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути використані для побудови набору даних форми, коли відправляється форма</span></span>. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> - <dt><a name="Form_resettable">resettable</a></dt> - <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути скинуті при зміні форми.</span></span> Містять {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> -</dl> - -<h2 id="Додаткові_категорії">Додаткові категорії</h2> - -<p><span id="result_box" lang="uk"><span>Є деякі вторинні класифікації елементів, які можуть бути корисними та про які вам треба знати.</span></span></p> - -<h3 id="Елементи_підтримки_скрипту">Елементи підтримки скрипту</h3> - -<p><span id="result_box" lang="uk"><span><strong>Елементи підтримки скрипту</strong> є елементами, які безпосередньо не беруть участі у виводі документа.</span> <span>Замість цього вони виконують роль підтримки скриптів, або безпосередньо містять код, або вказувають на нього, або шляхом визначення даних, які будуть використовуватися скриптом.</span></span></p> - -<p>Елементами підтримки скрипту є:</p> - -<p>{{HTMLElement("script")}} {{HTMLElement("template")}}</p> - -<h2 id="Прозора_модель_вмісту">Прозора модель вмісту</h2> - -<p><span id="result_box" lang="uk"><span>Якщо елемент має прозору модель вмісту, його вміст має бути структурований таким чином, щоб він був дійсним HTML5 кодом, навіть якщо прозорий елемент було вилучено і замінено дочірними елементами.</span></span></p> - -<p>Наприклад, {{HTMLElement("del")}} і {{HTMLELement("ins")}} елементи є прозорими:</p> - -<pre><p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p> -</pre> - -<p>Навіть якщо ці елементи було вилучено, <span id="result_box" lang="uk"><span>цей фрагмент як і раніше буде дійсним HTML</span></span>.</p> - -<pre><p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p> -</pre> - -<h2 id="Інші_моделі_вмісту">Інші моделі вмісту</h2> - -<p>Секціонування кореню.</p> diff --git a/files/uk/web/guide/html/html5/index.html b/files/uk/web/guide/html/html5/index.html deleted file mode 100644 index 8ae6ab8dcf..0000000000 --- a/files/uk/web/guide/html/html5/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -<p><span class="seoSummary"><strong>HTML5</strong> є найновішим стандартом,що описує <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Цей термін представляє дві різні концепції:</p> - -<ul> - <li><span class="seoSummary">Це нова версія <em>мови </em>HTML, з новими елементами, атрибутами і поведінкою</span></li> - <li><span class="seoSummary">Це великий стек <strong>технологій, </strong>котрі надають більшого<strong> </strong>різноманіття та потужності Веб-сайтам та додаткам. </span>Цей набір інколи називають <em>HTML5 & friends, </em>але часто скорочують до <em>HTML5</em>.</li> -</ul> - -<p>Спроектована, для використання всіма розробниками Відкритого Вебу (Open Web), ця сторінка надає посилання до численних ресурсів про HTML5 технологї, розсортованні в декілька груп, в залежності від їх функцій.</p> - -<ul> - <li><em>Семантика</em>: дозволяє описати якомога точніше з чого складається ваш контент.</li> - <li><em>Зв'язок</em>: дозволяє вам взаємодіяти з сервером новим та інноваційним шляхом.</li> - <li><em>Оффлайн та сховище</em>: надає можливість веб-сторінкам зберігати дані на стороні клієнта локально та оперувати оффлайном ефективніше.</li> - <li><em>Мультимедіа</em>: робить відео та аудіо першокласними мешканцями Відкритого Вебу.</li> - <li><em>2D/3D графіка та ефекти</em>: дозволяє безліч презентаційних варіантів.</li> - <li><em>Ефективність та інтеграція</em>: надає більшу оптимізацію швидкості та кращого використання заліза (hardware) комп'ютера. </li> - <li><em>Доступ до пристрою</em>: дозволяє використання різноманітних пристроїв вводу/виводу</li> - <li><em>Стилі</em>: Дозволяє авторам створювати більш складні і витончені теми.</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="сЕМАНТиКА" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">сЕМАНТиКА</h2> - -<dl> - <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> - <dd>Огляд нових елементів HTML5 для структуризації контенту: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Використання відео та аудіо в HTML5</a></dt> - <dd>Елементи {{HTMLElement("audio")}} та {{HTMLElement("video")}} вбудовують та дозволяють керування новим мультимедійним контентом.</dd> - <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Форми в HTML5</a></dt> - <dd>Огляд <span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">вдосконален</span></span>ь для веб-форм в HTML5: перевірка обмежень API, декілька нових атрибутів, нові значення для атрибуту {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} а також новий елемент {{HTMLElement("output")}} .</dd> - <dt>Нові семантичні елементи</dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">Поруч із розділами, носіями(медіа) та елементами форм</span></span>, в HTML5 є численні нові елементи: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, або {{HTMLElement("meter")}} та {{HTMLElement("main")}}, що збільшують кількість <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">чинних елементів HTML5</a>.</dd> - <dt><span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">Вдосконалення в</span></span> {{HTMLElement("iframe")}}</dt> - <dd>Використовуючи атрибути {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, та {{htmlattrxref("srcdoc", "iframe")}}, автори зараз можуть бути певними щодо рівня безпеки та бажаної візуалізації елементу {{HTMLElement("iframe")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd>Дозволяє безпосередньо вставлені математичні формули.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Знайомство з HTML5</a></dt> - <dd><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі показано, як вказати браузеру, що ви використовуєте HTML5 у своєму веб-дизайні чи веб-програмі.</span></span></dd> - <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-сумісний парсер</a></dt> - <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> -</dl> - -<h2 id="Звязок" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Зв'язок</h2> - -<dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> -</dl> - -<h2 id="Оффлайн_та_сховище" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Оффлайн та сховище</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></dt> - <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> - <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> - <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt> - <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> - <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> -</dl> - -<h2 id="Мультимедіа" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Мультимедіа</h2> - -<dl> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> - <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> - <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> - <dt>Track and WebVTT</dt> - <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> -</dl> - -<h2 id="3D_Графіка_та_ефекти" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D Графіка та ефекти </h2> - -<dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt> - <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code><canvas></code> elements</a></dt> - <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> - <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> - <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Ефективність_та_Інтеграція" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Ефективність та Інтеграція</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> - <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> - <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> - <dt>JIT-compiling JavaScript engines</dt> - <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> - <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt> - <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> - <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> - <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> - <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> - <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> - <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> - <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> - <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> - <dd>Allows control of animations rendering to obtain optimal performance.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> - <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> - <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> -</dl> - -<h2 id="Доступ_до_пристрою" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Доступ до пристрою</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> - <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> - <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> - <dd>Handlers to react to events created by a user pressing touch screens.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> - <dd>Let browsers locate the position of the user using geolocation.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> - <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> -</dl> - -<h2 id="Стилі" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Стилі</h2> - -<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> - -<dl> - <dt>New background styling features</dt> - <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> - <dt>More fancy borders</dt> - <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> - <dt>Animating your style</dt> - <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> - <dt>Typography improvement</dt> - <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> - <dt>New presentational layouts</dt> - <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> -</dl> -</div> -</div> diff --git a/files/uk/web/guide/html/using_html_sections_and_outlines/index.html b/files/uk/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 756fb825b1..0000000000 --- a/files/uk/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Використання HTML-секцій та структура документу -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу ---- -<div class="note"> -<p> В перекладі наводяться терміни <em>схема документу</em> та<em> алгоритм схематизації</em> у відповідності до англійських <em>outline </em>та <em>outline algorithm</em>, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.</p> - -<p>Також у відповідності до <em>section</em> та <em>subsection</em> використано <em>розділ </em>та <em>підрозділ</em>, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.</p> -</div> - -<div class="warning"> -<p><strong>Зверніть увагу</strong>: На даний момент немає відомих реалізацій алгоритму побудови <em>схеми документа</em> в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати <a href="http://www.w3.org/TR/html5/sections.html#rank">ранг</a> заголовку (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) для опису структури документу.</p> -</div> - -<p>Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.</p> - -<h2 id="Структура_документу_в_HTML_4">Структура документу в HTML 4</h2> - -<p>Структура документу, тобто семантична структура, що знаходиться між <code><body></code> і <code></body></code>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.</p> - -<p>Таким чином наступна розмітка:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="section" id="forest-elephants" > - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <div class="subsection" id="forest-habitat" > - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </div> -</div> -</pre> -</div> - -<p>зводиться до наступної схеми:</p> - -<pre>1. Forest elephants - 1.1 Habitat -</pre> - -<p>Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:</p> - -<pre class="brush:xml"><h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - <h2>Diet</h2> -<h1>Mongolian gerbils</h1> -</pre> - -<p>зумовлює наступну схему:</p> - -<pre>1. Forest elephants - 1.1 Habitat - 1.2 Diet -2. Mongolian gerbils -</pre> - -<h2 id="Проблеми_розв'зані_за_допомогою_HTML5">Проблеми, розв'зані за допомогою HTML5</h2> - -<p>Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:</p> - -<ol> - <li>Використання елементу {{HTMLElement("div")}} для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту <strong>class</strong>) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0_%D1%80%D0%B5%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B0%D1%86%D0%B8%D0%B8">реабілітаційних технологій</a>, які адаптують та доносять інформацію до людей (<em>від перекл.:</em> як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для <em>розділів</em>, {{HTMLElement("section")}}, HTML Section Element.</li> - <li>Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.</li> - <li>In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.</li> - <li>Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.</li> -</ol> - -<p>More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.</p> - -<h2 id="Алгоритм_схематизації_HTML_5">Алгоритм схематизації HTML 5</h2> - -<p>Let's consider the algorithms underlying the way HTML handles sections and outlines.</p> - -<h3 id="Defining_sections">Defining sections</h3> - -<p>All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. </p> - -<div class="note">Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}</div> - -<p>Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:</p> - -<pre class="brush:xml"><section> - - <h1>Forest elephants</h1> - - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - - <aside> - <p>advertising block</p> - </aside> - -</section> - -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>This leads to the following outline:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat -</pre> - -<h3 id="Defining_headings">Defining headings</h3> - -<p>While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.</p> - -<p>The heading elements have a <em>rank</em> given by the number in the element name, where {{HTMLElement("h1")}} has the <em>highest</em> rank, and {{HTMLElement("h6")}} has the <em>lowest</em> rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. - ...this section continues... -</section></pre> - -<p>This creates the following outline:</p> - -<pre>1. Forest elephants - 1.1 Habitat -2. Mongolian gerbils</pre> - -<p>Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)</p> - -<h3 id="Implicit_sectioning">Implicit sectioning</h3> - -<p>Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called <em>implicit sectioning</em>.</p> - -<p>The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3 class="implicit subsection">Habitat</h3> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... -</section></pre> - -<p>leading to the following outline:</p> - -<pre>1. Forest elephants - 1.1 Habitat <em>(implicitly defined by the h3 element)</em> -</pre> - -<p>If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: </p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h1 class="implicit section">Mongolian gerbils</h1> - <p>Mongolian gerbils are cute little mammals. - ...this section continues... -</section></pre> - -<p>leading to the following outline: </p> - -<pre>1. Forest elephants -2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em> -</pre> - -<p>If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:</p> - -<pre class="brush:xml"><body> - <h1>Mammals</h1> - <h2>Whales</h2> - <p>In this section, we discuss the swimming whales. - ...this section continues... - <section> - <h3>Forest elephants</h3> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3>Mongolian gerbils</h3> - <p>Hordes of gerbils have spread their range far beyond Mongolia. - ...this subsection continues... - <h2>Reptiles</h2> - <p>Reptiles are animals with cold blood. - ...this section continues... - </section> -</body></pre> - -<p>leading to the following outline:</p> - -<pre>1. Mammals - 1.1 Whales <em>(implicitly defined by the h2 element)</em> - 1.2 Forest elephants <em>(explicitly defined by the section element)</em> - 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> -2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em> -</pre> - -<p>This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.</p> - -<p>An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.</p> - -<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3> - -<p> A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.</p> - -<p>Example:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h2>Introduction</h2> - <p>In this section, we discuss the lesser known forest elephants</p> - </section> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. Let's - look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> - <blockquote> - <h1>Borneo</h1> - <p>The forest element lives in Borneo...</p> - </blockquote> - </section> -</section> -</pre> - -<p>This example results in the following outline:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat</pre> - -<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p> - -<h3 id="Sections_outside_the_outline">Sections outside the outline</h3> - -<p> HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p> - -<ol> - <li>The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.</li> - <li>The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li> -</ol> - -<h3 id="Headers_and_Footers">Headers and Footers</h3> - -<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p> - -<ol> - <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li> - <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li> -</ol> - -<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p> - -<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2> - -<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p> - -<p>A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p> - -<h2 id="Using_HTML5_elements_in_non-HTML5_browsers">Using HTML5 elements in non-HTML5 browsers</h2> - -<p>Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as <code>display:inline</code> by default:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p> - -<p>This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are created using JavaScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="Підсумок">Підсумок</h2> - -<p>Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p> - -<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/uk/web/guide/index.html b/files/uk/web/guide/index.html deleted file mode 100644 index c11dfa4089..0000000000 --- a/files/uk/web/guide/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Довідник веб-розробника -slug: Web/Guide -tags: - - Guide - - Landing - - TopicStub - - Web -translation_of: Web/Guide ---- -<p><strong>Ці статті нададуть Вам практичні рекомендації, що допоможуть з ефективністю використовувати специфічні технології та АРІ. </strong></p> - -<div> -<div> -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML">Довідник розробника HTML</a></dt> - <dd class="landingPageList"><strong>Мова розмітки гіпертексту (англ. <em>HyperText Markup Language</em> - HTML)</strong> - основна мова майже всього веб-контенту. Більша частина того, що ти бачиш на екрані, описано, в основному, з використанням HTML.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">Довідник розробника CSS</a></dt> - <dd class="landingPageList">Каскадні таблиці стилів (англ. <em>Cascading Style Sheets</em> - CSS) - мова таблиць стилів, що використовується для опису відображення документу, написанного мовою HTML.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Довідник розробника з подій</a></dt> - <dd class="landingPageList">Події відносяться як до шаблонів дизайну, які застосовують для асинхронного регулювання різних інцидентів, що виникають протягом терміну експлуатації веб-сторінки, так і для означення імен, характеристик та застосування великої кількості інцидентів різних типів.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Графіка в Мережі</a></dt> - <dd class="landingPageList">Сучасні веб-сайти та додатки часто потребують відобразити графіку різної складності.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Путівник до Веб API</a></dt> - <dd class="landingPageList">Список усіх Веб АРІ та що вони роблять.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> - <dd>JavaScript є потужною скриптовою мовою для створення веб-додатків.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Локалізація та кодування символів</a></dt> - <dd class="landingPageList">Браузери внутрішньо обробляють текст як Unicode. Однак, спосіб представлення символів в бітовому значенні (кодування символів) використовується для передачі тексту через мережу до браузера. <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML специфікація рекомендує</a> використання кодування UTF-8 (яке здатне відображати Unicode цілком) і не залежно від того, яке кодування було використано, вимагає від Веб-контенту оголошення цього кодування.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Розробка мобільного інтернету</a></dt> - <dd class="landingPageList">Ця сторінка представляє огляд деяких з основних технік, необхідних для оформлення веб-сайтів, що будуть добре працювати на мобільних пристроях. Якщо ви шукаєте інформацію про проект Mozilla's Firefox OS, відвідайте сторінку <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Або ж вас може зацікавити <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox для Android</a>.</dd> -</dl> - -<dl> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Оптимізація та продуктивність</a></dt> - <dd class="landingPageList">Розробляючи сучасні веб-додатки та сайти, важливо забезпечити їх високу продуктивність. Тобто, зробити так, щоб все у них працювало швидко та ефективно. Це дозволяє їм оптимально працювати як у користувачів потужних десктопних систем та і на менш потужних мобільних пристроях. </dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Парсування та серіалізація XML</a></dt> - <dd class="landingPageList">Веб-платформи надають наступні об’єкти для парсування та серіалізації XML:</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt> - <dd class="landingPageList">Формат SVG-in-OpenType на даний момент працює в руках <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Як тільки ми будемо готові для ширшого затвердження, інформація з <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> буде переміщена сюди, оновлена і розширена.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt> - <dd class="landingPageList"><strong>Відкритий формат шрифту для Веб (англ. </strong><em>the <strong>Web Open Font Format - WOFF</strong></em>) відкритий формат шрифтів, розроблений Mozilla спільно з Type Supply, LettError, та іншими організаціями.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">Користувацький досвід</a></dt> - <dd class="landingPageList">Якщо ви хочете, щоб користувачі повертались і використовували ваш додаток чи веб-сайт знову і знову, для вас важливо зробити досвід користування ним приємним. Тут ви зможете знайти статті, що зможуть допомогти в цьому. </dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Використання об’єктів форм даних</a></dt> - <dd class="landingPageList">Об’єкти <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> дозволяють вам поєднувати набір ключ/значення для відправки з використанням <code>XMLHttpRequest (запитів)</code>. Спершу призначені для використання в надсиланні форм даних, але можуть бути використані незалежно від форм для передачі зашифрованих даних. Дані, що передаються, мають такий же формат, як і у методі форми <code>submit(), </code>яка була б використана для відправки даних якби кодування форми було визначено як "multipart/form-data".</dd> - <dt class="landingPageList"><a href="/en-US/docs/Glossary">Глоссарій</a></dt> - <dd class="landingPageList">Дає визначення численним технічним термінам, пов’язаним з Мережею та інтернетом.</dd> -</dl> -</div> -</div> -</div> -</div> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> -</ul> diff --git a/files/uk/web/houdini/index.html b/files/uk/web/houdini/index.html deleted file mode 100644 index 73a9b05abb..0000000000 --- a/files/uk/web/houdini/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: CSS Гудіні -slug: Web/Houdini -translation_of: Web/Houdini -original_slug: Web/Гудіні ---- -<p>Гудіні - це набір низькорівневих API, які надають доступ до СSS движка, даючи розробникам змогу розширити СSS підключаючись до процесу створення макету та застосування стилів в процесі роботи браузерного движка. Гудіні - набір API, які дають розробникам прямий доступ <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model</a> (CSSOM), дозволяючи розробникам писати код який браузер може розібрати як CSS, таким чином створюючи нові СSS властивості не чекаючи щоб вони були реалізовані в браузерах.</p> - -<h2 id="Переваги_Гудіні">Переваги Гудіні</h2> - -<p>Гудіні дозволяє швидше змінювати стилі ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає Гудіні дозволяє швидше змінювати стилі ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає об'єктно-орієнтований API для роботи з CSS значеннями в JavaScript.</p> - -<p>Гудіні CSS Типізована OM є a CSS Об'єктвною моделю з типами і методами, показуючи значення як JavaScript об'єкт, це робить Гудіні бульш інтуїтивним ніж <code><a href="/en-US/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> маніпуляції. Кожний елемент і таблиця стилів мають карту стилів, до якої можна доступитись через його значення <code><a href="/en-US/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code>.</p> - -<p>Особливістю СSS Гудіні є <a href="/en-US/docs/Web/API/Worklet">Worklet</a>. З ворклетами, ви можете створювати модульний CSS, це потребує однієї лінійки JavaScript для імпорту налаштовуваних компоненів: без пре-процесорів, пост-процесорів або JavaScript фреймворків.</p> - -<pre class="brush: js"><script> - CSS.paintWorklet.addModule('csscomponent.js'); -</script> -</pre> - -<p>Цей доданий модуль містить <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> фунцкію, яка реєструє повністю налаштовувані ворклетів.</p> - -<p> Функція CSS <code>paint()</code> включає в себе ім'я ворклета а також можливі додаткові параметри. Ворклет також має доступ до звичайних значеннь елемента, їх не потрібно передавати як параметри функції.</p> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">li</span> <span class="punctuation token">{</span> - <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">paint</span><span class="punctuation token">(myComponent</span><span class="punctuation token">,</span> stroke<span class="punctuation token">,</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">; - --hilights: blue; - --lowlights: green;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="blockIndicator note"> -<p><strong>Примітка</strong>: З великою силою приходить велика відповідальність! З Гудіні ви можете придумати свій власний макет, сітку, або реалізацію регіонів, але робити це не завжди найкраща ідея. Робоча група CSS робить багато роботи щоб упевнетись, що всі функції є продуктивними, розглядає всі можливі країні випадки і забезпечує безпеку, конфіденційність і доступність. Коли ви почнете з СSS Гудіні, упевніться що ви дотримуєтесь цих стандартів і починайте з малого перш ніж перейти до більш амбітних проектів.</p> -</div> - -<h2 class="Documentation" id="Гудіні_API">Гудіні API</h2> - -<p>Ніжче ви можете знайти посилання на основну довідку про API, які знаходяться під егідою Гудіні, а також посилання на туторіали.</p> - -<div class="hidden"> -<p>Почніть з <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini/learn">Houdini, an introduction</a> — тут ви знайдете коротку історію Гудіні а також швидкий огляд його головних особливостей.</p> -</div> - -<dl> - <dt>CSS Парсер API</dt> - <dd>API використовуючи CSS парсер, для парсингу CSS-подібних мов в слабо типізовані.<br> - <br> - Для цього АPI ще не написано туторіалу чи довідки.</dd> - <dt>API CSS властивостей і значеннь</dt> - <dd>Визначає API для нових CSS властивостей. Властивості зареєстровані з цим API забезпечені синтаксисом синтаксичного аналізу, який визначає тип, поведінкою успадкування, і початкове значення.<br> - <br> - <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API reference</a><br> - <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API guide</a></dd> - <dt></dt> - <dt>CSS Typed OM</dt> - <dd>Перетворює CSSOM в значно типізований JavaScript перетворення може значно вплинути на продуктивність. CSS типізована ОМ виставляє CSS значення як JavaScript об'єкти та дозволяє ефективно керувати ним.<br> - <br> - <a href="/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM reference</a><br> - <a href="/en-US/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM guide</a></dd> - <dt>CSS Layout API </dt> - <dd> - <p>Призначений для поліпшення розтяжності CSS, це API дозволяє розробникам створювати свої власні алгоритми компонування, такі як макет або лінії прив'язки. Це ще не доступно спочатку.</p> - - <p>Для цього АPI ще не написано туторіалу чи довідки.</p> - </dd> - <dt>CSS Painting API</dt> - <dd> - <p>Призначений для поліпшення розтяжності CSS — дозволяє розробникам писати JavaScript функції що доволяють рисувати прямо в задній фон, границі, або зміст елементу за допомогою CSS функції <code>paint()</code> .<br> - <br> - <a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API reference</a><br> - <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API guide </a></p> - </dd> - <dt>Worklets </dt> - <dd> - <p>API для запуску скриптів на різних етапах потоку рендерингу незалежно від головного JavaScript середовища. Worklets концептуально схожі на <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a>, і застосовуються для розширення движка рендерину.</p> - - <p><br> - <a href="/en-US/docs/Web/API/Worklet">Worklets reference</a></p> - </dd> -</dl> - -<h2 id="Інші_теми">Інші теми</h2> - -<p>Схожі теми, які можуть юути цікаві, так як вони можуть бути використані в поєднанні з API Гудіні цікавими способами.</p> - -<dl> - <dt>Composite Scrolling and Animation </dt> -</dl> diff --git a/files/uk/web/html/attributes/index.html b/files/uk/web/html/attributes/index.html deleted file mode 100644 index f7499d1bf4..0000000000 --- a/files/uk/web/html/attributes/index.html +++ /dev/null @@ -1,654 +0,0 @@ ---- -title: HTML attribute reference -slug: Web/HTML/Attributes -translation_of: Web/HTML/Attributes ---- -<p>Елементи в HTML можуть мати <strong>атрибути; </strong>це додаткові величини, які певним чином змінюють безпосередньо елементи або їх поведінку для отримання необхідного користувачеві ефекту.</p> - -<h2 id="Список_атрибутів">Список атрибутів</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Назва атрибуту</th> - <th>Елементи</th> - <th>Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>accept</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Список типів даних, що приймає сервер, зазвичай, типів файлів.</td> - </tr> - <tr> - <td><code>accept-charset</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Список кодувань, які підтримуються.</td> - </tr> - <tr> - <td><code>accesskey</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Визначає комбінацію клавіш швидкого доступу для активації або фокусування на елементі.</td> - </tr> - <tr> - <td><code>action</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>URI програми, яка обробляє інформацію, передану формою.</td> - </tr> - <tr> - <td><code>align</code></td> - <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> - <td>Визначає вирівнювання елементу по горизогталі</td> - </tr> - <tr> - <td><code>alt</code></td> - <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> - <td>Показує альтарнативний текст у разі неможливості відобразити зображення.</td> - </tr> - <tr> - <td><code>async</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Вказуєна те, що скрипт повинен виконуватися асинхронно.</td> - </tr> - <tr> - <td><code>autocomplete</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Вказує чи дозволено автозаповнення полів браузером.</td> - </tr> - <tr> - <td><code>autofocus</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Після завантаження сторінки, відбуватиметься автоматичне фокусування на цьому елементі.</td> - </tr> - <tr> - <td><code>autoplay</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Відтворює аудіо чи відео одразу, коли це стає можливим.</td> - </tr> - <tr> - <td><code>autosave</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Попередні значення повинні зберігатися у випадному списку, щоб можна було обрати значення з різних завантажень сторніки.</td> - </tr> - <tr> - <td><code>bgcolor</code></td> - <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> - <td> - <p>Визначає колір заднього фону елементу.</p> - - <div class="note"> - <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("background-color") }}.</p> - </div> - </td> - </tr> - <tr> - <td><code>border</code></td> - <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> - <td> - <p>Ширина границі.</p> - - <div class="note"> - <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("border") }}.</p> - </div> - </td> - </tr> - <tr> - <td><code>buffered</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Містить тривалість часу буферованого медіафайлу.</td> - </tr> - <tr> - <td><code>challenge</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>A challenge string that is submitted along with the public key.</td> - </tr> - <tr> - <td><code>charset</code></td> - <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> - <td>Оголошує кодування символів сторінки або скрипту.</td> - </tr> - <tr> - <td><code>checked</code></td> - <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> - <td>Вказує чи слід перевіряти елемент при завантаженні сторінки.</td> - </tr> - <tr> - <td><code>cite</code></td> - <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> - <td>Містить URI, що вказує на джерело цитати або зміни.</td> - </tr> - <tr> - <td><code>class</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Часто використовують з CSS для задання стилю елементів зі спільними властивостями.</td> - </tr> - <tr> - <td><code>code</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>Вказує URL файла класу аплету для завантаження та виконання.</td> - </tr> - <tr> - <td><code>codebase</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>Цей атрибут надає абсолютну чи відносну URL директорії, де зберігаються файли .class аплету.</td> - </tr> - <tr> - <td><code>color</code></td> - <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> - <td> - <p>Цей атрибут задає колір тексту за назвою кольору або його кодом у шістнадцятковому форматі RRGGBB.</p> - - <div class="note"> - <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-власивість {{ Cssxref("color") }}</p> - </div> - </td> - </tr> - <tr> - <td><code>cols</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Задає кількість колонок в текстовому полі.</td> - </tr> - <tr> - <td><code>colspan</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>Цей атрибут задає кількість стовпців, яку займає одна комірка таблиці вширину.</td> - </tr> - <tr> - <td><code>content</code></td> - <td>{{ HTMLElement("meta") }}</td> - <td>Знаення, пов'язане з <code>http-equiv</code> або <code>name</code> залежно від контексту.</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Вказує чи можна змінювати вміст елементу.</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Визначає ID елементу {{ HTMLElement("menu") }}, який слугуватиме контекстним меню елемента.</td> - </tr> - <tr> - <td><code>controls</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Вказує чи браузер відображатиме панель управління медіа користувачеві.</td> - </tr> - <tr> - <td><code>coords</code></td> - <td>{{ HTMLElement("area") }}</td> - <td>Набір значень, що задають координати активної області.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> - <td>Визначає як елемент поводиться з запитами до різних джерел.</td> - </tr> - <tr> - <td><code>data</code></td> - <td>{{ HTMLElement("object") }}</td> - <td>Задає URL джерела.</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Дозволяє вам застосовувати до HTML-елемента користувацькі атрибути.</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> - <td>Вказує час та дату, пов'язані з елементтом.</td> - </tr> - <tr> - <td><code>default</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td> - </tr> - <tr> - <td><code>defer</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Indicates that the script should be executed after the page has been parsed.</td> - </tr> - <tr> - <td><code>dir</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</td> - </tr> - <tr> - <td><code>dirname</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Вказує на можливість взаємодії користувача з елементом.</td> - </tr> - <tr> - <td><code>download</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td>Вказує на те, що посилання використовується для завантаження.</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Визначає чи можна перетягувати елемент.</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Вказує чи може елемент приймати перетягування на нього контенту.</td> - </tr> - <tr> - <td><code>enctype</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines the content type of the form date when the <code>method</code> is POST.</td> - </tr> - <tr> - <td><code>for</code></td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Описує елементи, які належать до цього елементу.</td> - </tr> - <tr> - <td><code>form</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Визначає форму, яка є батьківською для цього елементу.</td> - </tr> - <tr> - <td><code>formaction</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> - <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td> - </tr> - <tr> - <td><code>headers</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>IDs of the <code><th></code> elements which applies to this element.</td> - </tr> - <tr> - <td><code>height</code></td> - <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> - <td> - <p>Задає висоту перелічених елементів. Для інших елементів краще використовувати CSS-властивість {{cssxref("height")}}.</p> - - <div class="note"> - <p><strong>Примітка:</strong> У деяких випадках, зокрема для {{ HTMLElement("div") }}, це застарілий атрибут. Натомість для нього краще застосовувати CSS-властивість {{ Cssxref("height") }}.</p> - </div> - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Не дозволяє рендеринг певного елемента, але не скасовує рендеринг дочірніх елементів, наприклад, скриптових і активних.</td> - </tr> - <tr> - <td><code>high</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Вказує нижню межу верхнього діапазону.</td> - </tr> - <tr> - <td><code>href</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> - <td> URL посилання на певне джерело.</td> - </tr> - <tr> - <td><code>hreflang</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> - <td>Вказує на мову сторінки, на яку буде перейдено за посиланням.</td> - </tr> - <tr> - <td><code>http-equiv</code></td> - <td>{{ HTMLElement("meta") }}</td> - <td> </td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{ HTMLElement("command") }}</td> - <td>Задає картинку, яка відображає команду.</td> - </tr> - <tr> - <td><code>id</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Часто використовується з CSS для задання стилю конкретному елементу. Значення цього атрибути повинно бути унікальним.</td> - </tr> - <tr> - <td><code>integrity</code></td> - <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td> - <td> - <p>Додатковий рівень захисту, дає змогу браузеру ідентифікувати, чи він стягує потрібний файл.</p> - - <p><a href="/en-US/docs/">Посилання MDN</a></p> - </td> - </tr> - <tr> - <td><code>ismap</code></td> - <td>{{ HTMLElement("img") }}</td> - <td>Вказує на те, що зображення є частиною заображення серверної карти.</td> - </tr> - <tr> - <td><code>itemprop</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td> </td> - </tr> - <tr> - <td><code>keytype</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Визначає тип генерованого ключа.</td> - </tr> - <tr> - <td><code>kind</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Specifies the kind of text track.</td> - </tr> - <tr> - <td><code>label</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Specifies a user-readable title of the text track.</td> - </tr> - <tr> - <td><code>lang</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Defines the language used in the element.</td> - </tr> - <tr> - <td><code>language</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Defines the script language used in the element.</td> - </tr> - <tr> - <td><code>list</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifies a list of pre-defined options to suggest to the user.</td> - </tr> - <tr> - <td><code>loop</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> - <td>Indicates whether the media should start playing from the start when it's finished.</td> - </tr> - <tr> - <td><code>low</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{ HTMLElement("html") }}</td> - <td>Specifies the URL of the document's cache manifest.</td> - </tr> - <tr> - <td><code>max</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indicates the maximum value allowed.</td> - </tr> - <tr> - <td><code>maxlength</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Defines the maximum number of characters allowed in the element.</td> - </tr> - <tr> - <td><code>media</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> - <td>Specifies a hint of the media for which the linked resource was designed.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines which <a href="/en-US/docs/Web/HTTP">HTTP</a> method to use when submitting the form. Can be <code>GET</code> (default) or <code>POST</code>.</td> - </tr> - <tr> - <td><code>min</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indicates the minimum value allowed.</td> - </tr> - <tr> - <td><code>multiple</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> - </tr> - <tr> - <td><code>muted</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>Indicates whether the audio will be initially silenced on page load.</td> - </tr> - <tr> - <td><code>name</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> - <td>Name of the element. For example used by the server to identify the fields in form submits.</td> - </tr> - <tr> - <td><code>novalidate</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>This attribute indicates that the form shouldn't be validated when submitted.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>{{ HTMLElement("details") }}</td> - <td>Indicates whether the details will be shown on page load.</td> - </tr> - <tr> - <td><code>optimum</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the optimal numeric value.</td> - </tr> - <tr> - <td><code>pattern</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Defines a regular expression which the element's value will be validated against.</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td> </td> - </tr> - <tr> - <td><code>placeholder</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Дає підказку користувачу про те, які дані треба вводити в поле.</td> - </tr> - <tr> - <td><code>poster</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>URL, що відображає рамку постера під час програвання або пошуку.</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Вказує, чи потребує попереднього завантаження контент або його частина.</td> - </tr> - <tr> - <td><code>radiogroup</code></td> - <td>{{ HTMLElement("command") }}</td> - <td> </td> - </tr> - <tr> - <td><code>readonly</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Вказує чи можна редагувати цей елемент.</td> - </tr> - <tr> - <td><code>rel</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> - <td>Визнчає взаємозв'язок даного об'єкту та об'єкту посилання.</td> - </tr> - <tr> - <td><code>required</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Вказує чи заповнення цього елементу є обов'язковим.</td> - </tr> - <tr> - <td><code>reversed</code></td> - <td>{{ HTMLElement("ol") }}</td> - <td>Вказує як відображати елементи списку: у порядку зростання чи спадання.</td> - </tr> - <tr> - <td><code>rows</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Визначає кількість рядків у текстовому полі.</td> - </tr> - <tr> - <td><code>rowspan</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>Визначає кількість рядків, які займає одна комірка таблиці.</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td> </td> - </tr> - <tr> - <td><code>scope</code></td> - <td>{{ HTMLElement("th") }}</td> - <td> </td> - </tr> - <tr> - <td><code>scoped</code></td> - <td>{{ HTMLElement("style") }}</td> - <td> </td> - </tr> - <tr> - <td><code>seamless</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td> </td> - </tr> - <tr> - <td><code>selected</code></td> - <td>{{ HTMLElement("option") }}</td> - <td>Задає значення, яке буде обрано при звантаженні сторінки.</td> - </tr> - <tr> - <td><code>shape</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td> </td> - </tr> - <tr> - <td><code>size</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Задає ширину елементу (у пікселях). Якщо елемент є стрічкою або текстом чи паролем, то цей атрибут задає кількість символів в ширину.</td> - </tr> - <tr> - <td><code>sizes</code></td> - <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> - <td> </td> - </tr> - <tr> - <td><code>slot</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Відводить елементу місце у тіньовій моделі документу.</td> - </tr> - <tr> - <td><code>span</code></td> - <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> - <td> </td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Вказує чи дозволена для цього елемента перевірка правопису.</td> - </tr> - <tr> - <td><code>src</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> - <td>URL вбудованого контенту.</td> - </tr> - <tr> - <td><code>srcdoc</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td> </td> - </tr> - <tr> - <td><code>srclang</code></td> - <td>{{ HTMLElement("track") }}</td> - <td> </td> - </tr> - <tr> - <td><code>srcset</code></td> - <td>{{ HTMLElement("img") }}</td> - <td> </td> - </tr> - <tr> - <td><code>start</code></td> - <td>{{ HTMLElement("ol") }}</td> - <td>Задає значення початку відліку, якщо воно повинно бутит відмінним від "1".</td> - </tr> - <tr> - <td><code>step</code></td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td><code>style</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Визначає CSS-стилі, які переписуюють попередньо задані властивості.</td> - </tr> - <tr> - <td><code>summary</code></td> - <td>{{ HTMLElement("table") }}</td> - <td> </td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Переписує порядок шарів сторінки за замовчуванням та встановлює свій.</td> - </tr> - <tr> - <td><code>target</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td><code>title</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td> - <td>Текст, який показується при наведенні курсору на елемент.</td> - </tr> - <tr> - <td><code>type</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> - <td>Визначає тип даних елементу.</td> - </tr> - <tr> - <td><code>usemap</code></td> - <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> - <td> </td> - </tr> - <tr> - <td><code>value</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> - <td>Задає величину, що буде відображатись за замовчуванням після завантаження сторінки.</td> - </tr> - <tr> - <td><code>width</code></td> - <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> - <td> - <p>Задає ширину для всіх зазначених у списку елементів.</p> - - <div class="note"> - <p><strong>Примітка:</strong> У інших випадках, наприклад для елементу {{ HTMLElement("div") }}, цей атрибут застарілий, і краще використовувати CSS-властивість {{ Cssxref("width") }}.</p> - </div> - </td> - </tr> - <tr> - <td><code>wrap</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Вказує, чи потрібно додавати нові рядки до тексту.</td> - </tr> - </tbody> -</table> - -<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2> - -<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> - -<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> - -<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p> - -<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> - -<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p> - -<p>IDL attributes can <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> - -<h2 id="Також_читай">Також читай</h2> - -<ul> - <li><a href="/en-US/docs/HTML/Element">HTML elements</a></li> -</ul> diff --git a/files/uk/web/html/block-level_elements/index.html b/files/uk/web/html/block-level_elements/index.html deleted file mode 100644 index 2e1b9eef0f..0000000000 --- a/files/uk/web/html/block-level_elements/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Блокові елементи -slug: Web/HTML/Block-level_elements -tags: - - HTML - - HTML5 -translation_of: Web/HTML/Block-level_elements ---- -<p><span class="seoSummary">В HTML (<strong>Hypertext Markup Language </strong>— мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або <a href="/en-US/docs/HTML/Inline_elements">рядкові</a>. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. </span></p> - -<p>Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним. </p> - -<div class="note"> -<p>Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).</p> -</div> - -<p>Приклади нижче показують, як працюють блокові елементи: </p> - -<h2 id="Block-level_Example" name="Block-level_Example">Блокові елементи</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { background-color: #8ABB55; } -</pre> - -<p>{{ EmbedLiveSample('Block-level_Example') }}</p> - -<h2 id="Застосування">Застосування</h2> - -<ul> - <li>Блокові елементи можуть існувати тільки всередині елементу {{ HTMLElement("body") }}.</li> -</ul> - -<h2 id="Блокові_проти_рядкових">Блокові проти рядкових</h2> - -<p>Є кілька ключових відмінностей між блоковими і рядковими елементами:</p> - -<dl> - <dt>Форматування</dt> - <dd>Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. </dd> - <dt>Модель контенту</dt> - <dd>Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.</dd> -</dl> - -<p>Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями <a href="/en-US/docs/HTML/Content_categories">категорій контенту</a>. Блокові елементи здебільшого відповідають категорії <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> (розміщення контенту) в HTML5, тоді як рядкові — категорії <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> (текст і його розмітка), з декількома додатковими категоріями.</p> - -<h2 id="Елементи">Елементи</h2> - -<p>Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). </p> - -<div class="threecolumns"> -<dl> - <dt>{{ HTMLElement("address") }}</dt> - <dd>Контактна інформація.</dd> - <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Вміст статті.</dd> - <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Бічний контент.</dd> - <dt>{{ HTMLElement("blockquote") }}</dt> - <dd>Довга блок-цитата.</dd> - <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Канва для малюнків.</dd> - <dt>{{ HTMLElement("dd") }}</dt> - <dd>Описує термін в переліку визначень.</dd> - <dt>{{ HTMLElement("div") }}</dt> - <dd>Поділ документа.</dd> - <dt>{{ HTMLElement("dl") }}</dt> - <dd>Перелік визначень.</dd> - <dt>{{ HTMLElement("dt") }}</dt> - <dd>Термін в переліку визначень.</dd> - <dt>{{ HTMLElement("fieldset") }}</dt> - <dd>Лейбл (назва) для набору полів.</dd> -</dl> - -<dl> - <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Підпис зображення.</dd> - <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Групує медіаконтент з підписом (див. {{ HTMLElement("figcaption") }}).</dd> - <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Секція або футер сторінки. </dd> - <dt>{{ HTMLElement("form") }}</dt> - <dd>Форма введення.</dd> - <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> - <dd>Заголовки рівнів 1-6.</dd> - <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Секція або хедер сторінки.</dd> - <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Групує контент хедера.</dd> - <dt>{{ HTMLElement("hr") }}</dt> - <dd>Горизонтальна роздільна лінія.</dd> - <dt>{{ HTMLElement("li") }}</dt> - <dd>Пункт переліку.</dd> - <dt>{{ HTMLElement("main") }}</dt> - <dd>Містить основний контент, унікальний для цього документу.</dd> - <dt>{{ HTMLElement("nav") }}</dt> - <dd>Містить навігацію посилань. </dd> -</dl> - -<dl> - <dt>{{ HTMLElement("noscript") }}</dt> - <dd>Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. </dd> - <dt>{{ HTMLElement("ol") }}</dt> - <dd>Нумерований список (перелік).</dd> - <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Вихідні дані форми.</dd> - <dt>{{ HTMLElement("p") }}</dt> - <dd>Параграф.</dd> - <dt>{{ HTMLElement("pre") }}</dt> - <dd>Попередньо відформатований текст.</dd> - <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Секція веб-сторінки.</dd> - <dt>{{ HTMLElement("table") }}</dt> - <dd>Таблиця.</dd> - <dt>{{ HTMLElement("tfoot") }}</dt> - <dd>Футер таблиці.</dd> - <dt>{{ HTMLElement("ul") }}</dt> - <dd>Ненумерований список (перелік).</dd> - <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> - <dd>Відеоплеєр.</dd> -</dl> -</div> - -<h3 id="See_also" name="See_also"><br> - Також дивися:</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Inline_elements">Рядкові елементи</a></li> -</ul> diff --git a/files/uk/web/html/element/header/index.html b/files/uk/web/html/element/header/index.html deleted file mode 100644 index 15b51b687c..0000000000 --- a/files/uk/web/html/element/header/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: <header> -slug: Web/HTML/Element/header -tags: - - HTML - - HTML елементи -translation_of: Web/HTML/Element/header -original_slug: Web/HTML/Елемент/Заголовок ---- -<div>{{HTMLRef}}</div> - -<p><strong>HTML <code><header></code> елемент</strong> представляє групу вступних або навігаційних елементів. Він може містити елементи заголовків, а також інші елементи, такі як логотип, форма пошуку та інше.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/uk/docs/HTML/Content_categories">Content categories</a></th> - <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, but with no <code><header></code> or {{HTMLElement("footer")}} descendant.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/uk/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code><header></code> element must not be a descendant of an {{HTMLElement("address")}}, {{HTMLElement("footer")}} or another {{HTMLElement("header")}} element.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Зауваження_до_використання">Зауваження до використання</h2> - -<p>The <code><header></code> element is not sectioning content and therefore does not introduce a new section in the <a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">outline</a>. That said, a <code>header</code> element is intended to usually contain the surrounding <code>section</code>'s heading (an <code>h1</code>–<code>h6</code> element), but this is <strong>not</strong> required.</p> - -<h2 id="Атрибути">Атрибути</h2> - -<p>This element only includes the <a href="/uk/docs/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Приклад">Приклад</h2> - -<pre class="brush: html"><header> - <h1>Main Page Title</h1> - <img src="mdn-logo-sm.png" alt="MDN logo"> -</header> -</pre> - -<h1 id="Main_Page_Title">Main Page Title</h1> - -<h2 id="sect1"><img alt="MDN" src="https://developer.mozilla.org/static/img/favicon144.png"></h2> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>9.0</td> - <td>11.10</td> - <td>4.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.2</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>9.0</td> - <td>11.0</td> - <td>5.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li> - <li class="last"><a class="deki-ns current" href="/uk/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of a HTML5 document</a>.</li> -</ul> diff --git a/files/uk/web/html/element/html/index.html b/files/uk/web/html/element/html/index.html deleted file mode 100644 index 5aac366c84..0000000000 --- a/files/uk/web/html/element/html/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: <html> -slug: Web/HTML/Element/html -tags: - - Корінь - - Структура -translation_of: Web/HTML/Element/html -original_slug: Web/HTML/Елемент/html ---- -<p>{{HTMLRef}}</p> - -<p>HTML-елемент<strong> <code><html></code></strong> являє собою корінь HTML-документа. Решта елементів мають бути його нащадками.</p> - -<p>Оскільки <strong><code><html></code></strong> є першим (за винятком коментарів) елементом документа, він зветься <em>кореневим елементом</em>. І хоча цей тег може бути відсутнім для {{glossary("HTML")}}, в {{glossary("XHTML")}} він має бути відкритий і закритий явно.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th> - <td>Відсутні.</td> - </tr> - <tr> - <th>Дозволений вміст</th> - <td>Один елемент {{HTMLElement("head")}} та один (наступний за ним) елемент {{HTMLElement("body")}}.</td> - </tr> - <tr> - <th>Обов'язковість тегів</th> - <td> - <p>Початковий тег можна опустити, якщо перша річ всередині елементу <html> — не коментар. Кінцевий тег можна опустити тоді, коли одразу після елементу <html><code> немає коментаря</code>, і він містить елемент {{HTMLElement("body")}}, що має або вміст (непустий), або початковий тег.</p> - </td> - </tr> - <tr> - <th>Дозволені пращури</th> - <td>Як кореневий елемент документа, або як піддокумент складного документа там, де це дозволено.</td> - </tr> - <tr> - <th>Інтерфейс DOM</th> - <td>{{domxref("HTMLHtmlElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибути">Атрибути</h2> - -<p><span style="line-height: 21px;">Цей елемент має </span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p> - -<dl> - <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> - <dd>Вказує URI manifest-файлу, що позначає ресурси, які підлягають локальному кешуванню. Детальніше див. <a href="/en-US/docs/Web/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a>.</dd> - <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> - <dd>Вказує версію HTML {{glossary("DTD", "Document Type Definition")}} цього документа. Цей атрибут визнано застарілим, вживайте !DOCTYPE замість нього.</dd> - <dt>{{htmlattrdef("xmlns")}} </dt> - <dd>Вказує простір імен (XML) документа. Типове значення <code>"http://www.w3.org/1999/xhtml"</code>. Для XHTML то обов'язковий атрибут, а для HTML може бути відсутнім.</dd> -</dl> - -<h2 id="Приклад">Приклад</h2> - -<div class="note"> -<p>Використаний в прикладі {{glossary("DOCTYPE")}} вказує на {{glossary("HTML5")}}.</p> -</div> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head>...</head> - <body>...</body> -</html> -</pre> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Додано підтримку атрибута <code>manifest</code> (згодом визнаний застарілим).<br> - Атрибут <code>version</code> визнано застарілим.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Атрибут <code>version</code> визнано застарілим.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Елемент MathML верхнього рівня: {{MathMLElement("math")}}</li> - <li>Елемент SVG верхнього рівня: {{SVGElement("svg")}}</li> -</ul> diff --git a/files/uk/web/html/element/iframe/index.html b/files/uk/web/html/element/iframe/index.html deleted file mode 100644 index df56027e84..0000000000 --- a/files/uk/web/html/element/iframe/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: '<iframe>: The Inline Frame element' -slug: Web/HTML/Element/iframe -translation_of: Web/HTML/Element/iframe -original_slug: Web/HTML/Елемент/iframe ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">Элемент <strong>встроенного фрейма HTML ( <code><iframe></code>)</strong> представляет собой вложенный {{Glossary("контекст просмотра")}}, встраивающий другую HTML-страницу в текущую.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> - -<div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</div> - -<p>Каждый встроенный контекст просмотра имеет собственную <a href="/en-US/docs/Web/API/History">историю сеанса</a> и <a href="/en-US/docs/Web/API/Document">документ</a> . Контекст просмотра, в который встроены остальные, называется <em><dfn>родительским</dfn> контекстом просмотра</em> . Самый <em>верхний</em> контекст просмотра - тот, у которого нет родителя - обычно это окно браузера, представленное объектом {{domxref("Window")}}.</p> - -<div class="blockIndicator warning"> -<p>Поскольку каждый контекст просмотра представляет собой полную среду документа, каждый <code><iframe></code>элемент на странице требует увеличения памяти и других вычислительных ресурсов. Хотя теоретически вы можете использовать сколько <code><iframe></code>угодно s, проверьте, нет ли проблем с производительностью.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Контент потока</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a> , встроенный контент, интерактивный контент, осязаемый контент.</td> - </tr> - <tr> - <th scope="row">Разрешенный контент</th> - <td>Никто.</td> - </tr> - <tr> - <th scope="row">Отсутствие тега</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Разрешенные родители</th> - <td>Любой элемент, который принимает встроенный контент.</td> - </tr> - <tr> - <th scope="row">Неявная роль ARIA</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> - </tr> - <tr> - <th scope="row">Разрешенные роли ARIA</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">DOM интерфейс</th> - <td>{{domxref("HTMLIFrameElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибуты">Атрибуты</h2> - -<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> .</p> - -<dl> - <dt>{{htmlattrdef("allow")}}</dt> - <dd>Задает <a href="/en-US/docs/Web/HTTP/Feature_Policy">политику функций</a> для <code><iframe></code>. Политика определяет, какие функции доступны, в <code><iframe></code>зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа и т. Д.).<br> - <br> - Для получения дополнительной информации и примеров см .: <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Использование политики функций</a> > <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#The_iframe_allow_attribute">Атрибут разрешения iframe</a> .</dd> - <dt>{{htmlattrdef("allowfullscreen")}}</dt> - <dd>Установите значение, <code>true</code>если <code><iframe></code>можно активировать полноэкранный режим путем вызова метода {{domxref("Element.requestFullscreen", "requestFullscreen ()")}}.</dd> - <dd> - <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="fullscreen"</code>.</div> - </dd> - <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> - <dd>Установите, <code>true</code>если <code><iframe></code>необходимо разрешить перекрестному источнику вызывать <a href="/en-US/docs/Web/API/Payment_Request_API">API запроса платежа</a> .</dd> - <dd> - <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="payment"</code>.</div> - </dd> - <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> - <dd><a href="/en-US/docs/Web/HTTP/CSP">Содержание политики безопасности</a> применяются для внедренного ресурса. Подробнее см. {{Domxref("HTMLIFrameElement.csp")}}.</dd> - <dt>{{htmlattrdef("height")}}</dt> - <dd>Высота фрейма в пикселях CSS. По умолчанию <code>150</code>.</dd> - <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> - <dd>Указывает, как браузер должен загружать iframe: - <ul> - <li><code>eager</code>: Немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).</li> - <li><code>lazy</code>: Отложить загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.</li> - </ul> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Целевое имя для встроенного контекста просмотра. Его можно использовать в <code>target</code>атрибуте элементов {{HTMLElement("a")}}, {{HTMLElement("form")}} или {{HTMLElement("base")}}; <code>formtarget</code>атрибутом {{HTMLElement( "input")}} или {{HTMLElement("button")}} элементов; или <code>windowName</code>параметр в методе {{domxref("Window.open ()", "window.open ()")}}.</dd> - <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> - <dd>Указывает, какой <a href="/en-US/docs/Web/API/Document/referrer">реферер</a> отправлять при выборке ресурса кадра: - <ul> - <li><code>no-referrer</code>: Заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li> - <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> - <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> - <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> - <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> - <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> - <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> - <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> - </ul> - </dd> - <dt>{{htmlattrdef("sandbox")}}</dt> - <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: - <ul> - <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li> - <li><code>allow-downloads</code>: Allows for downloads to occur with a gesture from the user.</li> - <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li> - <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li> - <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> - <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> - <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li> - <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li> - <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> - <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li> - <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li> - <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> - <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> - <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> - </ul> - - <div class="note"><strong>Notes about sandboxing:</strong> - - <ul> - <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> - <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> - <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code><iframe></code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd> - <dt>{{htmlattrdef("srcdoc")}}</dt> - <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd> -</dl> - -<h3 id="Deprecated_attributes">Deprecated attributes</h3> - -<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p> - -<dl> - <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> - <dd>The alignment of this element with respect to the surrounding context.</dd> - <dt>{{htmlattrdef("frameborder")}} {{deprecated_inline}}</dt> - <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code><iframe></code> borders.</dd> - <dt>{{htmlattrdef("longdesc")}} {{deprecated_inline}}</dt> - <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd> - <dt>{{htmlattrdef("marginheight")}} {{deprecated_inline}}</dt> - <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd> - <dt>{{htmlattrdef("marginwidth")}} {{deprecated_inline}}</dt> - <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd> - <dt>{{htmlattrdef("scrolling")}} {{deprecated_inline}}</dt> - <dd>Indicates when the browser should provide a scrollbar for the frame: - <ul> - <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li> - <li><code>yes</code>: Always show a scrollbar.</li> - <li><code>no</code>: Never show a scrollbar.</li> - </ul> - </dd> -</dl> - -<h3 id="Non-standard_attributes">Non-standard attributes</h3> - -<dl> - <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> - <dd> - <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div> - Makes the <code><iframe></code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br> - <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> -</dl> - -<h2 id="Scripting">Scripting</h2> - -<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p> - -<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> - -<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p> - -<p>Script access to a frame's content is subject to the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p> - -<h2 id="Positioning_and_scaling">Positioning and scaling</h2> - -<p>As a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>, the position, alignment, and scaling of the embedded document within the <code><iframe></code> element's box, can be adjusted with the {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Example1" name="Example1">A simple <iframe></h3> - -<p>An <code><iframe></code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p> - -<h4 id="HTML">HTML</h4> - -<div id="htmlOutputWrapper"> -<pre class="brush: html notranslate"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" - title="iframe Example 1" width="400" height="300"> -</iframe></pre> -</div> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Example1', 640,400)}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>People navigating with assistive technology such as a screen reader can use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code><iframe></code> to label its content. The title's value should concisely describe the embedded content:</p> - -<div id="htmlOutputWrapper"> -<pre class="brush: html notranslate"><iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe></pre> -</div> - -<p>Without this title, they have to navigate into the <code><iframe></code> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <code><iframe></code>s and/or if embeds contain interactive content like video or audio.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Added the <code>referrerpolicy</code> attribute.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-iframe-element', '<iframe>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Screen Orientation')}}</td> - <td>{{Spec2('Screen Orientation')}}</td> - <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.iframe", 3)}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/Web/Privacy">Конфиденциальность, разрешения и информационная безопасность</a></li> -</ul> diff --git a/files/uk/web/html/element/index.html b/files/uk/web/html/element/index.html deleted file mode 100644 index 210368070a..0000000000 --- a/files/uk/web/html/element/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Опис HTML елементів -slug: Web/HTML/Element -translation_of: Web/HTML/Element -original_slug: Web/HTML/Елемент ---- -<p>{{HTMLSidebar("Elements")}}</p> - -<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}.</span> They are grouped by function to help you find what you have in mind easily. Although this guide is written for those who are newer to coding, we intend it to be useful for anyone.</p> - -<h2 id="Основні_елементи">Основні елементи</h2> - -<p>Основні елементи є основою будь-якого HTML-документа. You'll see these elements in the source code for all web pages, following the doctype declaration, which is on the first line of the page. The doctype specifies which version of (X)HTML that page is using. Elements comprising the contents of a Web page are placed between the opening {{HTMLElement("html")}} tag and the closing <code></html></code> tag. The {{HTMLElement("html")}} element is also known as the root element.</p> - -<p>{{HTMLRefTable("HTML Root Element")}}</p> - -<h2 id="Метадані_документу" style="line-height: 30px; font-size: 2.14285714285714rem;">Метадані документу</h2> - -<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> - -<p>{{HTMLRefTable("HTML Document Metadata")}}</p> - -<h2 id="Поділ_вмісту" style="line-height: 30px; font-size: 2.14285714285714rem;">Поділ вмісту</h2> - -<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> - -<p>{{HTMLRefTable("HTML Sections")}}</p> - -<h2 id="Текстовий_вміст" style="line-height: 30px; font-size: 2.14285714285714rem;">Текстовий вміст</h2> - -<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> - -<p>{{HTMLRefTable("HTML Grouping Content")}}</p> - -<h2 id="Вбудована_семантика_тексту" style="line-height: 30px; font-size: 2.14285714285714rem;">Вбудована семантика тексту</h2> - -<p>Використовуйте вбудованний семантичний текст HTML, щоб визначити значення, структуру чи стиль слова, рядка чи будь-якого довільного фрагмента тексту.</p> - -<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> - -<h2 id="Зображення_та_мультимедіа" style="line-height: 30px; font-size: 2.14285714285714rem;">Зображення та мультимедіа</h2> - -<p>HTML підтримує різні мультименійні ресурси, такі як зображення, аудіо та відео.</p> - -<p>{{HTMLRefTable("multimedia")}}</p> - -<h2 id="Вкладений_контент" style="line-height: 30px; font-size: 2.14285714285714rem;">Вкладений контент</h2> - -<p>Окрім звичайного мультимедійного контенту, HTML може включати в себе ще й інший вміст, навіть якщо з ним не завжди легко взаємодіяти.</p> - -<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> - -<h2 id="Сценарій" style="line-height: 30px; font-size: 2.14285714285714rem;">Сценарій</h2> - -<p>Для створення динамічного контенту та веб-додатків,HML підтримує використання мов сценаріїв, найбільш чітко JavaScript. Деякі елементи підтримують цю можливість.</p> - -<p>{{HTMLRefTable("HTML Scripting")}}</p> - -<h2 id="Розмежувальні_зміни" style="line-height: 30px; font-size: 2.14285714285714rem;">Розмежувальні зміни</h2> - -<p>Ці елементи дозволяють вказати, що конкретні частини тексту були змінені.</p> - -<p>{{HTMLRefTable("HTML Edits")}}</p> - -<h2 id="Зміст_таблиці" style="line-height: 30px; font-size: 2.14285714285714rem;">Зміст таблиці</h2> - -<p>Елементи які тут знаходяться, використовуються для створення та обробки табличних даних.</p> - -<p>{{HTMLRefTable("HTML tabular data")}}</p> - -<h2 id="Форми" style="line-height: 30px; font-size: 2.14285714285714rem;">Форми</h2> - -<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> - -<p>{{HTMLRefTable("HTML forms")}}</p> - -<h2 id="Interactive_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Interactive elements</h2> - -<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> - -<p>{{HTMLRefTable("HTML interactive elements")}}</p> - -<h2 id="Web_Components" style="line-height: 30px; font-size: 2.14285714285714rem;">Web Components</h2> - -<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can even create custom versions of standard HTML elements, as well.</p> - -<div class="note"><strong>Note: </strong>The elements for Web Components are are defined in the {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> rather than the HTML specification. In addition, the Web Components specification has not been finalized and is subject to change.</div> - -<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> - -<h2 id="Obsolete_and_deprecated_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Obsolete and deprecated elements</h2> - -<div class="warning" style="font-size: 14px;"> -<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> -</div> - -<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/uk/web/html/element/input/date/index.html b/files/uk/web/html/element/input/date/index.html deleted file mode 100644 index 1737d7786a..0000000000 --- a/files/uk/web/html/element/input/date/index.html +++ /dev/null @@ -1,510 +0,0 @@ ---- -title: <input type="date"> -slug: Web/HTML/Element/input/date -translation_of: Web/HTML/Element/input/date ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{HTMLElement("input")}} елементи типу <strong><code>date</code></strong> створюють поле вводу дати з вбудованим інтерфейсом вибору.</span> Результатом вибору будуть рік, місяць та день, без часу. <code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code> та <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> поля підтримують вибір часу та дати і часу.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> - -<p class="hidden">Ісходний код цих прикладів зберігається на GitHub. Якщо ви хотілиби присвятити час розвитку данних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і відправте нам pull-запит.</p> - -<p>UI віджет змінюється від оглядача к оглядачу; для перегляду сумісності дивіться {{anch("Browser compatibility")}}. Якщо оглядач не підтримує такий віджет, він буде відображений просто як <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text">.</a></code></p> - -<p>Серед оглядачів які підтримуюсь кастомний інтерфейс вибору дати є Chrome/Opera, який виглядає наступним чином:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> - -<p>Edge вибор дати виглядає так:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> - -<p>У Firefox вибір дати буде таким:</p> - -<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>{{domxref("DOMString")}} представляє дату у YYYY-MM-DD форматі, або пустим</td> - </tr> - <tr> - <td><strong>Події</strong></td> - <td>{{event("change")}} та {{event("input")}}</td> - </tr> - <tr> - <td><strong>Підримка атрибутів</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, та {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>IDL атрибути</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> - </tr> - <tr> - <td><strong>Методи</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Значення">Значення</h2> - -<p>{{domxref("DOMString")}} представляє значення дати введенної у input. Формат дати описаний у {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}.</p> - -<p>Ви можете встановити значення за замовчуванням встановивши дату в атрибут {{htmlattrxref("value", "input")}} , наприклад:</p> - -<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> - -<p>{{EmbedLiveSample('Value', 600, 40)}}</p> - -<p>Треба пам'ятати що відображений формат відрізняється від актуального <code>value</code> — відображення формату дати буде вибрано на основі вибраної локалі користувальницького оглядача, тоді як <code>value</code> дати завжди є у форматі <code>yyyy-mm-dd</code>.</p> - -<p>Ви також можете взяти чи встановити значення дати у JavaScript використовуючи властивість елементу {{domxref("HTMLInputElement.value", "value")}} , наприклад:</p> - -<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); -dateControl.value = '2017-06-01';</pre> - -<p>Цей код знаходить перший {{HTMLElement("input")}} елемент <code>type</code> якого є <code>date</code> і встановлює його значення 2017-06-01 (June 1, 2017).</p> - -<h2 id="Додаткові_атрибути">Додаткові атрибути</h2> - -<p>Додатково з загальними атрибутами {{HTMLElement("input")}} <code>"date"</code> надає наступні додаткові атрибути:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Атрибут</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>Максимальна дата яка може бути введена</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>Мінімальна дата</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Чи є у інпута контент чи нема, він лише для считування</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Інтервал </td> - </tr> - </tbody> -</table> - -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> - -<p>Остання дата. Якщо встановлена дата {{htmlattrxref("value", "input")}} більше ніж ця дата, елемент не пройде <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>max</code> не валідна строка формату <code>yyyy-MM-dd</code>, тоді елемент не буде мати максимальне обмеження.</p> - -<p>Це значення має вказувати дату пізнішу або поточну вказанному атрибуту <code>min</code>.</p> - -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> - -<p>Мінімальна дата; дати раніші за вказану не пройдуть <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>min</code> атрибуту має неавлідний формат <code>yyyy-MM-dd</code>, тоді елемент не матиме мінімального обмеження.</p> - -<p>Це значення вказує меньшу або еквівалентну значенню атрибута <code>max</code>.</p> - -<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> - -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> - -<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> - -<p>Для <code>date</code> інпутів, значення <code>step</code> вказується в днях, скалярні до 86,400,000 (мілісекунди). За замовчуванная <code>step</code> має 1, означаюче 1 день.</p> - -<div class="blockIndicator note"> -<p>Вказання <code>any</code> для <code>step</code> атрибуту робить той самий ефект як і <code>1</code>.</p> -</div> - -<h2 id="Використання_date_інпутів">Використання date інпутів</h2> - -<p>Поле введення дати зручні на перший погляд — вони надають легкий UI(користувальницький інтерфейс) для вибору дати, і нормалізують формат даних для відправки на сервер, незважаючи на локаль користувача. Однак, існують проблеми підтримки деякими оглядачами <code><input type="date"></code>.</p> - -<p>Подивимось на базові та комлексні використання <code><input type="date"></code>, щодо сумісності оглядачів ви можете порадитись за посиланням (see {{anch("Handling browser support")}}). Звичайно, з часом підтримка в оглядачах розповсюдиться. і усі проблеми будуть вирішені.</p> - -<h3 id="Базові_використання_date">Базові використання date</h3> - -<p>Найпростіше використання <code><input type="date"></code> передбачає базову <code><input></code> і {{htmlelement("label")}} комбінацію елементів, як бачимо нижче:</p> - -<pre class="brush: html"><form> - <div> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> - -<h3 id="Встановлення_мінімальной_і_максимальної_дати">Встановлення мінімальной і максимальної дати</h3> - -<p>Ви можете використовувати {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} атрибути щоб обмежити дати які будуть вибрані користувачем. В наступному прикладі ми встановлюємо мінімальну дату <code>2017-04-01</code> і максимальну дату <code>2017-04-30</code>:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date:</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> - -<p>Результатом будуть лише дні в Квітні 2017го які можно буде вибрати — тільки "дні", частина текстового значення будуть можливі для зміни, дати поза Квітнем не будуть проскролюватись у віджеті.</p> - -<div class="note"> -<p><strong>Примітка</strong>: Ви можете використати {{htmlattrxref("step", "input")}} атрибут для того щоб вказати інтервал зміни днів (наприклад ви хотіли б щоб можно були вибрати лише Неділю). Однак, це не завжди ефективно в тих чи іншіх реалізаціях.</p> -</div> - -<h3 id="Контроль_розміру_input">Контроль розміру input</h3> - -<p><code><input type="date"></code> не підтримує розмір форми атрибутами наприклад {{htmlattrxref("size", "input")}}. Зверніться до <a href="/en-US/docs/Web/CSS">CSS</a> для контролю розміру елементу.</p> - -<h2 id="Валідація">Валідація</h2> - -<p>За замовчуванням, <code><input type="date"></code> не додає жодної валідації на введення значення. UI реалізація загалом не дозволяє уведення будь чого що не є датою — що є добре — але ви всеодно можете лишати поле пустим чи (в оглядачах де інпут відображається простим типом <code>text</code>) ввести неправильну дату (наприклад 32ге Квітня).</p> - -<p>Якщо ви використовуєте {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} для обмеження введення дат (дивіться {{anch("Setting maximum and minimum dates")}}), підтримуючі оглядачі відобразять помилку якщо ви спробуєте відправити дату поза меж вказаних в атрибутах. Однак, перевірте результат щоб запевнитись що значення всередені цих дат, тому що вони можуть не підтримуватись пристрієм користувача.</p> - -<p>В додаток, ви можете використовувати {{htmlattrxref("required", "input")}} атрибут щоб зробити заповнення дати обьв'язковим — знову ж, буде відображена помилка якщо користувач захоче відправити пусте поле. Принаймні, це буде працювати у більшості оглядачів.</p> - -<p>Давайте розглянемо приклад — ми встановили мінімальну і максимальну дату, і також зробили його обов'язковим:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> - -<p>Якщо ви спробуєте відправити форму з незаповненою датою(або з датою поза межами), оглядач відобразить помилку. Спробуйте це самі зробити для перевірки:</p> - -<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> - -<p>Це скріншот приклади оглядача без підтримки віджету дати:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>CSS використаний нижче в прикладі. Ми використовуєм правила {{cssxref(":valid")}} та {{cssxref(":invalid")}} CSS щоб стилізувати відображення валідного чи невалідного введенного значення поля. Ми встановлюємо іконку на {{htmlelement("span")}} біля інпуту, не на самий інпут, тому що у Chrome створений контент розміщений всередені контролю форми, і не може бути застилізований чи відображений коректно.</p> - -<pre class="brush: css">div { - margin-bottom: 10px; - display: flex; - align-items: center; -} - -label { - display: inline-block; - width: 300px; -} - -input:invalid+span:after { - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - content: '✓'; - padding-left: 5px; -}</pre> - -<div class="warning"> -<p><strong>Важливо</strong>: HTML валідація форми не замінює скрипти які перевіряють чи буле введена інформація у коректному форматі. Це достатньо простий метод щоб додати корекцію до HTML, їх можливо обійти , чи видалити зовсім. Якщо ваша серверна сторона не перевірить відправлені данні, це може бути катастрофа (данні можуть бути дуже великого розміру, або неправильного типу, вам можуть завантажити скрипт взлому і так далі).</p> -</div> - -<h2 id="Обробка_підтримки_оглядачів">Обробка підтримки оглядачів</h2> - -<p>Як згадано раніше, більша частина проблем з використанням інпуту дати описани у {{anch("Browser compatibility", "browser support")}}. Як приклад, дата пікер у Firefox для Android виглядає так:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> - -<p>Непідтримуючи оглядачі точно деградують інпут, це створює проблеми у якості інтерфейсу користувача (представлеий віджет буде іншим), і обробкою даних.</p> - -<p>Наступна проблема це більш серьозна; як згадували раніше, за інпутом дати, данні завжди нормалізуються у формат <code>yyyy-mm-dd</code>. З текстовим інпутом оглядач не підтримує формат введених даних, і є багато прикладів як люди вводять дати, наприклад:</p> - -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> - <li><code>Month dd yyyy</code></li> -</ul> - -<p>Єдиний спосіб стосовно цього є лише введення атрибуту {{htmlattrxref("pattern", "input")}}. Якщо інпут дати не використовує цей атрибут, то текстовий буде. Наприклад, розгляньте код у непідтримуючих оглядачах:</p> - -<pre class="brush: html"><form> - <div> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> - -<p>Якщо ви спробуєте відправити це, ви побачете помилку (інпут підсвітеться як невалідний) якщо ви ввели данні які не збігаються з шаблоном <code>nnnn-nn-nn</code>, де <code>n</code> номер від 0 до 9. Звичайно, це не зупинить людей від введення неправильної дати, чи введення у неправильному форматі, як <code>yyyy-dd-mm</code> (де ми очикуємо <code>yyyy-mm-dd</code>). Тож всеж таки маємо проблему.</p> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; -} - -input:invalid + span { - position: relative; -} - -input:invalid + span:after { - content: '✖'; - position: absolute; - right: -18px; -} - -input:valid + span { - position: relative; -} - -input:valid + span:after { - content: '✓'; - position: absolute; - right: -18px; -}</pre> -</div> - -<p>Найкращий шлях опрацьовувати дати в формах в крос-браузерному форматі на даний момент є введення користувачем дня, місяця, і року в окремих елементах ({{htmlelement("select")}}; (дивіться далі реалізацію), або використовуючи JavaScript бібліотеку <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>В цьому прикладі ми створюємо два набори UI елементів для вибору дат: рідний <code><input type="date"></code> і набір із трьох {{htmlelement("select")}} елементів для вибору дати в тих оглядачах які не підтримують рідний date інпут.</p> - -<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> - -<h3 id="HTML">HTML</h3> - -<p>HTML виглядає так:</p> - -<pre class="brush: html"><form> - <div class="nativeDatePicker"> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Enter your birthday:</p> - <div class="fallbackDatePicker"> - <span> - <label for="day">Day:</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Month:</label> - <select id="month" name="month"> - <option selected>January</option> - <option>February</option> - <option>March</option> - <option>April</option> - <option>May</option> - <option>June</option> - <option>July</option> - <option>August</option> - <option>September</option> - <option>October</option> - <option>November</option> - <option>December</option> - </select> - </span> - <span> - <label for="year">Year:</label> - <select id="year" name="year"> - </select> - </span> - </div> -</form></pre> - -<p>Назви місяців жорстко закодовані (тому що вони завжди однакові), коли дні і роки динамічно згенеровані залежно від того який місяць і рік вибраний, і поточний рік (дивіться коментарі коду нижче для детального пояснення як ці функції працюють).</p> - -<div class="hidden"> -<pre class="brush: css">input:invalid+span:after { - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - content: '✓'; - padding-left: 5px; -}</pre> -</div> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Друга частина коду розраховує чи підтримує оглядач <code><input type="date"></code>, ми створюєм {{htmlelement("input")}} елемент, із <code>type</code> <code>date</code>, потім одразу перевіряємо який тип було встановлено — непідтримуючі оглядачі автоматично повернуть тип <code>text</code>, тому що <code>date</code> тип автоматично перетворюється на <code>text</code>. Якщо <code><input type="date"></code> не підтримується, ми приховуємо рідний інпут і показуєм UI ({{htmlelement("select")}}) замість нього.</p> - -<pre class="brush: js">// define variables -var nativePicker = document.querySelector('.nativeDatePicker'); -var fallbackPicker = document.querySelector('.fallbackDatePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); - -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); - -// hide fallback initially -fallbackPicker.style.display = 'none'; -fallbackLabel.style.display = 'none'; - -// test whether a new date input falls back to a text input or not -var test = document.createElement('input'); -test.type = 'date'; - -// if it does, run the code inside the if() {} block -if(test.type === 'text') { - // hide the native picker and show the fallback - nativePicker.style.display = 'none'; - fallbackPicker.style.display = 'block'; - fallbackLabel.style.display = 'block'; - - // populate the days and years dynamically - // (the months are always the same, therefore hardcoded) - populateDays(monthSelect.value); - populateYears(); -} - -function populateDays(month) { - // delete the current set of <option> elements out of the - // day <select>, ready for the next set to be injected - while(daySelect.firstChild){ - daySelect.removeChild(daySelect.firstChild); - } - - // Create variable to hold new number of days to inject - var dayNum; - - // 31 or 30 days? - if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { - dayNum = 31; - } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { - dayNum = 30; - } else { - // If month is February, calculate whether it is a leap year or not - var year = yearSelect.value; - var isLeap = new Date(year, 1, 29).getMonth() == 1; - isLeap ? dayNum = 29 : dayNum = 28; - } - - // inject the right number of new <option> elements into the day <select> - for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); - option.textContent = i; - daySelect.appendChild(option); - } - - // if previous day has already been set, set daySelect's value - // to that day, to avoid the day jumping back to 1 when you - // change the year - if(previousDay) { - daySelect.value = previousDay; - - // If the previous day was set to a high number, say 31, and then - // you chose a month with less total days in it (e.g. February), - // this part of the code ensures that the highest day available - // is selected, rather than showing a blank daySelect - if(daySelect.value === "") { - daySelect.value = previousDay - 1; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 2; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 3; - } - } -} - -function populateYears() { - // get this year as a number - var date = new Date(); - var year = date.getFullYear(); - - // Make this year, and the 100 years before it available in the year <select> - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); - option.textContent = year-i; - yearSelect.appendChild(option); - } -} - -// when the month or year <select> values are changed, rerun populateDays() -// in case the change affected the number of available days -yearSelect.onchange = function() { - populateDays(monthSelect.value); -} - -monthSelect.onchange = function() { - populateDays(monthSelect.value); -} - -//preserve day selection -var previousDay; - -// update what day has been set to previously -// see end of populateDays() for usage -daySelect.onchange = function() { - previousDay = daySelect.value; -}</pre> - -<div class="note"> -<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> -</div> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2> - - - -<p>{{Compat("html.elements.input.input-date")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> - <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> -</ul> diff --git a/files/uk/web/html/element/input/datetime-local/index.html b/files/uk/web/html/element/input/datetime-local/index.html deleted file mode 100644 index b8e88ea62e..0000000000 --- a/files/uk/web/html/element/input/datetime-local/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: <input type="datetime-local"> -slug: Web/HTML/Element/input/datetime-local -translation_of: Web/HTML/Element/input/datetime-local ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{htmlelement("input")}} типу <strong><code>datetime-local</code></strong> створює елемент керування, який дозволяє користувачу легко вводити і дату, і час, включаючи рік, місяць, день і час у годинах і хвилинах. Застосовується часовий пояс користувача.</span> Вигляд елемента змінюється в загальному залежно від браузера; на даний час його підтримка є непостійною, для настільних пристроїв тільки Chrome/Opera й Edge, а для мобільних тільки найновіші браузери мають дієві його розробки. В інших браузерах вони занепали до простих елементів типу <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> - -<p>Про підтримку секунд нема й мови.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-standard")}}</div> - -<p class="hidden">Джерело цього інтерактивного прикладу зберегається в репозиторії GitHub. Якщо хочете зробити внесок у проект інтерактивних прикладів, будь ласка, зробіть клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>і відправте нам pull request.</p> - -<div class="note"> -<p><strong>Примітка:</strong> Через обмежену підтримку браузерами формату <code>datetime-local</code>, і відмінності в роботі елементів введення "input", на даний час, можливо, краще було би вживати якийсь фреймворк чи бібліотеку для їх відображення або використовувати ваш власний елемент введення. Іншим підходом може бути вживання окремих елементів <code>date</code> і <code>time</code>, кожен з яких підтримується ширше, ніж <code>datetime-local</code>.</p> -</div> - -<p>Також деякі браузери для введення часу можуть вдаватися тільки до елемента текстового типу, що перевіряє, чи введені символи становлять правильні значення дати/часу перед відправленням їх на сервер, але небажано покладатися на цей підхід, оскільки його поведінку важко передбачити.</p> - -<p>Для тих із вас, хто не користується браузером із підтримкою <code>datetime-local</code>, елементи керування у Chrome/Opera виглядатимуть як на наступному знімку. Клацнувши справа значок стрілочки вниз, ви отримаєте вибирач дати, а час маєте ввести вручну.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> - -<p>The Edge <code>datetime-local</code> control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. This is somewhat like having <code>date</code> and <code>time</code> widgets both created for you and merged into one.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>A {{domxref("DOMString")}} representing a date and time (in the local time zone), or empty.</td> - </tr> - <tr> - <td><strong>Events</strong></td> - <td>{{event("change")}} and {{event("input")}}.</td> - </tr> - <tr> - <td><strong>Supported Common Attributes</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>IDL attributes</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> - </tr> - <tr> - <td><strong>Methods</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Value">Value</h2> - -<p>A {{domxref("DOMString")}} representing the value of the date entered into the input. You can set a default value for the input by including a date and time inside the {{htmlattrxref("value", "input")}} attribute, like so:</p> - -<pre class="brush: html"><label for="party">Enter a date and time for your party booking:</label> -<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> - -<p>{{ EmbedLiveSample('Value', 600, 60) }}</p> - -<p>One thing to note is that the displayed date and time formats differ from the actual <code>value</code>; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time <code>value</code> is always formatted <code>yyyy-MM-ddThh:mm</code>. When the above value submitted to the server, for example, it will look like <code>"partydate=2017-06-01T08:30"</code>.</p> - -<div class="note"> -<p><strong>Note:</strong> Also bear in mind that if such data is submitted via HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code>, the colon character will need to be escaped for inclusion in the URL parameters, e.g. <code>partydate=2017-06-01T08%3A30</code>. See {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} for one way to do this.</p> -</div> - -<p>You can also get and set the date value in JavaScript using the {{domxref("HTMLInputElement.value")}} property, for example:</p> - -<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]'); -dateControl.value = '2017-06-01T08:30';</pre> - -<p>There are several methods provided by JavaScript's {{jsxref("Date")}} that can be used to convert numeric date information into a properly-formatted string, or you can do it manually. For example, the {{jsxref("Date.toISOString()")}} method can be used for this purpose.</p> - -<h2 id="Using_datetime-local_inputs">Using datetime-local inputs</h2> - -<p>Date/time inputs sound convenient at first glance; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <code><input type="datetime-local"></code> because of the limited browser support.</p> - -<p>We'll look at basic and more complex uses of <code><input type="datetime-local"></code>, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).</p> - -<h3 id="Basic_uses_of_datetime-local">Basic uses of datetime-local</h3> - -<p>The simplest use of <code><input type="datetime-local"></code> involves a basic <code><input></code> and {{htmlelement("label")}} element combination, as seen below:</p> - -<pre class="brush: html"><form> - <label for="party">Enter a date and time for your party booking:</label> - <input id="party" type="datetime-local" name="partydate"> -</form></pre> - -<p>{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}</p> - -<h3 id="Setting_maximum_and_minimum_dates_and_times">Setting maximum and minimum dates and times</h3> - -<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to restrict the dates/times that can be chosen by the user. In the following example we are setting a minimum datetime of <code>2017-06-01T08:30</code> and a maximum datetime of <code>2017-06-30T16:30</code>:</p> - -<pre class="brush: html"> <form> - <label for="party">Enter a date and time for your party booking:</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> - </form></pre> - -<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}</p> - -<p>The result here is that:</p> - -<ul> - <li>Only days in June 2017 can be selected — only the "days" part of the date value will be editable, and dates outside June can't be scrolled to in the datepicker widget.</li> - <li>Depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. Edge), or invalid (see {{anch("Validation")}}) but still available (e.g. Chrome).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.</p> -</div> - -<h3 id="Controlling_input_size">Controlling input size</h3> - -<p><code><input type="datetime-local"></code> doesn't support form control sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for customizing the sizes of these elements.</p> - -<h3 id="Setting_timezones">Setting timezones</h3> - -<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in the <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.</p> - -<p>For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> input type. For example:</p> - -<pre class="brush: html"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> - -<p>On the other hand, if you were required to allow the user to enter a timezone along with a date/time input, you could provide a means of inputting a timezone, such as a {{htmlelement("select")}} element:</p> - -<pre class="brush: html"><select name="timezone_offset" id="timezone-offset" class="span5"> - <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> - <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> - <option value="-10:00">(GMT -10:00) Hawaii</option> - <option value="-09:50">(GMT -9:30) Taiohae</option> - <option value="-09:00">(GMT -9:00) Alaska</option> - <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> - - ... - -</select></pre> - -<p>In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.</p> - -<div class="note"> -<p><strong>Note</strong>: The above code snippet is taken from <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p> -</div> - -<h2 id="Validation">Validation</h2> - -<p>By default, <code><input type="datetime-local"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of April).</p> - -<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.</p> - -<p>Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Book party!"> - </div> -</form></pre> - -<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> - -<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p> - -<p>Here's a screenshot for those of you who aren't using a supporting browser:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> - -<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> - -<pre class="brush: css">div { - margin-bottom: 10px; - display: flex; - align-items: center; -} - -label { - display: inline-block; - width: 300px; -} - -input:invalid+span:after { - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - content: '✓'; - padding-left: 5px; -}</pre> - -<div class="warning"> -<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> -</div> - -<h2 id="Handling_browser_support">Handling browser support</h2> - -<p>As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>datetime-local</code> picker on Firefox for Android looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> - -<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> - -<p>The second problem is the most serious; as we mentioned earlier, with a <code>datetime-local</code> input, the actual value is always normalized to the format <code>yyyy-mm-ddThh:mm</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:</p> - -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> - <li><code>mm-dd-yyyy hh:mm</code> (12 hour clock)</li> - <li><code>mm-dd-yyyy hh:mm</code> (24 hour clock)</li> - <li>etc.</li> -</ul> - -<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>datetime-local</code> input. Even though the <code>datetime-local</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> - <input id="party" type="datetime-local" name="partydate" - min="2017-06-01T08:30" max="2017-06-30T16:30" - pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Book party!"> - </div> - <input type="hidden" id="timezone" name="timezone" value="-08:00"> -</form></pre> - -<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> - -<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nnTnn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.</p> - -<p>And what user is going to understand the pattern they need to enter the time and date in?</p> - -<p>We still have a problem.</p> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; -} - -input:invalid + span { - position: relative; -} - -input:invalid + span:after { - content: '✖'; - position: absolute; - right: -18px; -} - -input:valid + span { - position: relative; -} - -input:valid + span:after { - content: '✓'; - position: absolute; - right: -18px; -}</pre> -</div> - -<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> - -<h2 id="Examples">Examples</h2> - -<p>In this example we create two sets of UI elements for choosing datetimes — a native <code><input type="datetime-local"></code> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.</p> - -<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> - -<p>The HTML looks like so:</p> - -<pre class="brush: html"><form> - <div class="nativeDateTimePicker"> - <label for="party">Choose a date and time for your party:</label> - <input type="datetime-local" id="party" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Choose a date and time for your party:</p> - <div class="fallbackDateTimePicker"> - <div> - <span> - <label for="day">Day:</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Month:</label> - <select id="month" name="month"> - <option selected>January</option> - <option>February</option> - <option>March</option> - <option>April</option> - <option>May</option> - <option>June</option> - <option>July</option> - <option>August</option> - <option>September</option> - <option>October</option> - <option>November</option> - <option>December</option> - </select> - </span> - <span> - <label for="year">Year:</label> - <select id="year" name="year"> - </select> - </span> - </div> - <div> - <span> - <label for="hour">Hour:</label> - <select id="hour" name="hour"> - </select> - </span> - <span> - <label for="minute">Minute:</label> - <select id="minute" name="minute"> - </select> - </span> - </div> - </div> -</form></pre> - -<p>The months are hard-coded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and minutes, as there are so many of them!</p> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; - position: relative; -} - -input[type="number"] { - width: 100px; -} - -input + span { - padding-right: 30px; -} - -input:invalid+span:after { - position: absolute; - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - position: absolute; - content: '✓'; - padding-left: 5px; -}</pre> -</div> - -<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="datetime-local"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>datetime-local</code>, then immediately check what its type is set to. Browsers that don't support <code>datetime-local</code> return <code>text</code>, since that's what <code>datetime-local</code> falls back to. If <code><input type="datetime-local"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> - -<pre class="brush: js">// define variables -var nativePicker = document.querySelector('.nativeDateTimePicker'); -var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); - -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); -var hourSelect = document.querySelector('#hour'); -var minuteSelect = document.querySelector('#minute'); - -// hide fallback initially -fallbackPicker.style.display = 'none'; -fallbackLabel.style.display = 'none'; - -// test whether a new datetime-local input falls back to a text input or not -var test = document.createElement('input'); -test.type = 'datetime-local'; -// if it does, run the code inside the if() {} block -if(test.type === 'text') { - // hide the native picker and show the fallback - nativePicker.style.display = 'none'; - fallbackPicker.style.display = 'block'; - fallbackLabel.style.display = 'block'; - - // populate the days and years dynamically - // (the months are always the same, therefore hardcoded) - populateDays(monthSelect.value); - populateYears(); - populateHours(); - populateMinutes(); -} - -function populateDays(month) { - // delete the current set of <option> elements out of the - // day <select>, ready for the next set to be injected - while(daySelect.firstChild){ - daySelect.removeChild(daySelect.firstChild); - } - - // Create variable to hold new number of days to inject - var dayNum; - - // 31 or 30 days? - if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') { - dayNum = 31; - } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') { - dayNum = 30; - } else { - // If month is February, calculate whether it is a leap year or not - var year = yearSelect.value; - (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; - } - - // inject the right number of new <option> elements into the day <select> - for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); - option.textContent = i; - daySelect.appendChild(option); - } - - // if previous day has already been set, set daySelect's value - // to that day, to avoid the day jumping back to 1 when you - // change the year - if(previousDay) { - daySelect.value = previousDay; - - // If the previous day was set to a high number, say 31, and then - // you chose a month with less total days in it (e.g. February), - // this part of the code ensures that the highest day available - // is selected, rather than showing a blank daySelect - if(daySelect.value === "") { - daySelect.value = previousDay - 1; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 2; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 3; - } - } -} - -function populateYears() { - // get this year as a number - var date = new Date(); - var year = date.getFullYear(); - - // Make this year, and the 100 years before it available in the year <select> - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); - option.textContent = year-i; - yearSelect.appendChild(option); - } -} - -function populateHours() { - // populate the hours <select> with the 24 hours of the day - for(var i = 0; i <= 23; i++) { - var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; - hourSelect.appendChild(option); - } -} - -function populateMinutes() { - // populate the minutes <select> with the 60 hours of each minute - for(var i = 0; i <= 59; i++) { - var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; - minuteSelect.appendChild(option); - } -} - -// when the month or year <select> values are changed, rerun populateDays() -// in case the change affected the number of available days -yearSelect.onchange = function() { - populateDays(monthSelect.value); -} - -monthSelect.onchange = function() { - populateDays(monthSelect.value); -} - -//preserve day selection -var previousDay; - -// update what day has been set to previously -// see end of populateDays() for usage -daySelect.onchange = function() { - previousDay = daySelect.value; -}</pre> - -<div class="note"> -<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.input.input-datetime-local")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> - <li><code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> -</ul> diff --git a/files/uk/web/html/element/input/index.html b/files/uk/web/html/element/input/index.html deleted file mode 100644 index 3c0f2289b3..0000000000 --- a/files/uk/web/html/element/input/index.html +++ /dev/null @@ -1,753 +0,0 @@ ---- -title: '<input>: The Input (Form Input) element' -slug: Web/HTML/Element/input -tags: - - Data entry - - Element - - Forms - - HTML - - HTML forms - - HTML input tag - - Input - - MakeBrowserAgnostic - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/HTML/Element/input ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">The <strong>HTML <code><input></code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-input.html", "tabbed-standard")}}</div> - -<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples -<https://github.com/mdn/interactive-examples>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labelable element, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>Must have a start tag and must not have an end tag.</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td> - <ul> - <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> - <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> - <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> - <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> - <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> - <li><code>type=hidden|month|number|password|range|reset</code>: None</li> - <li><code>type=search|submit|tel|text|url|week</code>: None</li> - </ul> - </td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLInputElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Form_<input>_types">Form <code><input></code> types</h2> - -<p>How an <code><input></code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted is <code>text</code>.</p> - -<p>The available types are as follows:</p> - -<ul> - <li><code>{{HTMLElement("input/button", "button")}}</code>: A push button with no default behavior.</li> - <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code>: A check box allowing single values to be selected/deselected.</li> - <li><code>{{HTMLElement("input/color", "color")}}</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li> - <li><code>{{HTMLElement("input/date", "date")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li> - <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li> - <li><code>{{HTMLElement("input/email", "email")}}</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li> - <li><code>{{HTMLElement("input/file", "file")}}</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li> - <li><code>{{HTMLElement("input/hidden", "hidden")}}</code>: A control that is not displayed but whose value is submitted to the server.</li> - <li><code>{{HTMLElement("input/image", "image")}}</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li> - <li><code>{{HTMLElement("input/month", "month")}}</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li> - <li><code>{{HTMLElement("input/number", "number")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number.</li> - <li><code>{{HTMLElement("input/password", "password")}}</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> and <strong>minlength</strong> attributes to specify the maximum length of the value that can be entered. - <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div> - </li> - <li><code>{{HTMLElement("input/radio", "radio")}}</code>: A radio button, allowing a single value to be selected out of multiple choices.</li> - <li><code>{{HTMLElement("input/range", "range")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li> - <li><code>{{HTMLElement("input/reset", "reset")}}</code>: A button that resets the contents of the form to default values.</li> - <li><code>{{HTMLElement("input/search", "search")}}</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li> - <li><code>{{HTMLElement("input/submit", "submit")}}</code>: A button that submits the form.</li> - <li><code>{{HTMLElement("input/tel", "tel")}}</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number.</li> - <li><code>{{HTMLElement("input/text", "text")}}</code>: A single-line text field. Line-breaks are automatically removed from the input value.</li> - <li><code>{{HTMLElement("input/time", "time")}}</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> - <li><code>{{HTMLElement("input/url", "url")}}</code>: {{HTMLVersionInline("5")}} A field for entering a URL.</li> - <li><code>{{HTMLElement("input/week", "week")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li> -</ul> - -<p>Some input types are now obsolete:</p> - -<ul> - <li><code>{{HTMLElement("input/datetime", "datetime")}}</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li> -</ul> - -<h2 id="Attributes">Attributes</h2> - -<h3 id="Global_<input>_attributes">Global <code><input></code> attributes</h3> - -<p>This section lists the attributes available to all form <code><input></code> types. Non-global attributes — and global attributes that behave differently when specified on different <code><input></code> types — are listed on those types' individual pages.</p> - -<div class="note"> -<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p> -</div> - -<dl> - <dt>{{htmlattrdef("type")}}</dt> - <dd>The type of control to render. See {{anch("Form <input> types")}} for the individual types, with links to more information about each.</dd> - <dt>{{htmlattrdef("accept")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, this attribute indicates the types of files that the server accepts — otherwise it's ignored. The value must be comma-separated unique “content type specifiers”: - <ul> - <li>A case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).</li> - <li>A valid MIME type with no extensions.</li> - <li><code>audio/*</code> representing sound files. {{HTMLVersionInline("5")}}</li> - <li><code>video/*</code> representing video files. {{HTMLVersionInline("5")}}</li> - <li><code>image/*</code> representing image files. {{HTMLVersionInline("5")}}</li> - </ul> - </dd> - <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> - <dd>Sets a keyboard key that the user can press to <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Focus_and_Selection">focus</a> the control. This attribute is global in HTML5 — see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">the <code>accesskey</code> page</a> for more info.</dd> - <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> - <dd>This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered. {{page("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}}</dd> - <dd>See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information.</dd> - <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> - <dd>This Boolean attribute specifies that the input should have focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one element in a document can have the <strong>autofocus</strong> attribute. It cannot be applied if the <strong>type</strong> attribute is <code>hidden</code>, because hidden inputs cannot be focused. Note that the input may be focused before the <a href="/en-US/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code> event fires.</a> - <div class="warning"><strong>Warning</strong>: Automatically focusing a form control can confuse visually-impaired people who using screen-reading technology. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</div> - </dd> - <dt>{{htmlattrdef("capture")}}</dt> - <dd> - <p>If the value of the <strong>type</strong> attribute is <code>file</code>, this Boolean attribute indicates that capture of media directly from the device's sensors using a <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> is preferred, such as a webcam or microphone.</p> - </dd> - <dt>{{htmlattrdef("checked")}}</dt> - <dd> - <p>If the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, this Boolean attribute pre-checks the control before the user interacts with it.</p> - - <p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> - </dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd> - <p>This Boolean attribute prevents the user from interacting with the input. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">is not dispatched</a> on disabled controls, and disabled controls aren't submitted with their form.</p> - - <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> - </dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> - <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute isn't used, the <code><input></code> element is associated with its nearest ancestor {{HTMLElement("form")}} element, if any. This attribute lets you to place <code><input></code> elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.</dd> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> - <dd>The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> - <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the input element is a submit button or image, this attribute specifies the content encoding that is used to submit the form data to the server. Possible values: - <ul> - <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> - <li><code>multipart/form-data</code>: Use this value if you are using an <code><input></code> element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> - <li><code>text/plain</code>: This encoding is mostly for debugging.</li> - </ul> - - <p>This attribute overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> - </dd> - <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the input element is a submit button or image, this attribute specifies the <a href="/en-US/docs/Glossary/Method">HTTP method</a> that the browser uses to submit the form. Possible values: - <ul> - <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> - <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URL, with a '?' as a separator, and the resulting URL is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> - </ul> - - <p>This attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> - </dd> - <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form shouldn't be validated before submission. This attribute overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> - <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received by submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (e.g. tab, window, or <a href="/en-US/docs/Web/HTML/Element/iframe">inline frame</a>). This attribute overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: - <ul> - <li>_<code>self</code>: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.</li> - <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> - <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> - <li><code>_top</code>: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> - </ul> - </dd> - <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, defines the height of the image displayed for the button in pixels.</dd> - <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> - <dd>A hint to browsers for which virtual keyboard to display. This attribute applies when the the <strong>type</strong> attribute is text, password, email, or url. Possible values: - <ul> - <li><code>none</code>: No virtual keyboard should be displayed.</li> - <li><code>text</code>: Text input in the user's locale.</li> - <li><code>decimal</code>: Fractional numeric input.</li> - <li><code>numeric</code>: Numeric input.</li> - <li><code>tel</code>: Telephone input, including asterisk and pound key. Prefer <code><input type="tel"></code>.</li> - <li><code>search</code>: A virtual keyboard optimized for search input.</li> - <li><code>email</code>: Email input. Prefer <code><input type="email"></code>.</li> - <li><code>url</code>: URL input. Prefer <code><input type="url"></code>.</li> - </ul> - - <div class="warning"> - <div class="important"><strong>Spec conflict</strong>: The <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG spec lists <code>inputmode</code></a>, and modern browsers are working towards supporting it. The <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 spec</a> however no longer lists it (i.e. marks it as obsolete). You should consider the WHATWG definition as correct, until a consensus is reached.</div> - </div> - </dd> - <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> - <dd>Points to a {{HTMLElement("datalist")}} of predefined options to suggest to the user. The value must be the <strong>id</strong> of a <code><datalist></code> element in the same document. Browsers display only valid options for the input. This attribute is ignored when the <strong>type</strong> attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> - <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> - <dd>The maximum (numeric or date-time) value for the input. Must not be less than its minimum (<strong>min</strong> attribute) value.</dd> - <dt>{{htmlattrdef("maxlength")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.</dd> - <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> - <dd>The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> - <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.</dd> - <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> - <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>.</dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>The name of the control, which is submitted with the control's value as part of the form data. If no name is specified or it is empty, the control's value is not submitted with the form.</dd> - <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> - <dd>A regular expression that the control's value is checked against. The pattern must match the entire value. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute only applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>. The regular expression language is the same as the JavaScript {{jsxref("RegExp")}} algorithm, with the <code>'u'</code> parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.</dd> - <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> - <dd>A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text <em>must not</em> contain carriage returns or line-feeds. - <div class="note"><strong>Note:</strong> Before using <code>placeholder</code>, please see the section {{anch("Labels and placeholders")}} to ensure that you use them correctly if at all. Placeholders can be confusing and can disrupt certain operations in unexpected ways.</div> - </dd> - <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt> - <dd>This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (such as <code>button</code> or <code>submit</code>).</dd> - <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> - <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> - <dt>{{htmlattrdef("size")}}</dt> - <dd>The initial size of the control. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20.</dd> - <dd>HTML5 states "the user agent should ensure that at least that many characters are visible", but different characters have different widths in certain fonts. In some browsers, a certain string with <em>x</em> characters will not be entirely visible even if <code>size</code> is defined as <em>x</em>.</dd> - <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> - <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies the URL of the image file to display on the graphical submit button.</dd> - <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> - <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> - <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> - <dd>The position of the element in the tabbing navigation order for the current document.</dd> - <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> - <dd>The name of a {{HTMLElement("map")}} element to be used as an image map.</dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.</dd> - <dd>When reloading the page, Firefox and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> - <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> - <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button in pixels.</dd> -</dl> - -<h3 id="Non-standard_<input>_attributes">Non-standard <code><input></code> attributes</h3> - -<dl> - <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> - <dd>This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <code><input></code>. Possible attribute values are: - <ul> - <li><code>on</code>: Enable autocorrection.</li> - <li><code>off</code>: Disable autocorrection.</li> - </ul> - <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect"><code>autocorrect</code> documentation</a> in the Safari HTML Reference.</dd> - <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> - <dd>This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the <code><input></code> fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"><code>incremental</code> documentation in the Safari HTML Reference</a></dd> - <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> - <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>. These automatically get mapped to the appropriate string and are case-insensitive.</dd> - <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> - <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the <code><input></code>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd> - <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> - <dd>This Boolean attribute indicates if the selector used when the <strong>type</strong> attribute is <code>file</code> has to allow for the selection of directories only.</dd> - <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> - <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> -</dl> - -<h2 id="Styling_input_elements">Styling input elements</h2> - -<p>You can style <code><input></code> elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><label for="textInput">Note the red caret:</label> -<input id="textInput" class="custom" size="32"/> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input.custom { - caret-color: red; - font: 16px "Helvetica", "Arial", "sans-serif" -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('Styling_input_elements', 500, 80)}}</p> - -<p>For more information about adding color to elements in HTML, see <a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</p> - -<h2 id="Labels_and_placeholders">Labels and placeholders</h2> - -<div class="note"> -<p><strong>TL;DR:</strong> To save you time, here's the key point: don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <code><input></code> element, use the {{HTMLElement("label")}} element.</p> -</div> - -<p>There are three seemingly similar ways to associate assistive text with an <code><input></code>. However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.</p> - -<h3 id="The_<label>_element">The <label> element</h3> - -<p>The {{HTMLElement("label")}} element is the only way to provide explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code><label></code> to explain what should be entered into an <code><input></code> or {{HTMLElement("textarea")}}.</p> - -<h3 id="The_placeholder_attribute">The placeholder attribute</h3> - -<p>The {{htmlattrxref("placeholder", "input")}} attribute lets you specify a prompt that appears within the <code><input></code> element's content area itself when empty. It's intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.</p> - -<p>Here are two inputs that take a password, each with a placeholder:</p> - -<p><img alt="Example of correct and incorrect placeholder usage" src="https://mdn.mozillademos.org/files/16094/placeholder-badgood.png" style="border-style: solid; border-width: 1px; height: 66px; width: 230px;"></p> - -<p>The first one uses a placeholder string <code>"MyGr8P@sswrd"</code>, demonstrating what a password might look like. And no, that's not <em>really</em> a great password.</p> - -<p>The second one uses a prompt string, <code>"Enter your password"</code> as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.</p> - -<p>That's why, instead, you should use the {{HTMLElement("label")}} element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.</p> - -<p>If the user can't understand your form if the placeholders are missing (say, in a browser that doesn't support <code>placeholder</code>, or in the case above where the user starts typing then gets confused), you're not using placeholders properly.</p> - -<p>In addition, browsers with automatic page translation features may skip over attributes when translating. That means the <code>placeholder</code> may not get translated, resulting in important information not being translated.</p> - -<p>If you feel like you need to use a placeholder, it's possible to use both a placeholder and a label:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16110/label-and-placeholder.png" style="border-style: solid; border-width: 1px; height: 48px; width: 234px;"></p> - -<ul> -</ul> - -<h3 id="Unadorned_text_adjacent_to_the_<input>_element">Unadorned text adjacent to the <input> element</h3> - -<p>You can also just have plain text adjacent to the <code><input></code> element, like this:</p> - -<pre class="brush: html"><p>Enter your name: <input id="name" type="text" size="30"></p></pre> - -<p>Please don't do this. This doesn't create a relationship between the prompt and the <code><input></code> element, which is important for reasons we'll get into in the next section.</p> - -<h3 id="Why_you_should_use_labels">Why you should use labels</h3> - -<p>In addition to the information provided above, there are a number of other reasons why <code><label></code> is the best way to explain <code><input></code>s:</p> - -<ul> - <li>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</li> - <li>By pairing a <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. If you use plaintext to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</li> - <li>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<p>You can find multiple examples of <code><input></code> element usage on the pages covering each individual type — see {{anch("Form <input> types")}}, and also see the {{anch("Live example")}} at the top of the article.</p> - -<ul> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> - <td>{{Spec2('HTML Media Capture')}}</td> - <td>Adds the <code>capture</code> element</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.input")}}</p> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.7")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td><code>type="time"</code></td> - <td>20</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(57)}}</td> - <td>{{CompatNo}}</td> - <td>10.62</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - </tr> - <tr> - <td><code>accept</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>mozactionhint</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>autocapitalize</code></td> - <td>43</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup> [3]</sup></td> - </tr> - <tr> - <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td> - <td>5.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10</td> - <td>9.6</td> - <td>5.0</td> - </tr> - <tr> - <td>capture</td> - <td>Chrome for Android (0.16)</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("53")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>form</code></td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>4</td> - <td>{{CompatNo}}<sup>[7]</sup></td> - <td>9.5</td> - <td>5.0</td> - </tr> - <tr> - <td><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td> - <td>9.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>10.62</td> - <td>5.1</td> - </tr> - <tr> - <td><code>incremental</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>inputmode</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("17")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>minlength</code></td> - <td>40.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>readonly</code></td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.7")}}</td> - <td>6<sup>[2] </sup></td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>10.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}</td> - <td>10</td> - <td>11.0</td> - <td>4.0</td> - </tr> - <tr> - <td><code>webkitdirectory</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("49.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>type="time"</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(57)}}</td> - <td>{{CompatNo}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - <tr> - <td><code>accept</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>autocapitalize</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> - </tr> - <tr> - <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>capture</code></td> - <td>3.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("10.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>6.0</td> - </tr> - <tr> - <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("53")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>minlength</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>27.0</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>11.0</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>webkitdirectory</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("49.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] It is recognized but there is no UI.</p> - -<p>[2] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p> - -<p>[3] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p> - -<p>[4] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p> - -<p>[5] see {{bug(1355389)}}</p> - -<p>[6] Not yet implemented. For progress, see {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p> - -<h2 id="Notes">Notes</h2> - -<h3 id="File_inputs">File inputs</h3> - -<ol> - <li> - <p>Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an <code><input></code> element of type <code>file</code> opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> - </li> - <li> - <p>You cannot set the value of a file picker from a script — doing something like the following has no effect:</p> - - <pre class="brush: js">var e = getElementById("someFileInputElement"); -e.value = "foo"; -</pre> - </li> - <li> - <p>When a file is chosen using an <code><input type="file"></code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">defined in the spec</a>.</p> - </li> -</ol> - -<h3 id="Error_messages">Error messages</h3> - -<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> - -<pre class="brush: html"><input type="email" - x-moz-errormessage="Please specify a valid email address."> -</pre> - -<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> - -<h3 id="Localization">Localization</h3> - -<p>The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> - -<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> - -<ul> - <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> - <li>Try the language specified by any Content-Language HTTP header or</li> - <li>If none specified, use the browser's locale.</li> -</ul> - -<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> - -<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> - -<pre class="brush: html"><input type="text" mozactionhint="next"> -</pre> - -<p>The result is:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/3251/mozactionhint.png" style="border-style: solid; border-width: 1px; height: 400px; width: 240px;"></p> - -<p>Note the "Next" key in the lower-right corner of the keyboard.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> - <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form constraint validation</a></li> - <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> - <li>The CSS {{cssxref("caret-color")}} property</li> - <li>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the elemnt's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</li> -</ul> diff --git a/files/uk/web/html/element/link/index.html b/files/uk/web/html/element/link/index.html deleted file mode 100644 index 257490d30d..0000000000 --- a/files/uk/web/html/element/link/index.html +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: '<link>: The External Resource Link element' -slug: Web/HTML/Element/link -translation_of: Web/HTML/Element/link -original_slug: Web/HTML/Елемент/link ---- -<div><font><font>{{HTMLRef}}</font></font></div> - -<p><font><font>Елемент </font></font><strong><font><font>посилання зовнішнього ресурсу HTML ( </font></font><code><link></code><font><font>)</font></font></strong><font><font> визначає відносини між поточним документом і зовнішнім ресурсом. </font><font>Цей елемент найчастіше використовується для посилання на {{Glossary ("CSS", "stylesheets")}}, але також використовується для встановлення значків сайтів (іконок стилів favicon і мобільного домашнього екрана / значків програм) .</font></font></p> - -<div><font><font>{{EmbedInteractiveExample ("сторінки / вкладки / link.html")}}</font></font></div> - -<div class="hidden"><font><font>Джерело для цього інтерактивного прикладу зберігається в сховищі GitHub. </font><font>Якщо ви хочете внести свій внесок до проекту інтерактивних прикладів, будь ласка, клонуйте </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font> і надішліть нам запит pull.</font></font></div> - -<p><font><font>Щоб пов’язати зовнішню таблицю стилів, потрібно включити </font></font><code><link></code><font><font>елемент у {{HTMLElement ("head")}} так:</font></font></p> - -<pre class="brush: html no-line-numbers"><font><font><link href = "main.css" rel = "stylesheet"></font></font></pre> - -<p><font><font>Цей простий приклад надає шлях до таблиці стилів всередині </font></font><code>href</code><font><font>атрибута і </font></font><code>rel</code><font><font>атрибут зі значенням </font></font><code>stylesheet</code><font><font>. </font><font>Поняття </font></font><code>rel</code><font><font>"відносини", і, можливо, одна з ключових особливостей </font></font><code><link></code><font><font>елемента - значення позначає, як пов'язаний елемент пов'язаний з документом, що містить. </font><font>Як видно з </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>посилання на типи</font></font></a><font><font> посилань, існує багато різних типів відносин.</font></font></p> - -<p><font><font>Існує ряд інших поширених типів. </font><font>Наприклад, посилання на значок сайту:</font></font></p> - -<pre class="brush: html no-line-numbers"><font><font><link rel = "icon" href = "favicon.ico"></font></font></pre> - -<p><font><font>Існує ряд інших </font></font><code>rel</code><font><font>значень </font><font>значків </font><font>, які в основному використовуються для позначення спеціальних типів піктограм для використання на різних мобільних платформах, наприклад:</font></font></p> - -<pre class="brush: html no-line-numbers"><font><font><link rel = "розмір яблуко-значка-попередній" розмір = "114x114"</font></font><font><font> - href = "apple-icon-114.png" type = "image / png"></font></font></pre> - -<p><code>sizes</code><font><font>Атрибут вказує розмір значків, в </font><font>той час як </font></font><code>type</code><font><font>містить MIME - </font><font>тип ресурсу пов'язані між собою </font><font>. </font><font>Вони надають корисні поради, які дозволяють браузеру вибрати найбільш доступну піктограму.</font></font></p> - -<p><font><font>Ви також можете вказати тип або запит носія в </font></font><code>media</code><font><font>атрибуті; </font><font>цей ресурс буде завантажено лише в тому випадку, якщо умова носія є істинною. </font><font>Наприклад:</font></font></p> - -<pre class="brush: html no-line-numbers"><font><font><link href = "print.css" rel = "stylesheet" media = "print"></font></font><font><font> -<link href = "mobile.css" rel = "stylesheet" media = "екран і (max-width: 600px)</font></font></pre> - -<p><font><font>До </font></font><code><link></code><font><font>елемента також </font><font>додано кілька цікавих нових функцій продуктивності та безпеки </font><font>. </font><font>Візьміть цей приклад:</font></font></p> - -<pre class="brush: html no-line-numbers"><font><font><link rel = "preload" href = "myFont.woff2" як = "шрифт"</font></font><font><font> - type = "font / woff2" crossorigin = "anonymous"></font></font></pre> - -<p><code>rel</code><font><font>Значення </font></font><code>preload</code><font><font>вказує на те, </font><font>що браузер повинен попередньо завантажити цей ресурс (див </font></font><a href="/en-US/docs/Web/HTML/Preloading_content"><font><font>предзагрузкі зміст з отн = "переднавантаження»</font></font></a><font><font> для отримання </font><font>більш докладної інформації), з </font></font><code>as</code><font><font>атрибутом , </font><font>що вказує певний клас контенту, витягується. </font></font><code>crossorigin</code><font><font>Атрибут вказує , </font><font>чи повинен ресурс бути залучена з {{Glossary("CORS")}} запитом.</font></font></p> - -<p><font><font>Інші примітки щодо використання:</font></font></p> - -<ul> - <li><code><link></code><font><font>Елемент може відбуватися або в {{HTMLElement("head")}} або {{HTMLElement("body")}} елемента, в </font><font>залежності від того, </font><font>чи має він </font></font><a href="https://html.spec.whatwg.org/multipage/links.html#body-ok"><font><font>тип зв'язку</font></font></a><font><font> , який є </font></font><strong><font><font>тілом-ок</font></font></strong><font><font> . </font><font>Наприклад, </font></font><code>stylesheet</code><font><font>тип зв'язку - це тіло-ok, і тому </font></font><code><link rel="stylesheet"></code><font><font>дозволено в тілі. </font><font>Проте, це не хороша практика; </font><font>більше сенсу відокремлювати </font></font><code><link></code><font><font>елементи від вмісту тіла, розміщуючи їх у </font></font><code><head></code><font><font>.</font></font></li> - <li><font><font>При використанні </font></font><code><link></code><font><font>для створення значка Favicon для сайту, і ваш сайт використовує політику безпеки контенту (CSP) для підвищення своєї безпеки, політика застосовується до позначки. </font><font>Якщо у </font><font>вас виникли проблеми з Favicon не завантажується, переконайтеся , </font><font>що {{HTTPHeader("Content-Security-Policy")}} заголовка по </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code><font><font>директиві</font></font></a><font><font> не запобігання доступу до нього.</font></font></li> - <li><font><font>Специфікації HTML і XHTML визначають обробники подій для </font></font><code><link></code><font><font>елемента, але незрозуміло, як вони будуть використовуватися.</font></font></li> - <li><font><font>Під XHTML 1.0, порожні елементи , </font><font>такі як </font></font><code><link></code><font><font>вимагають слеш: </font></font><code><link /></code><font><font>.</font></font></li> - <li><font><font>WebTV підтримує використання значення </font></font><code>next</code><font><font>для </font></font><code>rel</code><font><font>попереднього завантаження наступної сторінки в серії документів.</font></font></li> -</ul> - -<h2 id="Атрибути"><font><font>Атрибути</font></font></h2> - -<p><font><font>Цей елемент включає </font></font><a href="/en-US/docs/Web/HTML/Global_attributes"><font><font>глобальні атрибути</font></font></a><font><font> .</font></font></p> - -<dl> - <dt><font><font>{{HTMLAttrDef ("as")}}</font></font></dt> - <dd><font><font>Цей атрибут використовується тільки тоді, коли </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>було встановлено на </font></font><code><link></code><font><font>елементі. </font><font>Вона визначає тип завантажуваного контенту </font></font><code><link></code><font><font>, який необхідний для визначення пріоритетів вмісту, відповідності запиту, застосування правильної </font></font><a href="/en-US/docs/Web/HTTP/CSP"><font><font>політики безпеки контенту</font></font></a><font><font> та встановлення правильного заголовка запиту {{HTTPHeader ("Accept")}}.</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("crossorigin")}}</font></font></dt> - <dd><font><font>Цей перерахований атрибут вказує, чи слід використовувати {{Glossary("CORS")}} при отриманні ресурсу. </font></font><a href="/en-US/docs/Web/HTML/CORS_Enabled_Image"><font><font>Зображення з підтримкою CORS</font></font></a><font><font> можна повторно використовувати в елементі {{HTMLElement ("canvas")}}, не </font></font><em><font><font>засмучуючись</font></font></em><font><font> . </font><font>Дозволені значення:</font></font> - <dl> - <dt><code>anonymous</code></dt> - <dd><font><font>Запит на перехресне походження (тобто з HTTP-заголовком {{HTTPHeader ("Походження")}} виконується, але не надсилаються дані облікового запису (тобто, файли cookie, сертифікат X.509 або HTTP Basic). </font><font>Якщо сервер не надає облікових даних сайту (не встановлюючи заголовок HTTPHeader ("Access-Control-Allow-Origin")}} HTTPHeader, зображення буде заплямовано, а його використання обмежене.</font></font></dd> - <dt><code>use-credentials</code></dt> - <dd><font><font>Запит на перехресне походження (тобто з </font></font><code>Origin</code><font><font>заголовком HTTP) виконується разом із відправленими обліковими даними (тобто виконується cookie, сертифікат та / або HTTP Basic аутентифікація). </font><font>Якщо сервер не надає облікових даних сайту (через {{HTTPHeader ("Access-Control-Allow-Credentials")}} HTTP-заголовок), ресурс буде </font></font><em><font><font>заплямовано</font></font></em><font><font> і його використання буде обмежене.</font></font></dd> - </dl> - <font><font>Якщо атрибут відсутній, ресурс вибирається без запиту {{Glossary ("CORS")}} (тобто без відправлення </font></font><code>Origin</code><font><font>заголовка HTTP), що запобігає його непрямому використанню. </font><font>Якщо він недійсний, він обробляється так, якби </font><font>було використано </font></font><strong><font><font>анонімне</font></font></strong><font><font> перераховане ключове слово </font><font>. </font><font>Див </font></font><a href="/en-US/docs/Web/HTML/CORS_settings_attributes"><font><font>настройки CORS атрибути</font></font></a><font><font> для отримання </font><font>додаткової інформації.</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("href")}}</font></font></dt> - <dd><font><font>Цей атрибут визначає {{глосарій ("URL")}} пов'язаного ресурсу. </font><font>URL-адреса може бути абсолютною або відносною.</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("hreflang")}}</font></font></dt> - <dd><font><font>Цей атрибут вказує мову пов'язаного ресурсу. </font><font>Це суто консультативний характер. </font><font>Дозволені значення визначаються </font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><font><font>BCP47</font></font></a><font><font> . </font><font>Використовуйте цей атрибут, лише якщо присутній атрибут {{HTMLAttrxRef ("href", "a")}}.</font></font></dd> - <dt id="name-attribute"><font><font>{{HTMLAttrDef ("значення")}} {{Experimental_Inline}}</font></font></dt> - <dd><font><font>Вказує відносну важливість ресурсу. </font><font>Підказки щодо пріоритетів делегуються за допомогою значень:</font></font></dd> - <dd> - <p><strong><code>auto</code></strong><font><font>: Вказує на </font></font><strong><font><font>відсутність уподобань</font></font></strong><font><font> . </font><font>Для визначення пріоритету ресурсу браузер може використовувати власну евристику.</font></font></p> - - <p><strong><code>high</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>високий</font></font></strong><font><font> пріоритет.</font></font></p> - - <p><strong><code>low</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>низький</font></font></strong><font><font> пріоритет.</font></font></p> - - <div class="blockIndicator note"> - <p><strong><font><font>Примітка:</font></font></strong><code>importance</code><font><font> атрибут може бути використаний тільки для </font></font><code><link></code><font><font>елемента , </font><font>якщо </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>присутній.</font></font></p> - </div> - </dd> - <dt><font><font>{{HTMLAttrDef ("цілісність")}} {{Experimental_Inline}}</font></font></dt> - <dd><font><font>Містить вбудовані метадані - криптографічний хеш-код, зашифрований за допомогою base64, який повідомляє веб-переглядачу. </font><font>Цей веб-переглядач може використовувати це, щоб переконатися, що отриманий ресурс доставлений без несподіваних маніпуляцій. </font><font>Див </font></font><a href="/en-US/docs/Web/Security/Subresource_Integrity"><font><font>Subresource цілісності</font></font></a><font><font> .</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("медіа")}}</font></font></dt> - <dd><font><font>Цей атрибут визначає носій, до якого застосовується пов'язаний ресурс. </font><font>Його значення має бути тип </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа</font></font></a><font><font> / </font><a href="/en-US/docs/Web/CSS/Media_queries"><font>медіа-запит</font></a><font> . </font><font>Цей атрибут є в основному корисним при підключенні до зовнішніх таблиць стилів - це дозволяє користувальницькому агенту підібрати найбільш адаптований для пристрою, на якому він працює.</font></font> - <div class="blockIndicator note"> - <p><strong><font><font>Примітки:</font></font></strong></p> - - <ul> - <li><font><font>В HTML 4, це може бути тільки простий білий список розділених пробілами опису медіа - </font><font>литералов, тобто </font></font><a href="/en-US/docs/Web/CSS/@media"><font><font>типів і груп</font></font></a><font><font> , в </font><font>яких визначені і дозволені в </font><font>якості значень для цього атрибута, наприклад </font></font><code>print</code><font><font>, </font></font><code>screen</code><font><font>, </font></font><code>aural</code><font><font>, </font></font><code>braille</code><font><font>. </font><font>HTML5 розширив це до будь-яких типів </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа-запитів</font></font></a><font><font> , які є набором допустимих значень HTML 4.</font></font></li> - <li><font><font>Браузери, які не підтримують </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>CSS3 Media Queries</font></font></a><font><font> , не обов'язково розпізнають адекватне посилання; </font><font>не забувайте встановлювати резервні посилання, обмежений набір медіа-запитів, визначених у HTML 4.</font></font></li> - </ul> - </div> - </dd> - <dt><font><font>{{HTMLAttrDef ("referrerpolicy")}} {{Experimental_Inline}}</font></font></dt> - <dd><font><font>Рядок, який вказує, який референт використовувати для отримання ресурсу:</font></font> - <ul> - <li><code>no-referrer</code><font><font> означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано.</font></font></li> - <li><code>no-referrer-when-downgrade</code><font><font>означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано при переміщенні до джерела без TLS (HTTPS). </font><font>Це поведінка користувача агента за замовчуванням, якщо інша політика не вказана.</font></font></li> - <li><code>origin</code><font><font> означає, що реферер буде походженням сторінки, що є приблизно схемою, хостом і портом.</font></font></li> - <li><code>origin-when-cross-origin</code><font><font> означає, що навігація до інших джерел буде обмежена схемою, хостом і портом, під час навігації за тим же походженням буде включено шлях реферера.</font></font></li> - <li><code>unsafe-url</code><font><font>означає, що реферер буде включати походження та шлях (але не фрагмент, пароль або ім'я користувача). </font><font>Цей випадок є небезпечним, оскільки може витікати джерела та шляхи від ресурсів, захищених TLS, до небезпечного походження.</font></font></li> - </ul> - </dd> - <dt><font><font>{{HTMLAttrDef ("rel")}}</font></font></dt> - <dd><font><font>Цей атрибут іменує відношення пов'язаного документа до поточного документа. </font><font>Атрибут повинен бути розділеним пробілами списком </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>значень типів посилань</font></font></a><font><font> .</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("розміри")}}</font></font></dt> - <dd><font><font>Цей атрибут визначає розміри піктограм для візуальних медіа, що містяться в ресурсі. </font><font>Він повинен бути присутнім, лише якщо {{HTMLAttrxRef ("rel", "link")}} містить значення </font></font><code>icon</code><font><font>або нестандартний тип, наприклад, Apple </font></font><code>apple-touch-icon</code><font><font>. </font><font>Він може мати такі значення:</font></font> - <ul> - <li><code>any</code><font><font>, що означає, що іконку можна масштабувати до будь-якого розміру, як у векторному форматі, наприклад </font></font><code>image/svg+xml</code><font><font>.</font></font></li> - <li><font><font>список розмірів, розділений білим простором, кожен у форматі </font><font>або </font><font>. </font><font>Кожен з цих розмірів повинен міститися в ресурсі.</font></font><code><em><width in pixels></em>x<em><height in pixels></em></code><code><em><width in pixels></em>X<em><height in pixels></em></code></li> - </ul> - - <div class="blockIndicator note"> - <p><strong><font><font>Примітка.</font></font></strong><font><font> Більшість форматів піктограм можуть зберігати лише одну піктограму; </font><font>тому більшу частину часу {{HTMLAttrxRef ("розміри")}} містить тільки один запис. </font><font>Формат ICO MS, як і ICNS від Apple. </font><font>ICO є більш повсюдним; </font><font>Ви обов'язково повинні використовувати його.</font></font></p> - </div> - </dd> - <dt><font><font>{{HTMLAttrDef ("назва")}}</font></font></dt> - <dd><code>title</code><font><font>Атрибут має спеціальну семантику на </font></font><code><link></code><font><font>елементі. </font><font>При використанні на ньому </font></font><code><link rel="stylesheet"></code><font><font>він визначає </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>бажану або альтернативну таблицю стилів</font></font></a><font><font> . </font><font>Неправильне використання може </font></font><a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets"><font><font>призвести до ігнорування таблиці стилів</font></font></a><font><font> .</font></font></dd> - <dt><font><font>{{HTMLAttrDef ("type")}}</font></font></dt> - <dd><font><font>Цей атрибут використовується для визначення типу змісту, з яким пов'язаний. </font><font>Значення атрибута має бути типом MIME, таким як </font></font><strong><font><font>text / html</font></font></strong><font><font> , </font></font><strong><font><font>text / css</font></font></strong><font><font> і так далі. </font><font>Загальним використанням цього атрибуту є визначення типу стильової таблиці, на яку посилаються (наприклад, </font></font><strong><font><font>текст / css</font></font></strong><font><font> ), але враховуючи, що CSS є єдиною мовою таблиць стилів, що використовується в Інтернеті, не тільки можна опустити </font></font><code>type</code><font><font>атрибут, але й насправді тепер рекомендується практика. </font><font>Він також використовується для </font></font><code>rel="preload"</code><font><font>типів посилань, щоб переконатися, що браузер завантажує лише типи файлів, які він підтримує.</font></font></dd> -</dl> - -<h3 id="Нестандартні_атрибути"><font><font>Нестандартні атрибути</font></font></h3> - -<dl> - <dt><font><font>{{HTMLAttrDef ("вимкнено")}} {{Нестандартний_Інтернет}}</font></font></dt> - <dd>This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships. - <div class="blockIndicator note"> - <p><strong>Note: </strong>While there is no <code>disabled</code> attribute in the HTML standard, there <strong>is</strong> a <code>disabled</code> attribute on the <code>HTMLLinkElement</code> DOM object.</p> - </div> - </dd> - <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> - <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> - <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> - <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> - <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> - <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> -</dl> - -<h3 id="Obsolete_attributes">Obsolete attributes</h3> - -<dl> - <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> - <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. - <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> - </dd> - <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> - <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> - <dd> - <div class="blockIndicator note"> - <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> - - <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> - </div> - </dd> -</dl> - -<h2 id="Styling_with_CSS">Styling with CSS</h2> - -<p>The <code><link></code> element has no visual presence on a web document, therefore it has no styling considerations to worry about.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Including_a_stylesheet">Including a stylesheet</h3> - -<p>To include a stylesheet in a page, use the following syntax:</p> - -<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> -</pre> - -<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3> - -<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> - -<p>The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.</p> - -<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Default Style"> -<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> -<link href="basic.css" rel="alternate stylesheet" title="Basic"> -</pre> - -<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> - -<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> - -<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> -<!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> -<!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> -<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="favicon57.png"> -<!-- basic favicon --> -<link rel="icon" href="favicon32.png"></pre> - -<h3 id="Conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3> - -<p>You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p> - -<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> -<link href="mobile.css" rel="stylesheet" media="all"> -<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> -<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> -</pre> - -<h3 id="Stylesheet_load_events">Stylesheet load events</h3> - -<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> - -<pre class="brush: html"><script> -var myStylesheet = document.querySelector('#my-stylesheet'); - -myStylesheet.onload = function() { - // Do something interesting; the sheet has been loaded -} - -myStylesheet.onerror = function() { - console.log("An error occurred loading the stylesheet!"); -} -</script> - -<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> -</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p> -</div> - -<h3 id="Preload_examples">Preload examples</h3> - -<p>You can find a number of <link rel="preload"> examples in <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a>.</p> - -<h2 id="Technical_summary">Technical summary</h2> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td>Metadata content. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> and <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th>Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th>Tag omission</th> - <td>As it is a void element, the start tag must be present and the end tag must not be present</td> - </tr> - <tr> - <th>Permitted parents</th> - <td>Any element that accepts metadata elements. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>None</td> - </tr> - <tr> - <th>DOM interface</th> - <td>{{DOMxRef("HTMLLinkElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Preload")}}</td> - <td>{{Spec2("Preload")}}</td> - <td>Defines <code><link rel="preload"></code>, and the <code>as</code> attribute.</td> - </tr> - <tr> - <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> - <td>{{Spec2("Subresource Integrity")}}</td> - <td>Added the <code>integrity</code> attribute.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No changes from latest snapshot</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> - <td>{{Spec2("Resource Hints")}}</td> - <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code>, and <code>prerender</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="hidden"><font><font>Таблиця сумісності на цій сторінці генерується зі структурованих даних. </font><font>Якщо ви хочете внести свій внесок до даних, зверніться до </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> та надішліть нам запит pull.</font></font></div> - -<p><font><font>{{Compat ("html.elements.link", 3)}}</font></font></p> - -<h2 id="Дивіться_також"><font><font>Дивіться також</font></font></h2> - -<ul> - <li><font><font>Заголовок HTTPHeader ("Link")}} HTTP</font></font></li> - <li><a href="https://pie.gd/test/script-link-events/"><font><font><script> і <link> графік сумісності подій у Ryan Grove</font></font></a></li> -</ul> diff --git a/files/uk/web/html/element/nav/index.html b/files/uk/web/html/element/nav/index.html deleted file mode 100644 index dc1997b76c..0000000000 --- a/files/uk/web/html/element/nav/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: <nav> -slug: Web/HTML/Element/nav -tags: - - HTML секції - - Веб - - Елемент - - Навігація - - Посилання -translation_of: Web/HTML/Element/nav -original_slug: Web/HTML/Елемент/nav ---- -<div>{{HTMLRef}}</div> - -<p><strong>HTML-елемент <code><nav></code></strong> (<em>HTML елемент навігації</em>) являє собою секцію сторінки, котра має посилання на інші сторінки або блоки в межах поточної сторінки.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Категорії контенту</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">секційний контент</a>, тактильний контент.</td> - </tr> - <tr> - <th scope="row">Дозволений контент</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>.</td> - </tr> - <tr> - <th scope="row">Пропуск закриваючого тега</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Дозволені батьківські елементи</th> - <td>Будь-який елемент, що приймає <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">потоковий контент</a>.</td> - </tr> - <tr> - <th scope="row">DOM інтерфейс</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибути">Атрибути</h2> - -<p><span style="line-height: 21px;">Цей елемент може містити лише </span><a href="/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p> - -<h2 id="Зауваження_щодо_використання">Зауваження щодо використання</h2> - -<ul> - <li>Не всі посилання документа мають бути в елементі <code><nav></code>, бо він призначений для головних блоків навігаційних посилань. Наприклад, елемент {{HTMLElement("footer")}} зазвичай містить перелік посилань, які не потрібно розміщувати у елементі {{HTMLElement("nav")}};</li> - <li>Документ може містити кілька елементів {{HTMLElement("nav")}} (наприклад, один для навігації по сайту, а інший — для навігції в межах сторінки);</li> - <li>Деякі програмні засоби для людей з вадами зору, часто можуть використовувати цей елемент щоб визначити, чи слід пропускати початкове відтворення даного вмісту.</li> -</ul> - -<h2 id="Приклади">Приклади</h2> - -<pre class="brush: html"><nav> - <ul> - <li><a href="#">Home</a></li> - <li><a href="#">About</a></li> - <li><a href="#">Contact</a></li> - </ul> -</nav> -</pre> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Жодних змін після останнього W3C Snapshot.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Первинне визначення.</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.nav")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Інші секційні елементи: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> - <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> -</ul> diff --git a/files/uk/web/html/element/script/index.html b/files/uk/web/html/element/script/index.html deleted file mode 100644 index 871e8a1986..0000000000 --- a/files/uk/web/html/element/script/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: '<script>: Елементи тега Script' -slug: Web/HTML/Element/script -translation_of: Web/HTML/Element/script -original_slug: Web/HTML/Елемент/script ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary"><strong>HTML <code><script></code> </strong>елемент використовується для вбудовування або посилання виконавчого коду; зазвичай використовується для вбудовування або посилання на код JavaScript.</span> Тег <code><script> може</code> бути використаний для других мов програмування, такі як <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>'s GLSL та мов для створення шейдерів.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Категорія вмісту</th> - <td><a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">Мета дата</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Плаваючий контент</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Зміст фразування</a>.</td> - </tr> - <tr> - <th scope="row">Дозволений вміст</th> - <td>Динамічний сценарій, такий як text/javascript.</td> - </tr> - <tr> - <th scope="row">Опущення тегів</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Дозволені батьки</th> - <td>Будь-який елемент, який приймає вміст <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">метаданих</a>, або будь-який елемент, який приймає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">вміст фраз</a>.</td> - </tr> - <tr> - <th scope="row">Дозволені ролі ARIA</th> - <td>Немае</td> - </tr> - <tr> - <th scope="row">DOM-інтерфейс</th> - <td>{{domxref("HTMLScriptElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>Цей елемент включає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p> - -<dl> - <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> - <dd> - <p>This is a Boolean attribute indicating that the browser should, if possible, load the script asynchronously and then execute it as soon as it’s downloaded.</p> - - <div class="warning"> - <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect.</p> - </div> - - <p>Browsers usually assume the worst case scenario and load scripts synchronously, (i.e. <code>async="false"</code>) during HTML parsing.</p> - - <p>Dynamically inserted scripts (using {{domxref("document.createElement()")}}) load asynchronously by default, so to turn on synchronous loading (i.e. scripts load in the order they were inserted) set <code>async="false"</code>.</p> - - <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>defer</code> has a similar effect in this case.</p> - - <p>See {{anch("Browser compatibility")}} for notes on browser support. See also <a href="/en-US/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>.</p> - </dd> - <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>Normal <code>script</code> elements pass minimal information to the {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} for scripts which do not pass the standard {{Glossary("CORS")}} checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> for a more descriptive explanation of its valid arguments.</dd> - <dt>{{htmlattrdef("defer")}}</dt> - <dd> - <p>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing {{event("DOMContentLoaded")}}.</p> - - <p>Scripts with the <code>defer</code> attribute will prevent the <code>DOMContentLoaded</code> event from firing until the script has loaded and finished evaluating.</p> - - <div class="warning"> - <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts), in this case it would have no effect.</p> - </div> - - <p>To achieve a similar effect for dynamically inserted scripts use <code>async="false"</code> instead. Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</p> - - <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>async</code> has a similar effect in this case.</p> - </dd> - <dt>{{htmlattrdef("integrity")}}</dt> - <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> - <dt>{{htmlattrdef("nomodule")}}</dt> - <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd> - <dt>{{htmlattrdef("nonce")}}</dt> - <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> - <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> - <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the script, or resources fetched by the script: - <ul> - <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> - <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> - <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> - <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> - <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> - <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).</li> - <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).</li> - <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> - </ul> - - <div class="blockIndicator note"> - <p><strong>Note</strong>: An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code><script></code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>no-referrer-when-downgrade</code>.</p> - </div> - </dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd> - <p>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</p> - - <div class="warning"> - <p>If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags since it can lead to unexpected behavior. The unexpected behavior is because it is only the JavaScript in the file referenced in the <code>src</code> attribute that will be added to the HTML page.</p> - </div> - </dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd> - <p>This attribute indicates the type of script represented. The value of this attribute will be in one of the following categories:</p> - - <ul> - <li><strong>Omitted or a JavaScript MIME type:</strong> This indicates the script is JavaScript. The HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li> - <li><strong><code>module</code>:</strong> Causes the code to be treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>defer</code> attributes. For information on using <code>module</code>, see our <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide.</li> - <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li> - </ul> - - <div class="note"> - <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code><script></code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p> - </div> - </dd> -</dl> - -<h3 id="Deprecated_attributes">Deprecated attributes</h3> - -<dl> - <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> - <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> - <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> - <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> -</dl> - -<h2 id="Notes">Notes</h2> - -<p>Scripts without {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} or <code>type="module"</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p> - -<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_usage">Basic usage</h3> - -<p>These examples show how to import (an external) script using the <code><script></code> element in both HTML4 and HTML5:</p> - -<pre class="brush: html"><!-- HTML4 --> -<script type="text/javascript" src="javascript.js"></script> - -<!-- HTML5 --> -<script src="javascript.js"></script> -</pre> - -<p>And the following examples show how to put (an inline) script inside the <code><script></code> element in both HTML4 and HTML5:</p> - -<pre class="brush: html"><!-- HTML4 --> -<script type="text/javascript"> - alert("Hello World!"); -</script> - -<!-- HTML5 --> -<script> - alert("Hello World!"); -</script></pre> - -<h3 id="Module_fallback">Module fallback</h3> - -<p>Browsers that support the <code>module</code> value for the <code>type</code> attribute ignore any script with a <code>nomodule</code> attribute. That enables you to use module scripts while also providing <code>nomodule</code>-marked fallback scripts for non-supporting browsers.</p> - -<pre class="brush: html"><script type="module" src="main.js"></script> -<script nomodule src="fallback.js"></script></pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> - </tr> - <tr> - <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "<script>")}}</td> - <td>{{Spec2("HTML5.3")}}</td> - <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> - </tr> - <tr> - <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "<script>")}}</td> - <td>{{Spec2("HTML5.2")}}</td> - <td>Adds the <code>module</code> {{HTMLAttrxRef("type", "script")}}</td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> - <td>{{Spec2("HTML4.01")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> - <td>{{Spec2("Subresource Integrity")}}</td> - <td>Adds the {{HTMLAttrxRef("integrity", "script")}} attribute.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<div>{{Compat("html.elements.script", 2)}}</div> - -<h3 id="Compatibility_notes">Compatibility notes</h3> - -<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p> - -<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async="false"</code> on the scripts you want to maintain order.</p> - -<div class="warning"> -<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("document.currentScript")}}</li> - <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> - <li><a href="https://flaviocopes.com/javascript-async-defer/">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li> - <li><code><a href="https://bytutorial.com/tutorials/javascript">Javascript tips and tricks</a>.</code></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li> -</ul> diff --git a/files/uk/web/html/element/section/index.html b/files/uk/web/html/element/section/index.html deleted file mode 100644 index 9c59f1e362..0000000000 --- a/files/uk/web/html/element/section/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: <section> -slug: Web/HTML/Element/section -tags: - - HTML - - HTML секції - - Ве - - Елемент - - Посилання -translation_of: Web/HTML/Element/section -original_slug: Web/HTML/Елемент/section ---- -<p>{{HTMLRef}}</p> - -<p><strong>HTML елемент <code><section></code></strong> являє собою узагальнену секцію документу, яка допомагає категоризувати контент, зазвичай, заголовком. Кожний елемент <code><section></code> повинен бути ідентифікований, зазвичай, використанням заголовків ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) в якості дочірнього елементу <code><section></code>.</p> - -<div class="note"> -<p><em>Зауваження щодо використання :</em></p> - -<ul> - <li>Якщо є доцільним розбивати на категорії контент у елементі {{HTMLElement("section")}} , то використовуйте замість нього елемент {{HTMLElement("article")}}.</li> - <li>Не використовуйте елемент {{HTMLElement("section")}} як загальний контейнер; цю функцію виконує елемент {{HTMLElement("div")}}, особливо тоді, коли секціонування призначено для стилізації. Емпіричне правило використання цього елементу полягає у тому, що розділ повинен логічно відображатись у контурі документу</li> -</ul> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/uk/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/uk/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>Any element that accepts <a href="/uk/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибути">Атрибути</h2> - -<p>Цей елемент може включати в себе лише глобальні атрибути.</p> - -<h2 id="Приклад_1">Приклад 1</h2> - -<h3 id="До">До</h3> - -<pre><div> - <h1>Heading</h1> - <p>Bunch of awesome content</p> -</div></pre> - -<h3 id="Після">Після</h3> - -<pre class="brush: html"><section> - <h1>Heading</h1> - <p>Bunch of awesome content</p> -</section> -</pre> - -<h2 id="Приклад_2">Приклад 2</h2> - -<h3 id="До_2">До</h3> - -<pre class="brush: html"><div> - <h2>Heading</h2> - <img src="bird.jpg" alt="bird"> -</div> -</pre> - -<h3 id="Після_2">Після</h3> - -<pre class="brush: html"><section> - <h2>Heading</h2> - <img src="bird.jpg" alt="bird"> -</section> -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>9.0</td> - <td>11.10</td> - <td>4.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.2</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>9.0</td> - <td>11.0</td> - <td>5.0 (iOS 4.2)</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> - <li><a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> -</ul> diff --git a/files/uk/web/html/element/style/index.html b/files/uk/web/html/element/style/index.html deleted file mode 100644 index 68a62e39ce..0000000000 --- a/files/uk/web/html/element/style/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: <style> -slug: Web/HTML/Element/style -tags: - - Інкапсуляція стилів - - Елемент - - Метадані - - Стилі -translation_of: Web/HTML/Element/style -original_slug: Web/HTML/Елемент/style ---- -<p id="Summary">{{HTMLRef}}</p> - -<p>HTML-елемент<strong> <code><style></code> </strong>містить стилі для документа чи його частини. За відсутності атрибута {{htmlattrdef("type")}}, мовою інструкцій всередині цього елемента вважається <a href="/en-US/docs/Web/CSS">CSS</a>.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th> - <td><a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">Метадані</a> та, в разі наявності атрибута <code>scoped,</code><a href="/uk/docs/Web/Guide/HTML/Content_categories#Потоковий_вміст">потоковий вміст</a>.</td> - </tr> - <tr> - <th>Дозволений вміст</th> - <td>Текстовий вміст, що відповідає атрибутові <code>type</code>, зазвичай <code>text/css</code>.</td> - </tr> - <tr> - <th>Обов'язковість тегів</th> - <td>Обидва обов'язкові.</td> - </tr> - <tr> - <th>Дозволені пращури</th> - <td>Будь-який елемент, що може містити <a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">метадані</a>.</td> - </tr> - <tr> - <th scope="row">Дозволені ARIA-ролі</th> - <td>ВІдсутні</td> - </tr> - <tr> - <th>Інтерфейс DOM</th> - <td>{{domxref("HTMLStyleElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибути">Атрибути</h2> - -<p>Цей елемент має <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p> - -<dl> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Цей атрибут вказує MIME-тип (без частини, що вказує кодування символів), який відповідає задіяній мові стилів. Він є необов'язковим та за умовчанням має значення <code>text/css</code>.</dd> - <dt>{{htmlattrdef("media")}}</dt> - <dd>Цей атрибут вказує <a href="/en-US/docs/Web/Guide/CSS/Media_queries">медіазапит</a> для обмеження застосування стилів. Стилі застосовуються без обмежень (те саме, що і значення <code>all)</code>, якщо атрибут відсутній.</dd> - <dt>{{htmlattrdef("title")}}</dt> - <dd>Позначає назву <a href="/uk/docs/Web/CSS/Альтернативні_таблиці_стилів">альтернативної множини стилів</a>.</dd> - <dt>{{htmlattrdef("scoped")}} {{experimental_inline}}</dt> - <dd>Якщо цей атрибут присутній, таблиця стилів застосовуються лише до нащадків батьківського (для <strong><code><style></code></strong>) елемента.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Найпростіша_таблиця_стилів">Найпростіша таблиця стилів</h3> - -<pre class="brush:html"><style type="text/css"> - body { - color: red; - } -</style> -</pre> - -<h3 id="Застосування_атрибута_scoped">Застосування атрибута <code>scoped</code></h3> - -<pre class="brush: html"><html> - <head> - <style type="text/css"> - span { - color: red; - } - </style> - </head> - - <body> - <div> - <style type="text/css" scoped> - span { - color: orange; - } - </style> - <span>Помаранчевий текст!</span> - </div> - - <span>Червоний текст!</span> - </body> -</html></pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td> </td> - </tr> - <tr> - <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> - <td>{{ Spec2('HTML5 W3C') }}</td> - <td>Жодних змін відносно {{ SpecName('HTML4.01') }}.</td> - </tr> - <tr> - <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> - <td>{{ Spec2('HTML4.01') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(1.0)}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</td> - </tr> - <tr> - <td>Атрибут scoped</td> - <td>20<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>21</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базова підтримка</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(1.0)}}</td> - <td>9.0<sup>[2]</sup></td> - <td>6.0</td> - <td>1.0</td> - </tr> - <tr> - <td>Атрибут scoped</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>50</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Підтримується версіями Chrome з 20 по 34 включно за наявності встановленого прапорця «<strong>Enable <style scoped></strong>» чи «<strong>Experimental WebKit features</strong>» у chrome://flags.<br> - [2] Mobile Internet Explorer (попередня назва IE Phone — версій менших за 8) також підтримує.</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Елемент {{HTMLElement("link")}} дозволяє використовувати зовнішні таблиці стилів.</li> -</ul> diff --git a/files/uk/web/html/element/table/index.html b/files/uk/web/html/element/table/index.html deleted file mode 100644 index d18f819033..0000000000 --- a/files/uk/web/html/element/table/index.html +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: '<table>: The Table element' -slug: Web/HTML/Element/table -tags: - - Посилання - - дані - - таблиця -translation_of: Web/HTML/Element/table -original_slug: Web/HTML/Елемент/table ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">Тег <strong><code><table></code></strong> являє собою табличні дані себто інформацію представлену у вигляді двовимірної таблиці, що складається з рядків, шпальт та комірок, що містять власне дані.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> - -<p class="hidden">Вихідний код цього прикладу зберігається на GitHub. Якщо маєте бажання зробити свій внесок, будь ласка склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> і надішліть нам запит (pull request).</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Тип вмісту</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковий</a></td> - </tr> - <tr> - <th scope="row">Дозволений вміст</th> - <td> - <div class="content-models"> - <div id="table-mdls">В наступному порядку: - <ol> - <li>можливий елемент {{HTMLElement("caption")}},</li> - <li>можливо 0 або більше елементів {{HTMLElement("colgroup")}},</li> - <li>можливий елемент {{HTMLElement("thead")}},</li> - <li>одне з наступного: - <ul> - <li>0 або більше {{HTMLElement("tbody")}}</li> - <li>1 або більше {{HTMLElement("tr")}}</li> - </ul> - </li> - <li>можливий елемент {{HTMLElement("tfoot")}}</li> - </ol> - </div> - </div> - </td> - </tr> - <tr> - <th scope="row">Пропуск теґів</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Дозволені батьківські елементи</th> - <td>Будь який елемент що приймає потоковий вміст</td> - </tr> - <tr> - <th scope="row">Явна роль ARIA</th> - <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code></td> - </tr> - <tr> - <th scope="row">Дозволені ролі ARIA </th> - <td>Будь які</td> - </tr> - <tr> - <th scope="row">Інтерфейс DOM</th> - <td>{{domxref("HTMLTableElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Атрибути">Атрибути</h2> - -<p>Цей елемент містить <a href="/en-US/docs/HTML/Global_attributes">глобальні атрибути</a>.</p> - -<h3 id="Застарілі_атрибути">Застарілі атрибути</h3> - -<dl> - <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> - <dd> - <p>Цей нумерований атрибут вказує на розміщення таблиці в документі. Може мати наступні значення:</p> - - <ul> - <li><code>left</code>: Таблиця розміщується в лівій стороні документа;</li> - <li><code>center</code>: Таблиця розміщується по центру документа;</li> - <li><code>right</code>: Таблиця розміщується в правій стороні документа.</li> - </ul> - - <p>Встановіть {{cssxref("margin-left")}} та {{cssxref("margin-right")}} у значення <code>auto</code> або {{cssxref("margin")}} в <code>0 auto</code> для того щоб досягти подібного розміщення.</p> - </dd> - <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> - <dd> - <p>Колір тла таблиці в <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">шестизначному шістнадцятирічному форматі RGB</a> з префіксом '<code>#</code>'. Також замість RGB можна використати <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">ключові слова кольорів</a>.</p> - - <p>Щоб досягти подібного ефекту використовуйте CSS-властивість {{cssxref("background-color")}} .</p> - </dd> - <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> - <dd> - <p>Цілочислений атрибут визначає розмір рамки, що оточує таблицю, в пікселях. Якщо 0, то атрибут {{htmlattrxref("frame", "table")}} порожній.</p> - - <p>Щоб досягти подібного ефекту скористайтеся складаною CSS-властивістю {{cssxref("border")}}.</p> - </dd> - <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> - <dd> - <p>Цей атрибут визначає відстань між вмістом комірки та її межою, чи показувати її чи ні. Якщо цей відступ визначено в пікселях, цей відступ прикладається до всіх чотирьох сторін. Якщо відступ визначено у відсотках вміст комірки буде центровано, а значення відступу буде прикладено тільки до відступу по вертикалі (зверху та знизу від вмісту).</p> - - <p>Щоб досягти подібного ефекту, застосуйте властивість {{cssxref("border-collapse")}} до <code><table></code>, зі значенням collapse, та {{cssxref("padding")}} до елементів {{HTMLElement("td")}}.</p> - </dd> - <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> - <dd> - <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> - - <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p> - </dd> - <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> - <dd> - <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p> - - <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p> - </dd> - <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> - <dd> - <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p> - - <ul> - <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li> - <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> - <li><code>rows</code>, which will cause the rules to be displayed between rows;</li> - <li><code>columns</code>, which will cause the rules to be displayed between columns;</li> - <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li> - </ul> - - <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p> - </dd> - <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> - <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd> - <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> - <dd> - <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Simple_Table">Simple Table</h3> - -<pre class="brush: html notranslate"><table> - <tr> - <td>John</td> - <td>Doe</td> - </tr> - <tr> - <td>Jane</td> - <td>Doe</td> - </tr> -</table> -</pre> - -<p>{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/table')}}</p> - -<h3 id="More_Examples">More Examples</h3> - -<pre class="brush: html notranslate"><p>Simple table with header</p> -<table> - <tr> - <th>First name</th> - <th>Last name</th> - </tr> - <tr> - <td>John</td> - <td>Doe</td> - </tr> - <tr> - <td>Jane</td> - <td>Doe</td> - </tr> -</table> - -<p>Table with thead, tfoot, and tbody</p> -<table> - <thead> - <tr> - <th>Header content 1</th> - <th>Header content 2</th> - </tr> - </thead> - <tbody> - <tr> - <td>Body content 1</td> - <td>Body content 2</td> - </tr> - </tbody> - <tfoot> - <tr> - <td>Footer content 1</td> - <td>Footer content 2</td> - </tr> - </tfoot> -</table> - -<p>Table with colgroup</p> -<table> - <colgroup span="4"></colgroup> - <tr> - <th>Countries</th> - <th>Capitals</th> - <th>Population</th> - <th>Language</th> - </tr> - <tr> - <td>USA</td> - <td>Washington, D.C.</td> - <td>309 million</td> - <td>English</td> - </tr> - <tr> - <td>Sweden</td> - <td>Stockholm</td> - <td>9 million</td> - <td>Swedish</td> - </tr> -</table> - -<p>Table with colgroup and col</p> -<table> - <colgroup> - <col style="background-color: #0f0"> - <col span="2"> - </colgroup> - <tr> - <th>Lime</th> - <th>Lemon</th> - <th>Orange</th> - </tr> - <tr> - <td>Green</td> - <td>Yellow</td> - <td>Orange</td> - </tr> -</table> - -<p>Simple table with caption</p> -<table> - <caption>Awesome caption</caption> - <tr> - <td>Awesome data</td> - </tr> -</table> -</pre> - -<div class="hidden"> -<pre class="brush: css notranslate">table -{ -border-collapse: collapse; -border-spacing: 0px; -} -table, th, td -{ -padding: 5px; -border: 1px solid black; -}</pre> -</div> - -<p>{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Captions">Captions</h3> - -<p>By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p> - -<p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> - <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> -</ul> - -<h3 id="Scoping_rows_and_columns">Scoping rows and columns</h3> - -<p>The {{htmlattrxref("scope", "th")}} attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: html notranslate"><table> - <caption>Color names and values</caption> - <tbody> - <tr> - <th scope="col">Name</th> - <th scope="col">HEX</th> - <th scope="col">HSLa</th> - <th scope="col">RGBa</th> - </tr> - <tr> - <th scope="row">Teal</th> - <td><code>#51F6F6</code></td> - <td><code>hsla(180, 90%, 64%, 1)</code></td> - <td><code>rgba(81, 246, 246, 1)</code></td> - </tr> - <tr> - <th scope="row">Goldenrod</th> - <td><code>#F6BC57</code></td> - <td><code>hsla(38, 90%, 65%, 1)</code></td> - <td><code>rgba(246, 188, 87, 1)</code></td> - </tr> - </tbody> -</table> -</pre> - -<p>Providing a declaration of <code>scope="col"</code> on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row.</p> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> - <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> -</ul> - -<h3 id="Complicated_tables">Complicated tables</h3> - -<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the {{htmlattrxref("colspan", "td")}} and {{htmlattrxref("rowspan", "td")}} attributes.</p> - -<p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p> - -<p>If the table cannot be broken apart, use a combination of the {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> - <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.table")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>CSS properties that may be especially useful to style the <code><table></code> element: - - <ul> - <li>{{cssxref("width")}} to control the width of the table;</li> - <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li> - <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li> - <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content.</li> - </ul> - </li> -</ul> diff --git a/files/uk/web/html/element/video/index.html b/files/uk/web/html/element/video/index.html deleted file mode 100644 index ecfce1d867..0000000000 --- a/files/uk/web/html/element/video/index.html +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: '<video>: Вбудований елемент Відео' -slug: Web/HTML/Element/video -translation_of: Web/HTML/Element/video -original_slug: Web/HTML/Елемент/video ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary"><strong>HTML Елемент Video</strong> (<strong><code><video></code></strong>) вбудовує медіа плеєр, який підтримує відтворення відео в документі.</span> Ви можете використовувати тег <code><video></code> також для аудіо, однак елемент {{HTMLElement("audio")}} може надати кращий користувацький досвід.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> - -<p class="hidden">Код цих інтерактивних прикладів доступний на репозиторії GitHub. Якщо ви хочете долучитися до розробки інтерактивних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>та надішліть нам запит на додавання.</p> - -<p>Наступні приклади показують просте використання елементу <code><video></code>. In a similar manner to the {{htmlelement("img")}} element, we include a path to the media we want to display inside the <code>src</code> attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.</p> - -<p>The content inside the opening and closing <code><video></video></code> tags is shown as a fallback in browsers that don't support the element.</p> - -<p>Browsers don't all support the same <a href="/en-US/docs/Web/HTML/Supported_media_formats">video formats</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p> - -<pre class="brush: html"><video controls> - <source src="myVideo.mp4" type="video/mp4"> - <source src="myVideo.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is - a <a href="myVideo.mp4">link to the video</a> instead.</p> -</video></pre> - -<p>Other usage notes:</p> - -<ul> - <li>If you don't specify the <code>controls</code> attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a> for more details.</li> - <li>To allow precise control over your video (and audio) content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</li> - <li>You can use the {{cssxref("object-position")}} property to adjust the positioning of the video within the element's frame, and the {{cssxref("object-fit")}} property to control how the video's size is adjusted to fit within the frame.</li> - <li>To show subtitles/captions along with your video, you can use some JavaScript along with the {{htmlelement("track")}} element and the <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> format. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information.</li> -</ul> - -<p>A good general source of information on using HTML <code><video></code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> - -<h2 id="Attributes">Attributes</h2> - -<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("autoplay")}}</dt> - <dd>A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.</dd> - <dd> - <p class="note"><strong>Note</strong>: Sites that automatically play audio (or video with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.</p> - - <p class="note">To disable video autoplay, <code>autoplay="false"</code> will not work; the video will autoplay if the attribute is there in the <code><video></code> tag at all. To remove autoplay the attribute needs to be removed altogether.</p> - - <p class="note">In some browsers (e.g. Chrome 70.0) autoplay is not working if no <code>muted</code> attribute is present.</p> - </dd> -</dl> - -<dl> - <dt><code><a href="https://wicg.github.io/picture-in-picture/#auto-pip">autoPictureInPicture</a></code> {{experimental_inline}}</dt> - <dd>Allows for automatic Picture-in-Picture behavior when the user switches back and forth between the web app and other applications/tab.</dd> - <dt>{{htmlattrdef("buffered")}}</dt> - <dd>An attribute you can read to determine the time ranges of the buffered media. This attribute contains a {{domxref("TimeRanges")}} object.</dd> - <dt>{{htmlattrdef("controls")}}</dt> - <dd>If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> - <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> - <dd>The <code><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist">controlslist</a></code> attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the <code>controls</code> attribute is specified).</dd> - <dd>The allowed values are <code>nodownload</code>, <code>nofullscreen</code> and <code>noremoteplayback</code>.</dd> - <dd class="note">Use the <code>disablePictureInPicture</code> attribute if you want to disable the Picture-In-Picture mode (and the control).</dd> - <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>This enumerated attribute indicates whether to use CORS to fetch the related image. <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: - <dl> - <dt><code>anonymous</code></dt> - <dd>Sends a cross-origin request without a credential. In other words, it sends the <code>Origin:</code> HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em>, and its usage restricted.</dd> - <dt><code>use-credentials</code></dt> - <dd>Sends a cross-origin request with a credential. In other words, it sends the <code>Origin:</code> HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> - </dl> - When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <code>anonymous</code> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd> - <dt>{{htmlattrdef("height")}}</dt> - <dd>The height of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>.)</dd> - <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> - <dd>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> - <dt>{{htmlattrdef("loop")}}</dt> - <dd>A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.</dd> - <dt>{{htmlattrdef("muted")}}</dt> - <dd>A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is <code>false</code>, meaning that the audio will be played when the video is played.</dd> - <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt> - <dd>Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.</dd> - <dt>{{htmlattrdef("playsinline")}}</dt> - <dd>A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute <em>does not</em> imply that the video will always be played in fullscreen.</dd> - <dt>{{htmlattrdef("poster")}}</dt> - <dd>A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.</dd> - <dt>{{htmlattrdef("preload")}}</dt> - <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. It may have one of the following values: - <ul> - <li><code>none</code>: Indicates that the video should not be preloaded.</li> - <li><code>metadata</code>: Indicates that only video metadata (e.g. length) is fetched.</li> - <li><code>auto</code>: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.</li> - <li><em>empty string</em>: Synonym of the <code>auto</code> value.</li> - </ul> - - <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> - - <div class="note"><strong>Notes:</strong> - - <ul> - <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li> - <li>The specification does not force the browser to follow the value of this attribute; it is a mere hint.</li> - </ul> - </div> - </dd> - <dt></dt> - <dt>{{htmlattrdef("src")}}</dt> - <dd>The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>The width of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>).</dd> - <dt></dt> -</dl> - -<h2 id="Events">Events</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Event Name</th> - <th scope="col">Fired When</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td> - <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> - <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> - <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> - </tr> - <tr> - <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td> - <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> - <td>The <code>duration</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> - <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> - <td>Playback has stopped because the end of the media was reached.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> - <td>The first frame of the media has finished loading.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> - <td>The metadata has been loaded.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> - <td>Playback has been paused.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> - <td>Playback has begun.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> - <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td> - <td>Fired periodically as the browser loads a resource.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> - <td>The playback rate has changed.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> - <td>A <em>seek</em> operation completed.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> - <td>A <em>seek</em> operation began.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> - <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> - <td>Media data loading has been suspended.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> - <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> - <td>The volume has changed.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> - <td>Playback has stopped because of a temporary lack of data</td> - </tr> - </tbody> -</table> - -<h2 id="Usage_notes">Usage notes</h2> - -<h3 id="Styling_with_CSS">Styling with CSS</h3> - -<p>The <code><video></code> element is a replaced element — its {{cssxref("display")}} value is <code>inline</code> by default, but its default width and height in the viewport is defined by the video being embedded.</p> - -<p>There are no special considerations for styling <code><video></code>; a common strategy is to give it a <code>display</code> value of <code>block</code> to make it easier to position, size, etc., and then provide styling and layout information as required. <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques.</p> - -<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3> - -<p>You can detect when tracks are added to and removed from a <code><video></code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code><video></code> element itself. Instead, they're sent to the track list object within the <code><video></code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p> - -<dl> - <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> - <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd> - <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> - <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd> - <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> - <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd> -</dl> - -<p>For example, to detect when audio tracks are added to or removed from a <code><video></code> element, you can use code like this:</p> - -<pre class="brush: js">var elem = document.querySelector("video"); - -elem.audioTrackList.onaddtrack = function(event) { - trackEditor.addTrack(event.track); -}; - -elem.audioTrackList.onremovetrack = function(event) { - trackEditor.removeTrack(event.track); -}; -</pre> - -<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> - -<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Simple_video_example">Simple video example</h3> - -<p>This example plays a video when activated, providing the user with the browser's default video controls to control playback.</p> - -<pre class="brush: html"><!-- Simple video example --> -<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --> -<!-- Poster from peach.blender.org --> -<video controls - src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" - poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" - width="620"> - -Sorry, your browser doesn't support embedded videos, -but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a> -and watch it with your favorite video player! - -</video></pre> - -<p>{{EmbedLiveSample('Simple_video_example', '640', '370', '', 'Web/HTML/Element/video')}}</p> - -<p>Until the video starts playing, the image provided in the <code>poster</code> attribute is displayed in its place. If the browser doesn't support video playback, the fallback text is displayed.</p> - -<h3 id="Multiple_sources_example">Multiple sources example</h3> - -<p>This example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.</p> - -<pre class="brush: html"><!-- Using multiple sources as fallbacks for a video tag --> -<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --> -<!-- Poster hosted by Wikimedia --> -<video width="620" controls - poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" > - <source - src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" - type="video/mp4"> - <source - src="https://archive.org/download/ElephantsDream/ed_hd.ogv" - type="video/ogg"> - <source - src="https://archive.org/download/ElephantsDream/ed_hd.avi" - type="video/avi"> - Your browser doesn't support HTML5 video tag. -</video></pre> - -<p>{{EmbedLiveSample('Multiple_sources_example', '640', '370', '', 'Web/HTML/Element/video')}}</p> - -<p>First WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried. A fallback message is displayed if the video tag isn't supported, but not if all sources fail.</p> - -<h3 id="Server_support_for_video">Server support for video</h3> - -<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p> - -<p>If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the <code>"AddType"</code> configuration directive in <code>httpd.conf</code>.</p> - -<pre class="eval">AddType video/ogg .ogm -AddType video/ogg .ogv -AddType video/ogg .ogg -</pre> - -<p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in <code>httpd.conf</code>.</p> - -<pre class="eval">AddType video/webm .webm -</pre> - -<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Videos should provide both captions and transcripts that accurately describe its content (see <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.</p> - -<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.</p> - -<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p> - -<pre class="eval">14 -00:03:14 --> 00:03:18 -[Dramatic rock music] - -15 -00:03:19 --> 00:03:21 -[whispering] What's that off in the distance? - -16 -00:03:22 --> 00:03:24 -It's… it's a… - -16 00:03:25 --> 00:03:32 -[Loud thumping] -[Dishes clattering] -</pre> - -<p>Captions should not obstruct the main subject of the video. They can be positioned using <a href="/en-US/docs/Web/API/WebVTT_API#Cue_settings">the <code>align</code> VTT cue setting</a>.</p> - -<ul> - <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> - <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> - <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Technical_summary">Technical summary</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td> - <p>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}</p> - - <p>Else: zero or more {{HTMLElement("source")}} elements, followed by zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</p> - </td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts embedded content.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("application")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLVideoElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Feedback</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '<video>')}}</td> - <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.video")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li> - <li>Positioning and sizing the picture within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> - <li>{{htmlelement("audio")}}</li> - <li><a href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li> - <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulating video using canvas</a></li> - <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li> -</ul> diff --git a/files/uk/web/html/global_attributes/hidden/index.html b/files/uk/web/html/global_attributes/hidden/index.html deleted file mode 100644 index 914dd25be3..0000000000 --- a/files/uk/web/html/global_attributes/hidden/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Global_attributes/hidden -tags: - - HTML - - Глобальні атрибути -translation_of: Web/HTML/Global_attributes/hidden -original_slug: Web/HTML/Загальні_атрибути/hidden ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальний атрибут</a> <strong><code>Hidden</code></strong> - це булівський атрибут, який позначає,що цей елемент ще або вже не релевантний. Наприклад? цей атрибут може бути використаним, щоб сховати елементи поки не виконається вхід. Браузер не промалює елемент з заданим атрибутом</span> <code>hidden</code> .</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> - -<p class="hidden">Початковий код для інтерактивного приклада зберігається в GitHub репозиторії. Якшо ви бажаєте зробити внесок в проект приклада, будь ласка, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>і надішліть нам пул реквест.</p> - -<p>Атрибут <code>hidden</code> не має використовуватись для того, щоб ховати контент, що має відображатись в іншому представленні. Наприклад, неправильно використовувати атрибут, щоб ховати панель в діалозі з вкладками, тому що інтерфейс вкладок - це вид представлення зі схованими елементами, які можна відобразити на одній великій сторінці з прокруткою. Так само не коректно використовувати вміст тільки для одного представлення - якщо щось позначено як приховане - це має бути сховане для всіх представлень включно з зчитувачами екрана.</p> - -<p>Сховані елементи не мають бути прив'язані до не схованих. і до елементів, які наслідують приховані, все ще активні елементи, що означає, що скриптові елементи все ще можуть виконуватися, а елементи форми відправлятися. Проте елементи і скрипти можуть посилатися на елементи, що сховані в іншому контексті.</p> - -<p>Наприклад, неправильно використовувати атрибут <code>href</code>, що посилається до секції з атрибутом <code>hidden</code>. Немає сенсу посилатися на вміст якщо він не застосовуваний і не релевантний.</p> - -<p>Проте було б добре використовувати ARIA атрибут <code>aria-describedby</code> для посилання до описів, які сховані. Тоді як приховування описів означає, що вони не є корисними; Вони можуть бути написаними таким чином, щоб бути корисними в конкретному контексті посилання на них з елемента який вони описують.</p> - -<p>Аналогічно елемент canvas з атрибутом <code>hidden</code> може бути використаний для заскриптованого графічного движка і форма може посилатися до схованого елемента використовуючи його атрибут форми.</p> - -<div class="note"> -<p><strong>Нотатка:</strong> Зміна {{cssxref("display")}} властивості елемента з атрибутом <code>hidden</code> перезаписує середовище. Для прикладу, елемент стилізований <code>display: flex</code> буде відображатись, не зважаючи на атрибут <code>hidden.</code></p> -</div> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Не змінювалося з останнього знымка, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Визначає запропонований рендеринг атрибута <code>hidden</code>, використовуючи CSS</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Знімок {{SpecName('HTML WHATWG')}}, початкове визначення</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> - -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("html.global_attributes.hidden")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>Всіl <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</li> -</ul> diff --git a/files/uk/web/html/global_attributes/index.html b/files/uk/web/html/global_attributes/index.html deleted file mode 100644 index 3865582402..0000000000 --- a/files/uk/web/html/global_attributes/index.html +++ /dev/null @@ -1,475 +0,0 @@ ---- -title: Загальні атрибути -slug: Web/HTML/Global_attributes -translation_of: Web/HTML/Global_attributes -original_slug: Web/HTML/Загальні_атрибути ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<div class="summary"> -<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.</p> -</div> - -<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> - -<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> - -<ul> - <li>{{HTMLAttrDef("xml:lang")}} and {{HTMLAttrDef("xml:base")}} — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> - <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> - <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> -</ul> - -<h2 id="Description">Description</h2> - -<dl> - <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> - <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> - <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> - <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> - <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> - <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: - <ul> - <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> - <li><code>false</code>, which indicates that the element must not be editable.</li> - </ul> - </dd> - <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> - <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> - <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> - <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> - <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> - <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: - <ul> - <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> - <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> - <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> - </ul> - </dd> - <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>true</code>, which indicates that the element may be dragged</li> - <li><code>false</code>, which indicates that the element may not be dragged.</li> - </ul> - </dd> - <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> - <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> - <li><code>link</code>, will create a link to the dragged data.</li> - </ul> - </dd> - <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> - <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> - <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> - <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> -</dl> - -<div class="note"> -<p><strong>Note: </strong>The following 5 attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> -</div> - -<dl> - <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> - <dd>The unique, global identifier of an item.</dd> - <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> - <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> - <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> - <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> - <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> - <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> - <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> - <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> - <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> - <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> -</dl> - -<dl> - <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> - <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> -</dl> - -<dl> - <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: - <ul> - <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> - <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> - </ul> - </dd> - <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> - <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> - <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> - <dd>Is an integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: - <ul> - <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> - <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> - <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> - </ul> - </dd> - <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> - <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> - <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> - <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: - <ul> - <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> - <li><code>"no</code>", which indicates that the element will not be translated.</li> - </ul> - </dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> - <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> - <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> - <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> - <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> - <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> - <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> - <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> - <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> - <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><code>accesskey</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>class</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(9)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>dir</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>id</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>lang</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>style</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>title</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><code>accesskey</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>class</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>dir</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>id</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>lang</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>style</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>title</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> -</ul> diff --git a/files/uk/web/html/global_attributes/itemscope/index.html b/files/uk/web/html/global_attributes/itemscope/index.html deleted file mode 100644 index 2a1eb3e0a3..0000000000 --- a/files/uk/web/html/global_attributes/itemscope/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: itemscope -slug: Web/HTML/Global_attributes/itemscope -translation_of: Web/HTML/Global_attributes/itemscope -original_slug: Web/HTML/Загальні_атрибути/itemscope ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p><code><strong>itemscope</strong></code> це <a href="/en-US/docs/Web/HTML/Global_attributes">глобальний атрибут</a> логічного типу, що визначає сферу асоційованих даних. Атрибут <code><strong>itemscope</strong></code> визначається на елементах, що створюють нові елементи, який призводить до числа з пар назва-значення, що асоціюється з елементом. Пов'язаний з ним атрибут, {{htmlattrxref("itemtype")}}, використовується для визначення валідної URL зі словника (such as <a href="http://schema.org/">schema.org</a>), що описує елемент та контекст його властивостей. У наступних прикладах в кожному елементі словник взятий з <a href="https://schema.org/">schema.org</a>.</p> - -<p>Кожен HTML елемент може мати атрибут <code>itemscope</code>. <code>itemscope</code> елемент, який не має <code>itemtype</code> повинен мати <code>itemref</code>.</p> - -<div class="note"> -<p><strong>Примітка:</strong> Знайти більше інформації про атрибут <code>itemtype</code> можна на <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> -</div> - -<h3 id="Простий_приклад">Простий приклад</h3> - -<h4 id="HTML">HTML</h4> - -<p>Нижченаведений приклад демонструє атрибут <code>itemscope</code>. В прикладі використовується <code>itemtype</code> як "http://schema.org/Movie", і три пов'язані атрибути <code>itemprop</code>. </p> - -<pre class="brush:html"><div itemscope itemtype ="http://schema.org/Movie"> - <h1 itemprop="name">Avatar</h1> - <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> - <span itemprop="genre">Science fiction</span> - <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> -</div> -</pre> - -<h4 id="sect1"></h4> - -<h4 id="Структуровані_дані">Структуровані дані</h4> - -<p>В наступній таблиці показано структуровані дані з попереднього прикладу.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td rowspan="6">itemscope</td> - <td>Itemtype</td> - <td colspan="2">Movie</td> - </tr> - <tr> - <td>itemprop</td> - <td>(itemprop name)</td> - <td>(значення itemprop)</td> - </tr> - <tr> - <td>itemprop</td> - <td>director</td> - <td>James Cameron</td> - </tr> - <tr> - <td>itemprop</td> - <td>genre</td> - <td>Science Fiction</td> - </tr> - <tr> - <td>itemprop</td> - <td>name</td> - <td>Avatar</td> - </tr> - <tr> - <td>itemprop</td> - <td>https://youtu.be/0AY1XIkX7bY</td> - <td>Trailer</td> - </tr> - </tbody> -</table> - -<h3 id="itemscope_id_атрибути"><code>itemscope</code> id атрибути</h3> - -<p>Коли ви використовуєте атрибут <code>itemscope</code> для елементу, створюється новий елемент. Новостворений елемент містить групу з пар ім'я-значення. For elements with an <code>itemscope</code> attribute and an <code>itemtype</code> attribute, you may also specify an {{htmlattrxref("id")}} attribute. You can use the <code>id</code> attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.</p> - -<h3 id="Приклад">Приклад</h3> - -<p>There are four <code>itemscope</code> attributes in the following example. Each <code>itemscope</code> attribute sets the scope of its corresponding <code>itemptype</code> attribute. The <code>itemtype</code>s, <code>Recipe</code>, <code>AggregateRating</code>, and <code>NutritionInformation</code> in the following example are part of the <a href="www.schema.org">schema.org</a> structured data for a recipe, as specified by the first <code>itemptype</code>, http://schema.org/Recipe.</p> - -<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> -<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> -<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> -<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> -<span itemprop="name">Carol Smith</p></span> -</span> -<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> -November 5, 2009</p></time> -<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> - <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> - <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> -Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> - Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> - Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> - Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> - <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> - Serving size: <span itemprop="servingSize">1 medium slice<br></span> - Calories per serving: <span itemprop="calories">250 cal<br></span> - Fat per serving: <span itemprop="fatContent">12 g<br></span> -</span> -<p>Ingredients:<br> - <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> - <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> - ... </p> - -Directions: <br> - <div itemprop="recipeInstructions"> - 1. Cut and peel apples<br> - 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> - ... - </div> -</div> </pre> - -<h3 id="Results">Results</h3> - -<h4 id="HTML_2">HTML</h4> - -<p>The following is an example rendering of the preceding code example.</p> - -<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> - -<h4 id="Structured_data">Structured data</h4> - -<table class="standard-table"> - <tbody> - <tr> - <td colspan="1" rowspan="14">itemscope</td> - <td>itemtype</td> - <td colspan="2" rowspan="1">Recipe</td> - </tr> - <tr> - <td>itemprop</td> - <td>name</td> - <td>Grandma's Holiday Apple Pie</td> - </tr> - <tr> - <td>itemprop</td> - <td>image</td> - <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> - </tr> - <tr> - <td>itemprop</td> - <td>datePublished</td> - <td>2009-11-05</td> - </tr> - <tr> - <td>itemprop</td> - <td>description</td> - <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> - </tr> - <tr> - <td>itemprop</td> - <td>prepTime</td> - <td>PT30M</td> - </tr> - <tr> - <td>itemprop</td> - <td>cookTime</td> - <td>PT1H</td> - </tr> - <tr> - <td>itemprop</td> - <td>totalTime</td> - <td>PT1H30M</td> - </tr> - <tr> - <td>itemprop</td> - <td>recipeYield</td> - <td>1 9" pie (8 servings)</td> - </tr> - <tr> - <td>itemprop</td> - <td>recipeIngredient</td> - <td>Thinly-sliced apples: 6 cups</td> - </tr> - <tr> - <td>itemprop</td> - <td>recipeIngredient</td> - <td>White sugar: 3/4 cup</td> - </tr> - <tr> - <td>itemprop</td> - <td>recipeInstructions</td> - <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> - </tr> - <tr> - <td>itemprop</td> - <td colspan="2" rowspan="1">author [Person]</td> - </tr> - <tr> - <td>itemprop</td> - <td>name</td> - <td>Carol Smith</td> - </tr> - <tr> - <td colspan="1" rowspan="3">itemscope</td> - <td>itemprop[itemtype]</td> - <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> - </tr> - <tr> - <td>itemprop</td> - <td>ratingValue</td> - <td>4.0</td> - </tr> - <tr> - <td>itemprop</td> - <td>reviewCount</td> - <td>35</td> - </tr> - <tr> - <td colspan="1" rowspan="4">itemscope</td> - <td>itemprop[itemtype]</td> - <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> - </tr> - <tr> - <td>itemprop</td> - <td>servingSize</td> - <td>1 medium slice</td> - </tr> - <tr> - <td>itemprop</td> - <td>calories</td> - <td>250 cal</td> - </tr> - <tr> - <td>itemprop</td> - <td>fatContent</td> - <td>12 g</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: A handy tool for extracting microdata structures from HTML is Google's<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a>. Try it on the HTML shown above.</p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></code></td> - <td></td> - <td>WG Note - No longer being actively developed</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>The following table details this feature's compatibility with popular browsers. </p> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes">Other different global attributes</a></li> - <li>Other, microdata related, global attributes: - <ul> - <li>{{htmlattrxref("itemid")}}</li> - <li>{{htmlattrxref("itemprop")}}</li> - <li>{{htmlattrxref("itemref")}}</li> - <li>{{htmlattrxref("itemscope")}}</li> - <li>{{htmlattrxref("itemtype")}}</li> - </ul> - </li> -</ul> diff --git a/files/uk/web/html/global_attributes/lang/index.html b/files/uk/web/html/global_attributes/lang/index.html deleted file mode 100644 index be806b743a..0000000000 --- a/files/uk/web/html/global_attributes/lang/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: lang -slug: Web/HTML/Global_attributes/lang -tags: - - HTML - - Довідка - - Загальні атрибути -translation_of: Web/HTML/Global_attributes/lang -original_slug: Web/HTML/Загальні_атрибути/lang ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p><a href="/uk/docs/Web/HTML/Загальні_атрибути">Загальний атрибут</a> <strong><code>lang</code></strong> виозначує мову елемента: мову нередаговного вмісту або мову, якою користувач має писати в редаговних елементах (полях введення). Значення атрибута — один «тег мови» у форматі, визначеному стандартом <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Теги Ідентифікації Мов (BCP47)</em></a>.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> - -<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> - -<p>Якщо значенням атрибута є <em>порожній рядок</em> (<code>lang=""</code>), мова встановлюється як <em>невідома</em>; якщо тег мови несумісний із BCP47, мова встановлюється як <em>недійсна</em>.</p> - -<div class="note"> -<h2 id="Синтаксис_тегу_мови">Синтаксис тегу мови</h2> - -<p>Повний синтаксис BCP47 досить глибокий, щоб позначити надзвичайно специфічні мовні діалекти, але в більшості використання набагато простіше.</p> - -<p>Тег мови складається з мов підтегів, розділених дефісом, де кожен підтег вказує на певну властивість мови. Три найпоширеніші підтеги:</p> - -<dl> - <dt>Підтег мови</dt> - <dd>Обов'язковий. Код із 2 або 3 символів, який визначає основну мову, зазвичай написані у нижньому регістрі. Наприклад, код для англійської мови є <code>en</code>, а код для Бадеші є <code>bdz</code>.</dd> - <dt>Підтег сценарію</dt> - <dd>Необов'язково. Цей підтег визначає, яку систему запису використовувати для мови і завжди має довжину 4 символи, починається з великої літери. Наприклад, французька-шрифтом-Брайля буде <code>fr-Brai</code>, а <code>ja-Kana</code> це японська, що написана алфавітом Катакана. Якщо мова написана дуже типовим способом, як англійська латинським алфавітом, немає необхідності використовувати цей підтег.</dd> - <dt>Підтег регіону/області</dt> - <dd>Необов'язково. Цей підтег визначає діалект базової мови із певного місця розташування, і це або 2 ВЕЛИКІ літери, що відповідають коду країни, або 3 номери, що відповідають регіону без конкретної країни. Наприклад, <code>es-ES</code> це іспанська, якою говорять в Іспанії, а <code>es-013</code> це іспанська мова в Центральній Америці. “Міжнародний іспанський” просто буде <code>es</code>.</dd> -</dl> - -<p>Підтег скрипта передує підтегу регіону, якщо вони обидва присутні — <code>ru-Cyrl-BY</code> це російська, написана кирилицею, якою говорять в Білорусі.</p> - -<p>Щоб знайти правильні коди підтегу для мови, спробуйте <a href="https://r12a.github.io/app-subtags/" rel="external">Пошук Підтегу Мови</a>.</p> -</div> - -<p>Навіть якщо атрибут <strong>lang</strong> зазначено, його значення може бути знехтувано, бо атрибут <a href="/uk/docs/Web/HTML/Загальні_атрибути#attr-xml:lang"><strong>xml:lang</strong></a> має пріоритет.</p> - -<p>Для псевдо-класу CSS {{cssxref(":lang")}}, дві недійсні <em>(invalid)</em> назви мов є різні, якщо їхні імена відрізняються. Таким чином, <code>:lang(es)</code> відповідає обом <code>lang="es-ES"</code> і <code>lang="es-419"</code>, <code>:lang(xyzzy)</code> не відповідатиме <code>lang="xyzzy-Zorp!"</code>.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Немає змін від останнього знімку, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Знімок {{SpecName('HTML WHATWG')}}, без змін {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Знімок {{SpecName('HTML WHATWG')}}, поведінка з <code>xml:lang</code> та певний алгоритм визначення мови. Він також є справжнім глобальним атрибутом.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Підтримується у всіх елементах, крім {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, та {{HTMLElement("script")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> - -<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.global_attributes.lang")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/uk/docs/Web/HTML/Загальні_атрибути">Всі загальні атрибути</a></li> - <li><a href="/uk/docs/Web/HTTP/Headers/Content-Language">HTTP-заголовок Content-Language</a></li> -</ul> diff --git a/files/uk/web/html/global_attributes/tabindex/index.html b/files/uk/web/html/global_attributes/tabindex/index.html deleted file mode 100644 index 31c8ad3b4c..0000000000 --- a/files/uk/web/html/global_attributes/tabindex/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Global_attributes/tabindex -tags: - - HTML - - Tab - - keyboard - - tabIndex - - Глобальні атрибути - - клавіатура -translation_of: Web/HTML/Global_attributes/tabindex -original_slug: Web/HTML/Загальні_атрибути/tabindex ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p><strong><code>tabindex</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальний атрибут</a> вказує, що його елемент може бути сфокусований, і коли саме він бере участь в послідовності навігації за допомогою клавіатури<span class="seoSummary"> (зазвичай за допомогою клавіші <kbd>Tab</kbd> , звідти і назва).</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> - -<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> - -<p>Він приймає в якості значення ціле позитивне або негативне число з різними наслідками в залежності від величини цого числа:</p> - -<ul> - <li><em>Негативне значення</em> (зазвичай <code>tabindex="-1"</code>) має на увазі, що елемент недоступний під час послідовної навігації за допомогою клавіатури, але може бути сфокусований за допомогою Javascript або за допомогою візуального інтерфейсу. Переважно рекомендується створювати доступні віджети за допомогою JavaScript. - - <div class="note"> - <p>Негативне значення корисне при наявності матеріалів поза екраном, які з'являються в певний момент події. Користувач не зможе сфокусувати будь-якої елемент з негативним значенням. Негативний <code>tabindex</code> блокує навігацію клавіатурою, але скрипт може виконати це за допомогою виклику <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">method</a>.</p> - </div> - </li> - <li><code>tabindex="0"</code> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, але його лад визначається системою розміщення у файлі додатка.</li> - <li><em>Позитивне значення</em> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, при цьому його порядок визначається величиною значення числа. Тобто, <code>tabindex="4"</code> фокусується попереду <code>tabindex="5"</code>, але після <code>tabindex="3"</code>. Якщо кілька елементів мають одне й те саме позитивне значення <code>tabindex</code> то порядок їх розташування відносно один одного визначається за їх позицією в исходнику документа. Максимальне значення для tab-індекса становить 32767. <u>Якщо не вказано, він отримує значення за замовчуванням 0.</u> - <div class="warning"> - <p>Уникайте використання <code>tabindex</code> зі значенням больше 0. Це значно заважає людям, які використовують допоміжні технології для навігації і роботи з вмістом веб-сторінки. Замість цього створіть документ з елементами в логічній послідовності.</p> - </div> - </li> -</ul> - -<p>Якщо ви встановите атрибут <code>tabindex</code> з {{htmlelement("div")}}, то його нащадки не зможуть бути прокручені за допомогою клавіш клавіатури зі стрілками, якщо тільки ви не встановите <code>tabindex</code> на вміст також. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Ознайомтеся з цією статтею, щоб зрозуміти ефект від <code>tabindex</code></a>.</p> - -<h2 id="Вимоги_доступності">Вимоги доступності</h2> - -<p>Уникайте використання атрибута <code>tabindex</code> в поєднанні з не-<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">інтерактивним вмістом</a> , щоб зробити щось, призначене для інтерактивної фокусування при введенні з клавіатури. Прикладом цього може служити використання елемента {{HTMLElement ("div")}} для опису кнопки, а не елементу {{HTMLElement ("button")}}.</p> - -<p>Інтерактивні компоненти, створені з використанням неінтерактивних елементів, у <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">дереві доступності</a> не відображаються. Це не дозволяє допоміжним технологіям керувати і маніпулювати цими компонентами. Вміст має бути описано семантично з використанням інтерактивних елементів ({{HTMLElement ("a")}}, {{HTMLElement ("button")}}, {{HTMLElement ("details")}}, {{HTMLElement ("input" )}}, {{HTMLElement ("select")}}, {{HTMLElement ("textarea")}}, і т.д.) і т.п.). Ці елементи мають вбудовані ролі і стани, що передають статус доступності. В іншому випадку ці компоненти повинні управлятися за допомогою <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>.</p> - -<ul> - <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Використання атрибута табіндекс | The Paciello Group</a></li> -</ul> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Ніяких змін порівняно з останнім snapshot, {{SpecName('HTML5.1')}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, без змін від {{SpecName('HTML5 W3C')}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, атрибут наразі підтримується на всіх елементах (global attributes).</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Підтримується лише на {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці складена з структурованих даних. Якщо Ви хочете внести свій внесок в дані, відвідайте https://github.com/mdn/browser-compat-data і відправте нам запит на використання даних.</p> - -<p>{{Compat("html.global_attributes.tabindex")}}</p> - -<h2 id="Подивіться_також">Подивіться також</h2> - -<ul> - <li>Усі <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a></li> - <li>{{domxref("HTMLElement.tabIndex")}} тотожний цьому атрибуту</li> - <li>Проблеми доступності з табіндексом: см. <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте табіндекс більше 0.</a> від Adrian Roselli</li> -</ul> diff --git a/files/uk/web/html/index.html b/files/uk/web/html/index.html deleted file mode 100644 index da13d75c96..0000000000 --- a/files/uk/web/html/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: HTML -slug: Web/HTML -tags: - - HTML - - HTML5 - - Landing - - WWW - - Гіпертекст - - Довідка -translation_of: Web/HTML ---- -<div>{{HTMLSidebar()}}</div> - -<p><span class="seoSummary">Мова гіпертекстової розмітки (HyperText Markup Language </span>— HTML<span class="seoSummary">) використовується для створення і візуального відображення веб-сторінок.</span></p> - -<p>Основу кожної веб-сторінки в мережі Інтернет становить HTML. Під терміном «гіпертекст» мається на увазі текст, сформований за допомогою мови розмітки і який містить гіперпосилання, якими зв'язані веб-сторінки одна з одною, роблячи Всесвітню павутину тим, чим вона є сьогодні. Створюючи і публікуючи веб-сторінки в мережі Інтернет, ви стаєте активними учасниками Всесвітньої павутини. HTML підтримує як візуальні зображення, так і інший медіаконтент. HTML є мовою, що описує структуру і семантику вмісту веб-документу. Контент веб-сторінки розмічений за допомогою тегів, що представляють HTML-елементи. Прикладами таких елементів є {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("picture")}}, і т.д. Ці елементи формують будівельні блоки для будь-якого веб-сайта.</p> - -<p>Статті, представлені тут, містять довідкові матеріали з веб-розробки.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML довідник</span> - - <p>У нашому <a href="/uk/docs/Web/HTML/Reference">докладному довіднику</a> ви знайдете всю необхідну інформацію до кожного з елементів і атрибутів HTML.</p> - </li> - <li><span>HTML посібник</span> - <p>Для читання статтей, підручників і прикладів по HTML, зверніться до нашого <a href="/uk/docs/Web/Guide/HTML">посібника HTML розробника</a>.</p> - </li> - <li><span>Вступ до HTML</span> - <p>Якщо ви новачок в Web-розробці, то прочитайте наш <a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML/Introduction">вступ</a> про те, що таке HTML і як ним користуватись.</p> - </li> -</ul> - -<div class="callout"> -<h3 id="Бажаєте_стати_веб-розробником_фронтенду">Бажаєте стати веб-розробником фронтенду?</h3> - -<p>Ми уклали повний курс, що включає в себе всю необхідну інформацію задля досягнення вашої мети.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Розпочати</a></p> -</div> - -<h2 class="Documentation" id="Довідники">Довідники</h2> - -<dl> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">Блокові елементи</a></dt> - <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або <a href="/uk/docs/Web/HTML/Inline_elements">рядкові</a>. Блокові елементи займають всю ширину батьківського елемента (контейнера), таким чином утворюючи блок. У цій статті пояснюється, як це працює. </dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_enabled_image">CORS: включені зображення</a></dt> - <dd class="landingPageList">Специфікації HTML вводять атрибут <code><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, що разом з відповідним заголовком <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/CORS" title="CORS: It is insecure to allow a webpage to request any resources from any other domains without limitation. CORS (Cross-Origin Resource Sharing) is a system that determines whether to block or fulfill these requests.">CORS</a> дозволяють використовувати зображення через елемент <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (<img>) represents an image of the document."><code><img></code></a> і завантаженому з інших джерел зображенням бути використаним в canvas так, як наче вони завантажуються з поточного джерела.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_settings_attributes">CORS: налаштування атрибутів</a></dt> - <dd class="landingPageList">В HTML5, деякі HTML-елементи, що підтримують <a href="https://developer.mozilla.org/uk/docs/HTTP/Access_control_CORS">CORS</a>, такі як <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (<img>) represents an image of the document."><code><img></code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML <video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one."><code><video></code></a>, мають <code>crossorigin</code> атрибут (<code>crossOrigin</code> властивості), який дозволяє налаштувати запити CORS для отриманих даних елемента.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Контроль правопису в формах HTML</a></dt> - <dd class="landingPageList">Firefox 2 вводить підтримку перевірки правопису в текстових полях та полях веб-форм. Користувач може вказати використання інтерфейсу about:config незалежно від того, чи ввімкнено перевірку правопису, і чи потрібно перевіряти обидва текстові поля, чи лише текстові області.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Адаптивний потік для HTML 5 відео</a></dt> - <dd class="landingPageList">Dynamic Adaptive Streaming over HTTP (DASH) - це адаптивний потоковий (трансляційний) протокол. Це означає, що він дозволяє потоку відеозв'язку (трансляції) переключатися між швидкістю передачі даних (бітрейтом) на основі пропускної здатності мережі, щоб продовжувати відтворення відео.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Focus_management_in_HTML">Управління фокусом в HTML</a></dt> - <dd class="landingPageList">В робочому проекті HTML5 <code><a href="https://developer.mozilla.org/en/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a></code> DOM атрибут та <code><a href="https://developer.mozilla.org/en/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a></code> DOM метод дають програмісту можливість кращого контролю інтерактивності сторінки в результаті дій користувача. Наприклад, обидва вони можуть бути використані для складання статистики, відстеження кількості кліків на певних посиланнях сторінки, вимірювання часу, протягом якого активний елемент тощо. Крім того, у поєднанні з технологією AJAX, вони допомагають мінімізувати кількість запитів на сервер в залежності від активності користувача та розмітки сторінки.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Global_attributes">Глобальні атрибути</a></dt> - <dd class="landingPageList"><span id="result_box" lang="uk"><span>Глобальні атрибути можуть бути вказані на всіх елементах HTML, навіть тих, які не вказані в стандарті</span></span> . <span id="result_box" lang="uk"><span>Це означає, що будь-які нестандартні елементи, як і раніше, повинні дозволити ці атрибути, навіть якщо використання цих елементів означає, що документ більше не відповідає стандарту HTML5.</span></span> <span id="result_box" lang="uk"><span>Наприклад, HTML5-сумісні браузери приховують вміст, позначений як</span></span> <code><foo hidden>...<foo></code><code>, </code>хоча <code><foo></code> не є дійсним елементом HTML.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Attributes">Довідка по HTML атрибутам</a></dt> - <dd class="landingPageList">Елементи в HTML мають <strong>атрибути</strong>; <span id="result_box" lang="uk"><span>це додаткові значення, які налаштовують елементи або регулюють їх поведінку різними способами для задоволення критеріїв, які хочуть користувачі</span></span>.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">Довідка по HTML елементам</a></dt> - <dd class="landingPageList">Ця сторінка містить усі <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML елементи</a>.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Reference">Довідка по HTML</a></dt> - <dd class="landingPageList"><span id="result_box" lang="uk"><span>HTML - це мова, яка описує структуру та семантичний вміст веб-документа;</span> <span>він складається з <strong>елементів</strong>, кожен з яких може бути змінений деякою кількістю <strong>атрибутів</strong></span></span>.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Inline_elemente">Рядкові елементи</a></dt> - <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">блокові</a> або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Link_types">Типи посилань</a></dt> - <dd class="landingPageList"><span id="result_box" lang="uk"><span>У HTML наступні типи посилань вказують на зв'язок між двома документами, в яких одне посилання на інше використовується за допомогою елемента</span></span> <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/a" title="The HTML <a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both."><code><a></code></a>, <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/area" title="The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element."><code><area></code></a>, або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/link" title="The HTML Link Element (<link>) specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets."><code><link></code></a>.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Supported_media_formats">Медіа формати, що підтримуються аудіо та відео елементами HTML</a></dt> - <dd class="landingPageList">Елементи <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/audio" title="The HTML <audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one."><code><audio></code></a> та <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML <video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one."><code><video></code></a> надають підтримку для відтворення аудіо та відео матеріалів, не вимагаючи плагінів.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/microformats">Мікроформати</a></dt> - <dd class="landingPageList"><span class="p-summary"><a class="external external-icon" href="http://microformats.org"><dfn>Мікроформати</dfn></a> (іноді використовується абревіатура <strong>μF</strong>) </span> <span id="result_box" lang="uk"><span>- це невеликі шаблони HTML для позначення таких об'єктів, як люди, організації, події, місця розташування, публікації в блозі, продукти, огляди, резюме, рецепти тощо</span></span><span class="p-summary">.</span><br> - Вони є простими для вставки семантики в HTML і швидко надають API, <span id="result_box" lang="uk"><span>який буде використовуватися пошуковими системами, агрегаторами та іншими інструментами</span></span>.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing">Оптимізація ваших сторінок для спекулятивного парсингу (аналізу)</a></dt> - <dd class="landingPageList">Традиційно в браузерах HTML-парсер (аналізатор) працює на головній гілці і блокується після тега <code></script></code> доки сценарій не буде завантажено з мережі і не виконано. HTML парсер в Firefox 4 і новіших підтримує спекулятивний синтаксичний аналіз поза головної гілки. Він продовжує парсити, доки скрипти завантажуються і виконуються. Як і в Firefox 3.5 та 3.6, HTML парсер починає спекулятивні завантаження скриптів, стилів і зображень, коли він знаходить їх у початку потоку. <span id="result_box" lang="uk"><span>Проте в Firefox 4 і новіше HTML-парсер також спекулятивно виконує алгоритм побудови дерева HTML</span></span> . Та коли спекуляція (відстежування) вдається, немає необхідності переробляти частину вхідного файлу, який вже був сканований на скрипти, стилі та зображення. Недоліком є те, що більше роботи втрачається, коли спекуляція (відстежування) зазнала невдачі.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Using_the_application_cache">Використання кешу додатків</a></dt> - <dd class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> <span id="result_box" lang="uk"><span>забезпечує механізм <em>кешування додатків</em>, який дозволяє веб-додаткам працювати в автономному режимі.</span></span> Розробники можуть використовувати інтерфейс <strong>Application Cache</strong> (<em>AppCache</em>) <span id="result_box" lang="uk"><span>щоб вказати ресурси, які браузер повинен кешувати та зробити доступними для офлайн-користувачів</span></span>. Додатки, які кешують завантаження, працюють коректно, навіть якщо користувачі клікають кнопку оновлення, коли вони знаходяться офлайн.</dd> -</dl> - -<p><span class="alllinks"><a href="/uk/docs/tag/HTML" title="Article tagged: HTML">Переглянути все...</a></span></p> - -<div class="section"> -<h2 class="Tools" id="Tools" name="Tools">Інструкції та посібники</h2> - -<dl> - <dt><a href="/uk/docs/Web/Guide/HTML">Інструкція з HTML для розробників</a></dt> - <dd><span id="result_box" lang="uk"><span>Статті MDN, що демонструють конкретні методи, які ви можете використовувати при створенні веб-контенту за допомогою HTML, а також навчальні посібники та інші матеріали, які можуть бути вам корисними.</span> <span>Довідник може містити редакційні уроки, поради та інформацію щодо розробки HTML.</span></span></dd> -</dl> -</div> -</section> diff --git a/files/uk/web/html/inline_elements/index.html b/files/uk/web/html/inline_elements/index.html deleted file mode 100644 index 908a9b6263..0000000000 --- a/files/uk/web/html/inline_elements/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Рядкові елементи -slug: Web/HTML/Inline_elements -tags: - - HTML -translation_of: Web/HTML/Inline_elements ---- -<h2 id="Summary" name="Summary">Вступ</h2> - -<p>В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">блокові</a> або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.</p> - -<h2 id="Inline_example" name="Inline_example">Приклад рядкового елемента</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>Цей <span>span</span> є рядковим елементом; колір його бекграунда змінений, щоб показати початок і кінець елемента.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">span { background-color: #8ABB55; } -</pre> - -<p>{{ EmbedLiveSample('Inline_example') }}</p> - -<h2 id="Рядкові_vs._блокові">Рядкові vs. блокові</h2> - -<dl> - <dt>Модель контенту</dt> - <dd>Зазвичай рядкові елементи можуть містити лише дані та інші рядкові елементи.</dd> - <dt>Форматування</dt> - <dd>За замовчуванням, рядкові елементи не починаються з нового рядка.</dd> -</dl> - -<h2 id="Elements" name="Elements">Елементи</h2> - -<p>Ці елементи є рядковими:</p> - -<div class="threecolumns"> -<dl> - <dt>{{ HTMLElement("a") }}</dt> - <dt>{{ HTMLElement("b") }}</dt> - <dt>{{ HTMLElement("big") }}</dt> - <dt>{{ HTMLElement("i") }}</dt> - <dt>{{ HTMLElement("small") }}</dt> - <dt>{{ HTMLElement("tt") }}</dt> - <dt>{{ HTMLElement("abbr") }}</dt> - <dt>{{ HTMLElement("acronym") }}</dt> - <dt>{{ HTMLElement("cite") }}</dt> - <dt>{{ HTMLElement("code") }}</dt> - <dt>{{ HTMLElement("dfn") }}</dt> - <dt>{{ HTMLElement("em") }}</dt> - <dt>{{ HTMLElement("kbd") }}</dt> - <dt>{{ HTMLElement("strong") }}</dt> - <dt>{{ HTMLElement("samp") }}</dt> - <dt>{{ HTMLElement("time") }}</dt> - <dt>{{ HTMLElement("var") }}</dt> - <dt>{{ HTMLElement("bdo") }}</dt> - <dt>{{ HTMLElement("br") }}</dt> - <dt>{{ HTMLElement("img") }}</dt> - <dt>{{ HTMLElement("map") }}</dt> - <dt>{{ HTMLElement("object") }}</dt> - <dt>{{ HTMLElement("q") }}</dt> - <dt>{{ HTMLElement("script") }}</dt> - <dt>{{ HTMLElement("span") }}</dt> - <dt>{{ HTMLElement("sub") }}</dt> - <dt>{{ HTMLElement("sup") }}</dt> - <dt>{{ HTMLElement("button") }}</dt> - <dt>{{ HTMLElement("input") }}</dt> - <dt>{{ HTMLElement("label") }}</dt> - <dt>{{ HTMLElement("select") }}</dt> - <dt>{{ HTMLElement("textarea") }}</dt> -</dl> -</div> - -<h2 id="See_also" name="See_also">Також дивися</h2> - -<ul> - <li><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">Блокові елементи</a></li> -</ul> diff --git a/files/uk/web/html/quirks_mode_and_standards_mode/index.html b/files/uk/web/html/quirks_mode_and_standards_mode/index.html deleted file mode 100644 index ffa15e2f36..0000000000 --- a/files/uk/web/html/quirks_mode_and_standards_mode/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Режим сумісності й стандартний режим -slug: Web/HTML/Quirks_Mode_and_Standards_Mode -translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode -original_slug: Web/HTML/Режим_сумісності_й_стандартний_режим ---- -<p>In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.</p> - -<p>There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In <strong>quirks mode</strong>, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In <strong>full standards mode</strong>, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In <strong>almost standards mode</strong>, there are only a very small number of quirks implemented.</p> - -<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">How do browsers determine which mode to use?</h2> - -<p>For <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset=UTF-8> - <title>Hello World!</title> - </head> - <body> - </body> -</html></pre> - -<p>The DOCTYPE shown in the example, <code><!DOCTYPE html></code>, is the simplest possible, and the one recommended by HTML5. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.</p> - -<p>Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.</p> - -<p>In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.</p> - -<p>See also a detailed description of <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">when different browsers choose various modes</a>.</p> - -<h3 id="XHTML">XHTML</h3> - -<p>If you serve your page as <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> using the <code>application/xhtml+xml</code> MIME type in the <code>Content-Type</code> HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use full standards mode. Note however that serving your pages as <code>application/xhtml+xml</code> will cause Internet Explorer 8 to <a href="/en-US/docs/XHTML#Support" title="XHTML">show a download dialog</a> box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.</p> - -<p>If you serve XHTML-like content using the <code>text/html</code> MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.</p> - -<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">How do I see which mode is used?</h2> - -<p>In Firefox, select <em>View Page Info</em> from the context menu, and look for <em>Render Mode</em>.</p> - -<p>In Internet Explorer, press <em>F12</em>, and look for <em>Document Mode</em>.</p> - -<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">What are the differences between the modes?</h2> - -<p>See the <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">list of quirks</a> and <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a> for the differences between the modes.</p> diff --git a/files/uk/web/html/reference/index.html b/files/uk/web/html/reference/index.html deleted file mode 100644 index a269946556..0000000000 --- a/files/uk/web/html/reference/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HTML довідник -slug: Web/HTML/Reference -tags: - - HTML - - Landing - - WWW - - Довідка -translation_of: Web/HTML/Reference -original_slug: Web/HTML/Довідник ---- -<div>{{HTMLSidebar}}</div> - -<p>Цей <a href="/en-US/docs/Web/HTML">HTML</a>-довідник описує всі <strong>елементи </strong>і <strong>атрибути</strong> HTML, включаючи <strong>глобальні атрибути,</strong> які застосовуються до всіх елементів.</p> - -<dl> - <dd></dd> - <dt><a href="/en-US/docs/Web/HTML/Element">Довідник HTML елементів</a></dt> - <dd>This page lists all the HTML elements.</dd> - <dt><a href="/en-US/docs/Web/HTML/Attributes">Довідник HTML атрибутів</a></dt> - <dd>Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</dd> - <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальні атрибути</a></dt> - <dd>Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.</dd> - <dt><a href="/en-US/docs/Web/HTML/Link_types">Типи посиланнь</a></dt> - <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Переглянути всі сторінки помічені "HTML"...</a></span></p> diff --git a/files/uk/web/http/basics_of_http/index.html b/files/uk/web/http/basics_of_http/index.html deleted file mode 100644 index 237dda5f72..0000000000 --- a/files/uk/web/http/basics_of_http/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Basics of HTTP -slug: Web/HTTP/Basics_of_HTTP -tags: - - Guide - - HTTP - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/HTTP/Basics_of_HTTP ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p> - -<h2 id="Articles">Articles</h2> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> - <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> - <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating)an_HTTP_version">Negotiating an HTTP version</a></dt> - <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt> - <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt> - <dd>Describes how Web resources are referenced and how to locate them.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt> - <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt> - <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd> - <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt> - <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt> - <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt> - <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt> - <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd> - <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> - <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt> - <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> - <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt> - <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt> - <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd> -</dl> diff --git a/files/uk/web/http/basics_of_http/mime_types/index.html b/files/uk/web/http/basics_of_http/mime_types/index.html deleted file mode 100644 index daa5d20b23..0000000000 --- a/files/uk/web/http/basics_of_http/mime_types/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Типи MIME -slug: Web/HTTP/Basics_of_HTTP/MIME_types -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types ---- -<p><span class="seoSummary">A <strong>Multipurpose Internet Mail Extensions (MIME) type</strong> - тип багатоцільових розширень Інтернет-пошти - це стандарт, що вказує на характер і формат документа, файлу або набору байт.</span> Означений і стандартизований в <a href="https://tools.ietf.org/html/rfc6838">IETF RFC 6838</a>.</p> - -<p><a href="https://www.iana.org/">Internet Assigned Numbers Authority (IANA)</a> <span class="tlid-translation translation"><span title="">відповідає за всі офіційні типи MIME, і Ви можете знайти найновіший і повний список на сторінці </span></span><a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Media Types</a><span class="tlid-translation translation"><span title="">.</span></span></p> - -<div class="warning"> -<p><span class="tlid-translation translation"><span title="">Браузери використовують тип MIME, а <strong>не розширення файлу</strong>, для означення того, як потрібно обробляти URL. Тому дуже важливо, щоб сервери надсилали правильний тип MIME у заголовку відповіді </span></span>{{HTTPHeader("Content-Type")}}<span class="tlid-translation translation"><span title="">.</span></span></p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<h3 id="Загальна_структура"><span class="tlid-translation translation"><span title="">Загальна структура</span></span></h3> - -<pre class="syntaxbox"><var>type</var>/<var>subtype</var></pre> - -<p><span class="tlid-translation translation"><span title="">Тип MIME складається з <em>типу </em>і <em>підтипу </em>- двох рядків, розділених </span></span><code>/</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Пробіли не дозволяються.</span> <span title=""><em>Тип</em> представляє категорію і може бути <em>дискретним</em>(</span></span><em>discrete</em><span class="tlid-translation translation"><span title="">) або <em>багаточастинним </em>(</span></span><em>multipart</em> <span class="tlid-translation translation"><span title="">).</span> <span title="">Підтип специфічний для кожного типу.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Типи MIME нечутливі до регістру, але традиційно написані малими літерами.</span></span></p> - -<h3 id="Дискретні_(Discrete)_типи">Дискретні (Discrete) типи</h3> - -<pre class="syntaxbox">text/plain -text/html -text/javascript -text/css -image/jpeg -image/png -audio/mpeg -audio/ogg -audio/* -video/mp4 -application/* -application/json -application/ecmascript -application/octet-stream -…</pre> - -<p><span class="tlid-translation translation"><span title=""><em>Дискретні </em>типи позначають категорію документа.</span> <span title="">Вони можуть бути одним з наступних:</span></span></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Тип</th> - <th scope="col">Опис</th> - <th scope="col">Приклад типових підтипів</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>text</code></td> - <td><span class="tlid-translation translation"><span title="">Будь-який документ, що містить текст і теоретично читається людиною</span></span></td> - <td><code>text/plain</code>, <code>text/html</code>, <code>text/css</code>, <code>text/javascript</code>, <code>text/markdown</code></td> - </tr> - <tr> - <td><code>image</code></td> - <td><span class="tlid-translation translation"><span title="">Будь-яке зображення.</span> <span title="">Відео сюди не включено, хоча анімовані зображення (наприклад, анімовані GIF) описуються також типом </span></span><code>image</code><span class="tlid-translation translation"><span title="">.</span></span></td> - <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code>, <code>image/vnd.microsoft.icon</code></td> - </tr> - <tr> - <td><code>audio</code></td> - <td><span class="tlid-translation translation"><span title="">Будь-який аудіофайл</span></span></td> - <td><code>audio/midi</code>, <code>audio/mpeg</code>, <code>audio/webm</code>, <code>audio/ogg</code>, <code>audio/wav</code></td> - </tr> - <tr> - <td><code>video</code></td> - <td><span class="tlid-translation translation"><span title="">Будь-який відеофайл</span></span></td> - <td><code>video/webm</code>, <code>video/ogg</code></td> - </tr> - <tr> - <td><code>application</code></td> - <td><span class="tlid-translation translation"><span title="">Будь-які двійкові дані, особливо дані, які будуть виконані або якось інтерпретовані.</span></span></td> - <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>, <code>application/pdf</code></td> - </tr> - </tbody> -</table> - -<p><span class="tlid-translation translation"><span title="">Для текстових документів без особливого підтипу слід використовувати </span></span><code>text/plain</code><span class="tlid-translation translation"><span title="">.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Аналогічно, для двійкових документів без певного або відомого підтипу слід використовувати </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span></span></p> - -<h3 id="Багаточастинні_типи">Багаточастинні типи</h3> - -<pre class="syntaxbox">multipart/form-data -multipart/byteranges</pre> - -<p id="sect1"><em>Багаточастинні (Multipart</em>) типи <span class="tlid-translation translation"><span title="">позначають категорію документа, розбиту на частини, часто з різними типами MIME.</span> </span><span class="tlid-translation translation"><span title="">Вони є складеними з частин документами.</span> </span><span class="tlid-translation translation"><span title="">За винятком </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title="">, що використовуються в методі </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title=""> <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-форм</a> і </span></span><code>multipart/byteranges</code><span class="tlid-translation translation"><span title="">, що використовуються для надсилання</span> <span title="">документа з </span></span>{{HTTPStatus("206")}} <code>Partial Content</code><span class="tlid-translation translation"><span title="">, HTTP не обробляє багаточастинні документи спеціальним чином: повідомлення передається в браузер (який, ймовірно, покаже вікно "Зберегти як", якщо він не знає, як відобразити документ.)</span></span></p> - -<h2 id="Важливі_для_веб-розробників_типи_MIME"><span class="tlid-translation translation"><span title="">Важливі для веб-розробників типи MIME </span></span></h2> - -<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3> - -<p><span class="tlid-translation translation"><span title="">Типово, це бінарні файли.</span> <span title="">Оскільки це значить <em>невідомий двійковий файл</em> (</span></span><em>unknown binary</em> file<span class="tlid-translation translation"><span title="">), браузери зазвичай не виконують його, або запитують, чи він повинен бути виконаний.</span> <span title="">Вони розглядають його, аналогічно заголовку </span></span>{{HTTPHeader("Content-Disposition")}}<span class="tlid-translation translation"><span title=""> який встановлений в значення </span></span><code>attachment</code><span class="tlid-translation translation"><span title="">, і пропонують діалогове вікно "Зберегти як".</span></span></p> - -<h3 id="textplain"><code>text/plain</code></h3> - -<p><span class="tlid-translation translation"><span title="">Це типово для текстових файлів.</span> <span title="">Навіть якщо це дійсно значить невідомий текстовий файл, браузери припускають, що вони можуть відображати його як текст.</span></span></p> - -<div class="note"> -<p><span class="tlid-translation translation"><span title="">Зверніть увагу, що </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> не те саме що "один з текстових типів даних".</span> <span title="">Якщо браузер очікує конкретний тип текстових даних, то ймовірно, не вважатиме його відповідним до цього типу.</span> <span title="">Зокрема, якщо браузер завантажує </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> файл з елемента </span></span>{{HTMLElement("link")}}<span class="tlid-translation translation"><span title="">, який оголошує файли CSS, то не буде розпізнавати його як дійсні файли CSS, якщо ті будуть представлені як </span></span><code>text/plain</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Їх необхідно об'являти як MIME тип </span></span><code>text/css</code><span class="tlid-translation translation"><span title="">.</span></span></p> -</div> - -<h3 id="textcss"><code>text/css</code></h3> - -<p><span class="tlid-translation translation"><span title="">Файли CSS, які використовуються для оформлення веб-сторінки, <strong>повинні </strong>бути надіслані з типом </span></span><code>text/css</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Якщо сервер не розпізнає суфікс </span></span> <code>.css </code><span class="tlid-translation translation"><span title="">для файлів CSS, він може надіслати їх за допомогою MIME типів </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> або </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span> У ньому випадку<span title=""> більшість браузерів їх не розпізнають як CSS і будуть ігнорувати.</span></span></p> - -<h3 id="texthtml"><code>text/html</code></h3> - -<p><span class="tlid-translation translation"><span title="">Весь HTML-вміст повинен подаватися з цим типом.</span> <span title="">На сьогодні, альтернативні типи MIME для XHTML (типу </span></span><code>application/xhtml+xml</code><span class="tlid-translation translation"><span title="">) в основному безкорисні.</span></span></p> - -<div class="note"> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Примітка. Використовуйте типи </span></span><code>application/xml</code><span class="tlid-translation translation"><span title=""> або </span></span><code>application/xhtml+xml</code><span class="tlid-translation translation"><span title="">, якщо ви хочете, щоб правила XML-парсингу були жорсткі, до розділів </span></span><code><a href="/en-US/docs/Web/API/CDATASection"><![CDATA[…]]></a></code> <span class="tlid-translation translation"><span title=""> та елементів не з HTML/SVG/MathML.</span></span></p> -</div> - -<h3 id="textjavascript"><code>text/javascript</code></h3> - -<p><span class="tlid-translation translation"><span title="">У розділі <a href="https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages">Мов сценаріїв</a> у стандарті HTML зазначено:</span></span></p> - -<blockquote> -<p><span class="tlid-translation translation"><span title="">Сервери повинні використовувати </span></span><code>text/javascript</code><span class="tlid-translation translation"><span title=""> для ресурсів JavaScript.</span> <span title="">Сервери не повинні використовувати інші типи JavaScript MIME для ресурсів JavaScript і не повинні використовувати типи MIME, які не належать до JavaScript.</span></span></p> -</blockquote> - -<p><span class="tlid-translation translation"><span title="">Інші типи MIME JavaScript, які не слід використовувати, визначені в </span></span><a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a><span class="tlid-translation translation"><span title=""> наступним чином:</span></span></p> - -<ul> - <li><code>application/javascript</code> {{deprecated_inline}}</li> - <li><code>application/ecmascript</code> {{deprecated_inline}}</li> - <li><code>application/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>application/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/ecmascript</code> {{deprecated_inline}}</li> - <li><code>text/javascript1.0</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/javascript1.1</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/javascript1.2</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/javascript1.3</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/javascript1.4</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/javascript1.5</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/jscript</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/livescript</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> - <li><code>text/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> -</ul> - -<h3 id="Типи_для_зображень">Типи для зображень</h3> - -<p><span class="tlid-translation translation"><span title="">Лише декілька типів зображень </span></span><span class="tlid-translation translation"><span title="">є загальновизнаними, щоб бути безпечними для використання на веб-сторінці:</span></span></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Тип MIME</th> - <th scope="col">Тип зображення</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>image/gif</code></td> - <td>зображення GIF (стискання без втрат, замінений на PNG)</td> - </tr> - <tr> - <td><code>image/jpeg</code></td> - <td>зображення JPEG</td> - </tr> - <tr> - <td><code>image/png</code></td> - <td>зображення PNG</td> - </tr> - <tr> - <td><code>image/svg+xml</code></td> - <td>зображення SVG (векторні зображення)</td> - </tr> - <tr> - <td><code>image/x-icon</code>, <code>image/vnd.microsoft.icon</code><sup><a href="#Image_types-Footnote_1" title="Despite image/vnd.microsoft.icon being registered with IANA it is largely unsupported, and image/x-icon is being used instead.">[1]</a></sup></td> - <td>піктограми Windows</td> - </tr> - </tbody> -</table> - -<p><span class="tlid-translation translation"><span title="">Існує дискусія щодо додавання до цього списку WebP (</span></span><code>image/webp</code><span class="tlid-translation translation"><span title="">), але виробники веб-браузерів обережно приймають його.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У веб-документах можна знайти інші види зображень.</span> <span title="">Наприклад, багато веб-браузерів підтримують зображення ICO для </span></span>favicons, використовуючи <span class="tlid-translation translation"><span title="">MIME-тип </span></span><code>image/x-icon</code><span class="tlid-translation translation"><span title=""> .</span></span></p> - -<dl> - <dt id="Image_types-Footnote_1"><span class="tlid-translation translation"><span title="">Примітка</span></span> 1</dt> - <dd><span class="tlid-translation translation"><span title="">Незважаючи на те, що </span></span><code>image/vnd.microsoft.icon</code><span class="tlid-translation translation"><span title=""> <a href="https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon">зареєстровано в IANA</a>, воно в основному не підтримується, а використовується </span></span><code>image/x-icon</code><span class="tlid-translation translation"><span title=""> .</span></span></dd> -</dl> - -<h3 id="Аудіо-_та_відео-типи">Аудіо- та відео-типи</h3> - -<p><span class="tlid-translation translation"><span title="">Як і зображення, HTML не означує підтримувані типи для елементів </span></span>{{HTMLElement("audio")}}<span class="tlid-translation translation"><span title=""> і</span></span> {{HTMLElement("video")}} <span class="tlid-translation translation"><span title="">, тому лише деякі з них можуть використовуватися в Веб.</span> <span title=""><a href="/uk/docs/Web/HTML/Supported_media_formats">Формати мультимедіа, що підтримуються аудіо- та відео-елементами HTML</a> вказують як на застосовані кодеки, так і на контейнери, які можна для них використовувати.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Тип аудіовізуальних файлів MIME в основному вказує на формати контейнерів.</span> <span title="">Найбільш поширеними для Веб є:</span></span></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">тип MIME</th> - <th scope="col">тип Аудіо або відео</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>audio/wave</code><br> - <code>audio/wav</code><br> - <code>audio/x-wav</code><br> - <code>audio/x-pn-wav</code></td> - <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера WAVE.</span> <span title="">Часто підтримується аудіокодек PCM (кодек WAVE "1"), інші кодеки мають обмежену підтримку (якщо є).</span></span></td> - </tr> - <tr> - <td><code>audio/webm</code></td> - <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера WebM.</span> <span title="">Найпоширенішими аудіокодеками є Vorbis і Opus.</span></span></td> - </tr> - <tr> - <td><code>video/webm</code></td> - <td><span class="tlid-translation translation"><span title="">Відеофайл, можливо з аудіо, у форматі контейнера WebM.</span> <span title="">VP8 і VP9 є найпоширенішими відеокодеками;</span> <span title="">Vorbis і Opus найбільш поширені аудіокодеки.</span></span></td> - </tr> - <tr> - <td><code>audio/ogg</code></td> - <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера OGG.</span> <span title="">Vorbis є найпоширенішим аудіокодеком, який використовується в такому контейнері.</span></span></td> - </tr> - <tr> - <td><code>video/ogg</code></td> - <td><span class="tlid-translation translation"><span title="">Відеофайл, можливо, зі звуком, у форматі контейнера OGG.</span> </span>Зазвичай використовується в ньому <span class="tlid-translation translation"><span title="">відеокодек </span></span>Theora, <span class="tlid-translation translation"><span title="">аудіокодек -</span></span> <span class="tlid-translation translation"> <span title="">Vorbis.</span></span></td> - </tr> - <tr> - <td><code>application/ogg</code></td> - <td><span class="tlid-translation translation"><span title="">Аудіо- або відеофайл у форматі контейнера OGG.</span> </span>Зазвичай використовується в ньому <span class="tlid-translation translation"><span title="">відеокодек </span></span>Theora, <span class="tlid-translation translation"><span title="">аудіокодек -</span></span> <span class="tlid-translation translation"> <span title="">Vorbis.</span></span></td> - </tr> - </tbody> -</table> - -<h3 id="multipartform-data"><code>multipart/form-data</code></h3> - -<p><span class="tlid-translation translation"><span title="">Тип </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title=""> можна використовувати при відправленні з браузера на сервер значень завершеної <a href="/uk/docs/Web/Guide/HTML/Forms">форми HTML</a> .</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Як багаточастинний формат документа, він складається з різних частин, розділених межею (рядок, що починається з подвійного тире </span></span><code>--</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Кожна частина є окремою сутністю з власними заголовками HTTP, </span></span> {{HTTPHeader("Content-Disposition")}}<span class="tlid-translation translation"><span title=""> і </span></span>{{HTTPHeader("Content-Type")}}<span class="tlid-translation translation"><span title=""> для полів завантаження файлів.</span></span></p> - -<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=aBoundaryString -(інші заголовки асоційовані з багаточастинним документом як цілим) - ---aBoundaryString -Content-Disposition: form-data; name="myFile"; filename="img.jpg" -Content-Type: image/jpeg - -(data) ---aBoundaryString -Content-Disposition: form-data; name="myField" - -(data) ---aBoundaryString -(more subparts) ---aBoundaryString-- - -</pre> - -<p>Наступна <code><form></code>:</p> - -<pre class="brush: html"><form action="http://localhost:8000/" method="post" enctype="multipart/form-data"> - <label>Name: <input name="myTextField" value="Test"></label> - <label><input type="checkbox" name="myCheckBox"> Check</label> - <label>Upload file: <input type="file" name="myFile" value="test.txt"></label> - <button>Send the file</button> -</form></pre> - -<p><span class="tlid-translation translation"><span title="">надішле таке повідомлення:</span></span></p> - -<pre>POST / HTTP/1.1 -Host: localhost:8000 -User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-US,en;q=0.5 -Accept-Encoding: gzip, deflate -Connection: keep-alive -Upgrade-Insecure-Requests: 1 -Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 -Content-Length: 465 - ------------------------------8721656041911415653955004498 -Content-Disposition: form-data; name="myTextField" - -Test ------------------------------8721656041911415653955004498 -Content-Disposition: form-data; name="myCheckBox" - -on ------------------------------8721656041911415653955004498 -Content-Disposition: form-data; name="myFile"; filename="test.txt" -Content-Type: text/plain - -Simple file. ------------------------------8721656041911415653955004498-- - -</pre> - -<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3> - -<p><span class="tlid-translation translation"><span title="">MIME тип </span></span><code>multipart/byteranges</code><span class="tlid-translation translation"><span title=""> використовується для відправлення часткових відповідей браузеру.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Коли відправлено код статусу </span></span>{{HTTPStatus("206")}}<code> Partial Content</code><span class="tlid-translation translation"><span title="">, цей тип MIME вказує, що документ складається з декількох частин, по одному для кожного із запитаних діапазонів.</span> <span title="">Як і інші типи багаточастинних файлів, </span></span>{{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title=""> використовує межу (</span></span><code>boundary</code><span class="tlid-translation translation"><span title="">) для розділення фрагментів.</span> <span title="">Кожен фрагмент має заголовок </span></span> {{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title=""> з його фактичним типом і діапазону </span></span>{{HTTPHeader("Content-Range")}}<span class="tlid-translation translation"><span title="">, який він представляє.</span></span></p> - -<pre><code>HTTP/1.1 206 Partial Content -Accept-Ranges: bytes -Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5 -Content-Length: 385 - ---3d6b6a416f9b5 -Content-Type: text/html -Content-Range: bytes 100-200/1270 - -eta http-equiv="Content-type" content="text/html; charset=utf-8" /> - <meta name="vieport" content ---3d6b6a416f9b5 -Content-Type: text/html -Content-Range: bytes 300-400/1270 - --color: #f0f0f2; - margin: 0; - padding: 0; - font-family: "Open Sans", "Helvetica ---3d6b6a416f9b5--</code></pre> - -<h2 id="Важливість_встановлення_правильного_типу_MIME"><span class="tlid-translation translation"><span title="">Важливість встановлення правильного типу MIME</span></span></h2> - -<p><span class="tlid-translation translation"><span title="">Більшість веб-серверів надсилають нерозпізнані ресурси як MIME-тип </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span> <span title="">З міркувань безпеки більшість браузерів не дозволяють встановлювати типові користувацькі дії для таких ресурсів, змушуючи користувача зберігати його на диску для подальшого використання.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Деякі поширені неправильні конфігурації сервера:</span></span></p> - -<ul> - <li> - <p><span class="tlid-translation translation"><span title="">RAR-стислі файли.</span> <span title="">У цьому випадку ідеальним буде справжній тип вихідних файлів;</span> <span title="">це часто неможливо, оскільки файли .RAR можуть містити кілька ресурсів різних типів.</span> <span title="">У цьому випадку налаштуйте сервер для надсилання </span></span><code>application/x-rar-compressed</code><span class="tlid-translation translation"><span title="">.</span></span></p> - </li> - <li> - <p><span class="tlid-translation translation"><span title="">Аудіо та відео.</span> <span title="">У елементах </span></span>{{HTMLElement("video")}} <span class="tlid-translation translation"><span title="">або </span></span>{{HTMLElement("audio")}}<span class="tlid-translation translation"><span title=""> будуть відтворюватися лише ресурси з правильним типом MIME.</span> <span title="">Обов'язково <a href="/uk/docs/Web/HTML/Supported_media_formats">використовуйте правильний тип для аудіо та відео</a>.</span></span></p> - </li> - <li> - <p><span class="tlid-translation translation"><span title="">Власні типи файлів.</span> <span title="">Уникайте використання </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">, оскільки більшість браузерів не дозволяють визначити для цього загального типу MIME типову для них поведінку (наприклад, "Відкрити в Word") .</span> <span title="">Конкретний тип, як </span></span><code>application/vnd.mspowerpoint</code><span class="tlid-translation translation"><span title="">, дозволяє користувачам автоматично відкривати такі файли у своєму виборі.</span></span></p> - </li> -</ul> - -<h2 id="Авто-розпізнавання_MIME_(sniffing)">Авто-розпізнавання <span class="tlid-translation translation"><span title="">MIME </span></span><em>(sniffing)</em></h2> - -<p><span class="tlid-translation translation"><span title="">За відсутності типу MIME, або в деяких випадках, коли браузери вважають, що вони неправильні, вони можуть виконувати авто-розпізнавання </span></span><em>(MIME sniffing)</em><span class="tlid-translation translation"><span title=""> - вгадуючи правильний тип MIME, переглядаючи байти ресурсу.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Кожен браузер виконує авто-розпізнавання MIME по-різному і за різних обставин.</span> <span title="">(Наприклад, Safari розглядатиме розширення файлу в URL-адресі, якщо відправлений тип MIME непридатний.) Існують проблеми безпеки, оскільки деякі типи MIME являють собою виконуваний вміст.</span> <span title="">Сервери можуть запобігти авто-розпізнаванню MIME, відправивши заголовок </span></span>{{HTTPHeader("X-Content-Type-Options")}}<span class="tlid-translation translation"><span title="">.</span></span></p> - -<h2 id="Інші_способи_передачі_типу_документів"><span class="tlid-translation translation"><span title="">Інші способи передачі типу документів</span></span></h2> - -<p><span class="tlid-translation translation"><span title="">Типи MIME - не єдиний спосіб передати інформацію про тип документа:</span></span></p> - -<ul> - <li><span class="tlid-translation translation"><span title="">Іноді використовуються суфікси назви файлів, особливо в Microsoft Windows.</span> <span title="">Не всі операційні системи вважають ці суфікси значущими (наприклад, Linux і MacOS), і немає гарантії, що вони правильні.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Магічні числа.</span> <span title="">Синтаксис різних форматів дозволяє вивести тип файлу, розглядаючи їхню байтову структуру.</span> <span title="">Наприклад, GIF-файли починаються з шістнадцяткового значення </span></span><code>47 49 46 38 39</code><span class="tlid-translation translation"><span title=""> (</span></span><code>GIF89</code><span class="tlid-translation translation"><span title="">), а PNG-файли з </span></span><code>89 50 4E 47</code><span class="tlid-translation translation"><span title=""> (</span></span><code>.PNG</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Не всі типи файлів мають магічні числа, тому це також не на 100%.</span></span></li> -</ul> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Properly configuring server MIME types</a></li> - <li><a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></li> - <li> - <p><a href="https://www.iana.org/assignments/media-types/application/json">https://www.iana.org/assignments/media-types/application/json</a></p> - </li> -</ul> - -<div>{{HTTPSidebar}}</div> diff --git a/files/uk/web/http/cors/index.html b/files/uk/web/http/cors/index.html deleted file mode 100644 index 80cb620485..0000000000 --- a/files/uk/web/http/cors/index.html +++ /dev/null @@ -1,550 +0,0 @@ ---- -title: Cross-Origin Resource Sharing (CORS) -slug: Web/HTTP/CORS -tags: - - AJAX - - CORS - - HTTP - - Безпека -translation_of: Web/HTTP/CORS ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary">Cross-Origin Resource Sharing ({{Glossary("CORS")}}, перехресний обмін ресурсами) — це механізм, що за допомогою {{Glossary("HTTP")}}-заголовків дає {{Glossary("Browser", "переглядачеві")}} дозвіл завантажувати ресурси з певного джерела на запит web-застосунка, отриманого з відмінного джерела.</span> Web-застосунок виконує <strong>перехресний HTTP-запит</strong> коли потребує ресурсів з джерела (домен, протокол чи порт), відмінного від його власного.</p> - -<p>Приклад перехресного запиту: JavaScript-код web-застосунка, розміщеного на <code>http://domain-a.com</code>, намагається за допомогою {{domxref("XMLHttpRequest", "AJAX")}}-запиту отримати <code>http://api.domain-b.com/data.json</code>.</p> - -<p>З міркувань безпеки, web-переглядачі припиняють всі перехресні HTTP-запити, здійснені кодом скриптів. Наприклад, <code>XMLHttpRequest</code> і <a href="/uk/docs/Web/API/Fetch_API">Fetch API</a> дотримуються <a href="/uk/docs/Web/Security/Same-origin_policy">правила одного джерела</a>. Це означає, що web-застосунок, отриманий з певного джерела, не може виконувати запити до HTTP-ресурсів з відмінного джерела (хіба якщо відповідь, що з нього надходить, міститиме належні CORS-заголовки).</p> - -<p><img alt="Localized CORS request principle" src="https://mdn.mozillademos.org/files/16490/CORS_principle.png" style="height: 643px; width: 925px;"></p> - -<p>Механізм CORS уможливлює безпечні перехресні запити та передання даних між web-переглядачами та web-серверами. Сучасні web-переглядачі запроваджують підтримку CORS до API, як-от <code>XMLHttpRequest</code> або <a href="/uk/docs/Web/API/Fetch_API">Fetch API</a>, щоб зробити виконання перехресних HTTP-запитів якнайбезпечнішим.</p> - -<h2 id="Для_кого_ця_стаття">Для кого ця стаття?</h2> - -<p>Для кожного, поза сумнівом.</p> - -<p>А саме для web-адміністраторів, а також розробників серверних та клієнських застосунків. Сучасні переглядачі запроваджують підтримку CORS з клієнтського боку (зокрема, обробку заголовків та обмеження неправомірних запитів), проте цей новий стандарт потребує, щоб сервер обробляв нові запити й додавав належні заголовки до відповідей. Докладніше про це оповідає стаття «<a href="/uk/docs/Web/HTTP/Server-Side_Access_Control">перехресні запити з погляду сервера</a>» для серверних розробників (зі зразками PHP-коду).</p> - -<h2 id="До_яких_запитів_стосується_CORS">До яких запитів стосується CORS?</h2> - -<p><a href="https://fetch.spec.whatwg.org/#http-cors-protocol">Цей стандарт</a> покликаний дозволити міжсайтові HTTP-запити для:</p> - -<ul> - <li>Міжсайтового користування {{domxref("XMLHttpRequest")}} та <a href="/uk/docs/Web/API/Fetch_API">Fetch</a> API, як зазначено вище;</li> - <li>Web-шрифтів (використання шрифтів з інших джерел за допомогою правила <code>@font-face</code> в CSS), тож <a href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">сервер, який розміщує TrueType-шрифти, надає обмежений доступ</a> на їх завантаження лише певній множині сайтів;</li> - <li><a href="/uk/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Текстури WebGL</a>;</li> - <li>Зображення чи кадри відео, намальовані на холсті за допомогою {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li> -</ul> - -<p>Ця стаття описує перехресний обмін ресурсами взагалі та окремі HTTP-заголовки, що для цього необхідні.</p> - -<h2 id="Функціональний_огляд">Функціональний огляд</h2> - -<p>Стандарт перехресного обміну ресурсами працює за допомогою додавання нових HTTP заголовків, що дозволять серверу описати набір витоків, які мають дозвіл на читання інформації використовуючи веб-браузер. На додаток, для HTTP методів запиту, що можуть спричини побічний еффект на серверні дані (в особливості, для HTTP методів, окрім {{HTTPMethod("GET")}}, або для {{HTTPMethod("POST")}} використання із певним <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), специфікація передбачає, що браузерам "попередньо переглядають" запити, вимагають підтримуваних методів з сервера за допомогою HTTP {{HTTPMethod("OPTIONS")}} методів запиту, а потім після "схвалення" з сервера, надсилає фактичний запит методом фактичного запиту HTTP. Сервер також може повідомляти клієнтів чи "credentials" (включаючи Куки і HTTP Аутентифікаційні дані) повинні бути відправлені із запитом.</p> - -<p>У наступних розділах обговорюються сценарії, а також надається розбивка використовуваних заголовків HTTP.</p> - -<h2 id="Приклади_сценаріїв_контролю_доступу">Приклади сценаріїв контролю доступу</h2> - -<p>Тут ми представляємо три сценарії, які ілюструють, як працює перехресне походження ресурсів. У всіх цих прикладах використовується об’єкт {{domxref ("XMLHttpRequest")}}, який можна використовувати для виклику між сайтів у будь-якому підтримуваному браузері.</p> - -<p>Фрагменти JavaScript, що містяться в цих розділах (і запущені екземпляри серверного коду, який правильно обробляє ці запити на різних веб-сайтах), можна знайти "в дії" за адресою http://arunranga.com/examples/access-control/, і буде робота в браузерах, які підтримують крос-сайт {{domxref ("XMLHttpRequest")}}.</p> - -<p>Обговорення міжпохідного обміну ресурсами з точки зору сервера (включаючи фрагменти коду PHP) можна знайти в статті управління доступом на стороні сервера (CORS).</p> - -<h3 id="Прості_запити">Прості запити</h3> - -<p>Some requests don’t trigger a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>—a so-called “simple request”—is one that meets all the following conditions:</p> - -<ul> - <li>The only allowed methods are: - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> - <li>{{HTTPHeader("Last-Event-ID")}}</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li> - <li>No {{domxref("ReadableStream")}} object is used in the request.</li> -</ul> - -<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div> - -<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> - -<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p> - -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/public-data/'; - -function callOtherDomain() { - if(invocation) { - invocation.open('GET', url, true); - invocation.onreadystatechange = handler; - invocation.send(); - } -} -</pre> - -<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> - -<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p> - -<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/access-control/simpleXSInvocation.html -Origin: http://foo.example - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2.0.61 -Access-Control-Allow-Origin: * -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[XML Data] -</pre> - -<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p> - -<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p> - -<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> - -<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p> - -<h3 id="Preflighted_requests">Preflighted requests</h3> - -<p>Unlike <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p> - -<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p> - -<ul> - <li><strong>If</strong> the request uses any of the following methods: - - <ul> - <li>{{HTTPMethod("PUT")}}</li> - <li>{{HTTPMethod("DELETE")}}</li> - <li>{{HTTPMethod("CONNECT")}}</li> - <li>{{HTTPMethod("OPTIONS")}}</li> - <li>{{HTTPMethod("TRACE")}}</li> - <li>{{HTTPMethod("PATCH")}}</li> - </ul> - </li> - <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> - <li>{{HTTPHeader("Last-Event-ID")}}</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value other than the following: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li> - <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li> -</ul> - -<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> - -<p>The following is an example of a request that will be preflighted.</p> - -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/post-here/'; -var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; - -function callOtherDomain(){ - if(invocation) - { - invocation.open('POST', url, true); - invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); - invocation.setRequestHeader('Content-Type', 'application/xml'); - invocation.onreadystatechange = handler; - invocation.send(body); - } -} - -...... -</pre> - -<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14289/prelight.png"></p> - -<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p> - -<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p> - -<pre class="brush: none notranslate">OPTIONS /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Origin: http://foo.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 0 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain -</pre> - -<p>Once the preflight request is complete, the real request is sent:</p> - -<pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: http://foo.example/examples/preflightInvocation.html -Content-Length: 55 -Origin: http://foo.example -Pragma: no-cache -Cache-Control: no-cache - -<?xml version="1.0"?><person><name>Arun</name></person> - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain - -[Some GZIP'd payload] -</pre> - -<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p> - -<pre class="brush: none notranslate">Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type -</pre> - -<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p> - -<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</pre> - -<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p> - -<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p> - -<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a<a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age"> maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p> - -<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4> - -<p>Most browsers currently don’t support following redirects for preflighted requests. If a redirect occurs for a preflighted request, most current browsers will report an error message such as the following.</p> - -<blockquote> -<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> -</blockquote> - -<blockquote> -<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> -</blockquote> - -<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsquently changed to no longer require it</a>. However, most browsers have not yet implemented the change and still exhibit the behavior that was originally required.</p> - -<p>So until browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p> - -<ul> - <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li> - <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li> -</ul> - -<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p> - -<ol> - <li>Make a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">simple request</a> (using <a href="/en-US/docs/Web/API/Response/url">Response.url</a> for the Fetch API, or <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>) to determine what URL the real preflighted request would end up at.</li> - <li>Make another request (the “real” request) using the URL you obtained from <a href="/en-US/docs/Web/API/Response/url">Response.url</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a> in the first step.</li> -</ol> - -<p>However, if the request is one that triggers a preflight due to the presence of the `Authorization` header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p> - -<h3 id="Requests_with_credentials">Requests with credentials</h3> - -<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.</p> - -<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p> - -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/credentialed-content/'; - -function callOtherDomain(){ - if(invocation) { - invocation.open('GET', url, true); - invocation.withCredentials = true; - invocation.onreadystatechange = handler; - invocation.send(); - } -}</pre> - -<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> - -<p>Here is a sample exchange between client and server:</p> - -<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/credential.html -Origin: http://foo.example -Cookie: pageAccess=2 - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 -X-Powered-By: PHP/5.2.6 -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain - - -[text/plain payload] -</pre> - -<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p> - -<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4> - -<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p> - -<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p> - -<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p> - -<h4 id="Third-party_cookies">Third-party cookies</h4> - -<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p> - -<h2 id="The_HTTP_response_headers">The HTTP response headers</h2> - -<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p> - -<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> - -<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: <origin> | * -</pre> - -<p>The <code>origin</code> parameter specifies a URI that may access the resource. The browser must enforce this. For requests <strong>without</strong> credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.</p> - -<p>For example, to allow http://mozilla.org to access the resource, you can specify:</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre> - -<p>If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.</p> - -<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p> - -<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header -</pre> - -<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> - -<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> - -<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> - -<pre class="brush: none notranslate">Access-Control-Max-Age: <delta-seconds> -</pre> - -<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> - -<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true -</pre> - -<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> - -<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Methods: <method>[, <method>]* -</pre> - -<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> - -<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Headers: <field-name>[, <field-name>]* -</pre> - -<h2 id="The_HTTP_request_headers">The HTTP request headers</h2> - -<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p> - -<h3 id="Origin">Origin</h3> - -<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> - -<pre class="brush: none notranslate">Origin: <origin> -</pre> - -<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> - -<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div> - -<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p> - -<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> - -<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> - -<pre class="brush: none notranslate">Access-Control-Request-Method: <method> -</pre> - -<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> - -<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> - -<pre class="brush: none notranslate">Access-Control-Request-Headers: <field-name>[, <field-name>]* -</pre> - -<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> - -<h3 id="Compatibility_notes">Compatibility notes</h3> - -<ul> - <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li> - <li>While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage</code>.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> - <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> - <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> - <li><a class="external" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li> - <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>: - <ul> - <li>How to avoid the CORS preflight</li> - <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li> - <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li> - </ul> - </li> -</ul> diff --git a/files/uk/web/http/headers/accept-encoding/index.html b/files/uk/web/http/headers/accept-encoding/index.html deleted file mode 100644 index a370ed187e..0000000000 --- a/files/uk/web/http/headers/accept-encoding/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Accept-Encoding -slug: Web/HTTP/Headers/Accept-Encoding -translation_of: Web/HTTP/Headers/Accept-Encoding -original_slug: Web/HTTP/Заголовки/Accept-Encoding ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP-<span class="tlid-translation translation"><span title="">заголовок запиту </span></span><strong><code>Accept-Encoding </code></strong><span class="tlid-translation translation"><span title="">вказує, яке кодування контенту може зрозуміти клієнт. Зазвичай це вказує на алгоритм стиснення.</span> <span title="">Використовуючи <a href="/uk/docs/Web/HTTP/Content_negotiation">узгодження вмісту</a>, сервер вибирає одну з пропозицій, використовує її та інформує клієнта про вибір за допомогою заголовка відповіді </span></span>{{HTTPHeader("Content-Encoding")}}<span class="tlid-translation translation"><span title="">.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Навіть якщо клієнт і сервер підтримують однакові алгоритми стиснення, сервер може не стискати тіло відповіді, якщо значення </span></span><code>identity</code> <span class="tlid-translation translation"><span title="">також є прийнятним.</span> <span title="">Два загальні випадки призводять до цього:</span></span></p> - -<ul> - <li><span class="tlid-translation translation"><span title="">Дані, які потрібно надіслати, вже стиснуті, а друге стиснення не призведе до передачі менших даних.</span> <span title="">Це може бути у випадку з деякими форматами зображень;</span></span></li> - <li><span class="tlid-translation translation"><span title="">Сервер перевантажений і не може дозволити собі накладні витрати, спричинені вимогою стиснення.</span> <span title="">Як правило, Microsoft рекомендує не стискати вміст, якщо сервер використовує більше 80% своєї обчислювальної потужності.</span></span></li> -</ul> - -<p><span class="tlid-translation translation"><span title="">До тих пір, поки значення </span></span><code>identity</code> <span class="tlid-translation translation"><span title="">(тобто без кодування) явно не заборонено </span></span><code>identity;q=0</code><span class="tlid-translation translation"><span title=""> або </span></span><code>*;q=0</code><span class="tlid-translation translation"><span title=""> без іншого явно заданого значення для ідентифікації, сервер ніколи не повинен відправляти назад помилку </span></span>{{HTTPStatus("406")}} <code>Not Acceptable</code> <span class="tlid-translation translation"><span title="">.</span></span></p> - -<div class="note"><strong>Примітка:</strong> - -<ul> - <li> - <p><span class="tlid-translation translation"><span title="">Реєстр IANA підтримує <a href="http://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">повний перелік офіційних кодувань вмісту</a>.</span></span> </p> - </li> - <li><span class="tlid-translation translation"><span title="">Іноді використовуються два інші кодування вмісту, </span></span><code>bzip </code><span class="tlid-translation translation"><span title="">і </span></span><code>bzip2</code><span class="tlid-translation translation"><span title="">, хоч вони не є стандартними.</span> Ці кодування <span title=""> реалізують алгоритм, використовуваний одноіменними програмами UNIX.</span> <span title="">Зверніть увагу, що перша була припинена через проблеми ліцензування патенту.</span></span></li> -</ul> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовку</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>так</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Accept-Encoding: gzip -Accept-Encoding: compress -Accept-Encoding: deflate -Accept-Encoding: br -Accept-Encoding: identity -Accept-Encoding: * - -// Multiple algorithms, weighted with the {{Glossary("Quality Values", "quality value")}} syntax: -Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><code>gzip</code></dt> - <dd>Формат стиснення, що використовує кодування <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77), з 32-bit CRC.</dd> - <dt><code>compress</code></dt> - <dd>Формат стиснення, що використовує алгоритм <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) .</dd> - <dt><code>deflate</code></dt> - <dd>Формат стиснення, що використовує структуру <a class="external external-icon" href="http://en.wikipedia.org/wiki/Zlib">zlib</a>, з алгоритмом стиснення <a class="external external-icon" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a>.</dd> - <dt><code>br</code></dt> - <dd>Формат стиснення, що використовує алгоритм <a class="external external-icon" href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> .</dd> - <dt><code>identity</code></dt> - <dd><span class="tlid-translation translation"><span title="">Позначає функцію ідентичності (тобто не стискати, не змінювати).</span> <span title="">Це значення завжди вважається прийнятним, навіть воно не вказане.</span></span></dd> - <dt><code>*</code></dt> - <dd><span class="tlid-translation translation"><span title="">Відповідає будь-якому кодуванню вмісту, який ще не вказано в заголовку.</span> <span title="">Це значення є типовим, якщо заголовку немає.</span> <span title="">Це не значить, що будь-який алгоритм підтримується,</span> <span title="">просто не висловлюється жодних переваг.</span></span></dd> - <dt><code>;q=</code> (qvalues weighting)</dt> - <dd><span class="tlid-translation translation"><span title="">Будь-яке значення розміщується в порядку переваги, що виражається з використанням відносної <a href="/uk/docs/Glossary/Quality_values">величини якості</a>, званої <em>вагою</em>.</span></span></dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>Accept-Encoding: gzip - -Accept-Encoding: gzip, compress, br - -Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "Accept-Encoding", "5.3.4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Accept-Encoding")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>HTTP <a href="/uk/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> - <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Encoding")}}</li> - <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li> -</ul> diff --git a/files/uk/web/http/headers/accept-language/index.html b/files/uk/web/http/headers/accept-language/index.html deleted file mode 100644 index 0f7aa943e1..0000000000 --- a/files/uk/web/http/headers/accept-language/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Accept-Language -slug: Web/HTTP/Headers/Accept-Language -translation_of: Web/HTTP/Headers/Accept-Language -original_slug: Web/HTTP/Заголовки/Accept-Language ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Заголовок HTTP-запиту </span></span><strong><code>Accept-Language</code></strong> <span class="tlid-translation translation"><span title=""> повідомляє про те, які мови клієнт може зрозуміти, і який варіант локалі є кращим.</span> <span title="">(За мовами ми маємо на увазі природні мови, такі як англійська, а не мови програмування.) Потім, використовуючи <a href="/uk/docs/Web/HTTP/Content_negotiation">узгодження вмісту</a>, сервер вибирає одну з пропозицій, використовує її та інформує клієнта про свій вибір за допомогою заголовку відповіді </span></span>{{HTTPHeader("Content-Language")}}<span class="tlid-translation translation"><span title="">.</span> <span title="">Браузери встановлюють адекватні значення для цього заголовка відповідно до їхньої мови інтерфейсу користувача, і, навіть, якщо користувач може змінити її, це трапляється рідко (і не схвалюється, оскільки це призводить до </span></span>fingerprinting<span class="tlid-translation translation"><span title="">).</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Цей заголовок є рекомендацією, яку слід використовувати, коли сервер не має можливості визначити мову іншим способом, наприклад, через конкретну URL-адресу, яка керується явним рішенням користувача.</span> <span title="">Рекомендується, щоб сервер ніколи не перевизначав явне рішення.</span> <span title="">Зміст </span></span><code>Accept-Language</code><span class="tlid-translation translation"><span title=""> часто не керується користувачем (як, наприклад, під час подорожі та використання Інтернет-кафе в іншій країні);</span> <span title="">користувач може також захотіти відвідати сторінку іншою мовою, ніж локалі свого інтерфейсу користувача.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Якщо сервер не може обслуговувати будь-яку відповідну мову, він теоретично може відправити код помилки </span></span>{{HTTPStatus("406")}} (Not Acceptable)<span class="tlid-translation translation"><span title="">.</span> <span title="">Але, з кращого досвіду це робиться рідко, замість цього кращим способом є ігнорування у цьому випадку заголовка </span></span><code>Accept-Language</code><span class="tlid-translation translation"><span title=""> .</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовку</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>ні</td> - </tr> - <tr> - <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Accept-Language: <language> -Accept-Language: * - -// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax: -Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><code><language></code></dt> - <dd> - <p><span class="tlid-translation translation"><span title="">Тег мови (який іноді називають "ідентифікатором локалі").</span> <span title="">Він складається з тегу мови (2-3 літери), що представляє мову, за яким після символу </span></span> <code>'-'</code><span class="tlid-translation translation"><span title=""> можуть слідувати також додаткові літери підтегу.</span> <span title="">Найпоширенішою додатковою інформацією є варіант країни або регіону (наприклад, </span></span><code>'en-US'</code><span class="tlid-translation translation"><span title=""> або </span></span><code>'fr-CA'</code><span class="tlid-translation translation"><span title="">) або тип алфавіту (наприклад, </span></span><code>'sr-Latn'</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Інші варіанти, такі як тип орфографії (</span></span><code>'de-DE-1996'</code><span class="tlid-translation translation"><span title="">), зазвичай не використовуються в контексті цього заголовку.</span></span></p> - </dd> - <dt><code>*</code></dt> - <dd>Будь-яка мова; <code>'*'</code> використовується як шаблон заміни.</dd> - <dt><code>;q=</code> (q-factor weighting)</dt> - <dd><span class="tlid-translation translation"><span title="">Будь-яке значення, розміщене в порядку уподобань, виражене за допомогою відносного </span></span>{{glossary("Quality values", "quality value")}} <span class="tlid-translation translation"><span title="">що називається <em>вагою</em>.</span></span></dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>Accept-Language: de - -Accept-Language: de-CH - -Accept-Language: en-US,en;q=0.5 -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td> - </tr> - <tr> - <td><a href="https://tools.ietf.org/html/bcp47">BCP 47</a></td> - <td>Tags for the Identification of Language</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Accept-Language")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> - <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Language")}}</li> - <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li> -</ul> diff --git a/files/uk/web/http/headers/connection/index.html b/files/uk/web/http/headers/connection/index.html deleted file mode 100644 index 9a103cd159..0000000000 --- a/files/uk/web/http/headers/connection/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Connection -slug: Web/HTTP/Headers/Connection -translation_of: Web/HTTP/Headers/Connection -original_slug: Web/HTTP/Заголовки/Connection ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Загальний заголовок </span></span><strong><code>Connection</code></strong> <span class="tlid-translation translation"><span title="">означує, чи залишається мережне з'єднання відкритим після завершення поточної транзакції.</span> <span title="">Якщо надіслане значення зберігається, зв'язок постійний і не закривається, що дозволяє виконувати наступні запити на один і той же сервер.</span></span></p> - -<div class="note"><span class="tlid-translation translation"><span title="">Поля заголовка, специфічні для підключення, такі як </span></span><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2"><code>Connection</code></a><span class="tlid-translation translation"><span title="">, <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">не повинні використовуватися у версіях HTTP починаючи з </a></span></span><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">HTTP/2</a><span class="tlid-translation translation"><span title="">.</span></span></div> - -<p>За виключенням стандартних заголовків hop-by-hop ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} і {{HTTPHeader("Proxy-Authenticate")}}), будь які інші hop-by-hop заголовки повинні бути перераховані в заголовку <code>Connection</code>, <span class="tlid-translation translation"><span title="">так щоб перший проксі зміг знати, що він повинен обробити їх і не пересилати далі.</span> <span title="">Також можуть бути перелічені стандартні заголовки </span></span>hop-by-hop<span class="tlid-translation translation"><span title=""> (часто це відбувається у випадку {{HTTPHeader ("Keep-Alive")}}, але це не є обов'язковим).</span></span> y).</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("General header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Connection: keep-alive -Connection: close -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><code>close</code></dt> - <dd><span class="tlid-translation translation"><span title="">Вказує, що клієнт або сервер хотіли б закрити з'єднання.</span> <span title="">Це типово, для запитів HTTP/1.0.</span></span></dd> - <dt>будь які розділені комою заголовки HTTP [як правило тільки <code>keep-alive</code>]</dt> - <dd><span class="tlid-translation translation"><span title="">Вказує, що клієнт хоче, щоб з'єднання було відкрито.</span> <span title="">Постійне підключення - це типово для запитів HTTP/1.1.</span> <span title="">Список заголовків - це ім'я заголовка, який буде видалено першим непрозорим проксі-сервером або кешем між ними: ці заголовки визначають зв'язок між передавачем і першим об'єктом, а не кінцевим вузлом.</span></span></dd> -</dl> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Connection")}}</p> diff --git a/files/uk/web/http/headers/content-length/index.html b/files/uk/web/http/headers/content-length/index.html deleted file mode 100644 index 335c8c1525..0000000000 --- a/files/uk/web/http/headers/content-length/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Content-Length -slug: Web/HTTP/Headers/Content-Length -translation_of: Web/HTTP/Headers/Content-Length -original_slug: Web/HTTP/Заголовки/Content-Length ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Заголовок об'єкта </span></span><strong><code>Content-Length</code></strong><span class="tlid-translation translation"><span title=""> вказує розмір в байтах корисного навантаження, надісланих одержувачу.</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Entity header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Content-Length: <length> -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><length></dt> - <dd><span class="tlid-translation translation"><span title="">Довжина в кількостях октетів, вказана в десятковій формі.</span></span></dd> -</dl> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Content-Length")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{HTTPHeader("Transfer-Encoding")}}</li> -</ul> diff --git a/files/uk/web/http/headers/content-type/index.html b/files/uk/web/http/headers/content-type/index.html deleted file mode 100644 index a01da3a2d6..0000000000 --- a/files/uk/web/http/headers/content-type/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Content-Type -slug: Web/HTTP/Headers/Content-Type -translation_of: Web/HTTP/Headers/Content-Type -original_slug: Web/HTTP/Заголовки/Content-Type ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Заголовок об'єкта </span></span><strong><code>Content-Type </code></strong><span class="tlid-translation translation"><span title="">використовується для позначення ресурсу </span></span>{{Glossary("MIME type","media type")}}<span class="tlid-translation translation"><span title=""> .</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У відповідях у заголовку </span></span><code>Content-Type</code><span class="tlid-translation translation"><span title=""> сервер повідомляє клієнту, який саме тип вмісту повертається.</span> <span title="">Браузери в деяких випадках виконують стеження за MIME і не обов'язково слідкують за значенням цього заголовка;</span> <span title="">Щоб запобігти такій поведінці, заголовок </span></span>{{HTTPHeader("X-Content-Type-Options")}}<span class="tlid-translation translation"><span title=""> може бути встановлений рівним </span></span><code>nosniff</code><span class="tlid-translation translation"><span title="">.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У запитах (наприклад, </span></span>{{HTTPMethod("POST")}} <span class="tlid-translation translation"><span title="">або </span></span> {{HTTPMethod("PUT")}})<span class="tlid-translation translation"><span title=""> клієнт повідомляє серверу, який тип даних відправляється.</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Entity header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>no</td> - </tr> - <tr> - <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Content-Type: text/html; charset=utf-8 -Content-Type: multipart/form-data; boundary=something -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><code>media-type</code></dt> - <dd><span class="tlid-translation translation"><span title=""><a href="/uk/docs/Web/HTTP/Basics_of_HTTP/MIME_types">Тип MIME</a> ресурсу або даних.</span></span></dd> - <dt>charset</dt> - <dd><span class="tlid-translation translation"><span title="">Стандарт кодування символів.</span></span></dd> - <dt>boundary</dt> - <dd><span class="tlid-translation translation"><span title="">Для багаточастинних (</span></span>multipart<span class="tlid-translation translation"><span title="">) об'єктів необхідна директива </span></span><code>boundary</code> <span class="tlid-translation translation"><span title="">, яка складається з 1 до 70 символів з набору символів, відомих як дуже надійні через шлюзи електронної пошти, і не закінчуючись пробілами.</span> <span title="">Директива використовується для інкапсуляції меж кількох частин повідомлення.</span> <span title="">Часто кордон заголовка доповнюється двома тире в тілі, і кінцева межа також має два тире, які додаються.</span></span></dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Content-Type_в_формах_HTML"><code>Content-Type</code> в формах HTML</h3> - -<p><span class="tlid-translation translation"><span title="">У запиті </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title="">, що відправляється в результаті роботи HTML-форми, </span></span><code>Content-Type</code><span class="tlid-translation translation"><span title=""> запиту задається атрибутом </span></span><code>enctype</code> <span class="tlid-translation translation"><span title="">елемента </span></span>{{HTMLElement("form")}}<span class="tlid-translation translation"><span title="">.</span></span></p> - -<pre class="brush: html"><form action="/" method="post" enctype="multipart/form-data"> - <input type="text" name="description" value="some text"> - <input type="file" name="myFile"> - <button type="submit">Submit</button> -</form> -</pre> - -<p><span class="tlid-translation translation"><span title="">Запит виглядає приблизно так (тут менш цікавідля прикладу заголовки не вказані):</span></span></p> - -<pre>POST /foo HTTP/1.1 -Content-Length: 68137 -Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 - ------------------------------974767299852498929531610575 -Content-Disposition: form-data; name="description" - -якийсь текст ------------------------------974767299852498929531610575 -Content-Disposition: form-data; name="myFile"; filename="foo.txt" -Content-Type: text/plain - -(вміст вивантажуваного файлу foo.txt) ------------------------------974767299852498929531610575-- -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td> - </tr> - <tr> - <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Content-Type")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{HTTPHeader("Accept")}} and {{HTTPHeader("Accept-Charset")}}</li> - <li>{{HTTPHeader("Content-Disposition")}}</li> - <li>{{HTTPStatus("206")}} Partial Content</li> - <li>{{HTTPHeader("X-Content-Type-Options")}}</li> -</ul> diff --git a/files/uk/web/http/headers/etag/index.html b/files/uk/web/http/headers/etag/index.html deleted file mode 100644 index fcbd7a8ed6..0000000000 --- a/files/uk/web/http/headers/etag/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: ETag -slug: Web/HTTP/Headers/ETag -translation_of: Web/HTTP/Headers/ETag -original_slug: Web/HTTP/Заголовки/ETag ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>ETag</code></strong> HTTP заголовок відповіді. Є ідентифікатором для поточної версії ресурсу. Він надає можливість створювати кеш більш ефективно, і запобігає перенапругам у системі, створюючи доступність простору інтернету. Щойно надійде відповідь що данні не змінювались, то нема потреби знову це завантажувати. </p> - -<p>Якщо дані з цього URL змінились, ETag код має бути змінений. Отже Etags створюються для ідентифікації і відстежування ресурсів інтернету. Порівняння кожного з них надає можливість відстежувати які дані змінились і мають бути перезавантажені.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовку</th> - <td>{{Glossary("Заголовок відповіді")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Прихований заголовок")}}</th> - <td>Ні</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">ETag: W/"<etag_value>" -ETag: "<etag_value>" -</pre> - -<h2 id="Вказники">Вказники</h2> - -<dl> - <dt><code>W/</code> {{optional_inline}}</dt> - <dd><code>'W/'</code> (чутливо до регістру) вказує виконати <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation">детальну перевірку</a>. Детальна перевірка допустима, але рідше використовуєтся для порівняння. Строга валідація ідеально підходіть для порівняння, але має дуже складний алгорітм і шкодить ефективності. Для підвищення ефективності використовуються <code>Etag</code> значення двох копій одне й те самого ресурсу. Порівняння коротких фраз кодів, ніж порівнювати кожен байт файлу, є ефективна ідея.</dd> - <dt>"<etag_value>"</dt> - <dd>Унікальний хеш код ресурсу. Це звичайні набір символів ASCII у подвійних лапках (приклад <code>"675af34563dc-tr34"</code>). В звичайному випадку це хеш дати останньої модіфікаії, або це может бути будь який код. Наприклад, MDN викорустовує хеш шістнадцятирічних символів контенту вікіпедії.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4" -ETag: W/"0815"</pre> - -<h3 id="Виникаючі_повітряні_колізії">Виникаючі повітряні колізії</h3> - -<p>За допомогою <code>ETag</code> і з заголовком {{HTTPHeader("If-Match")}}, можливо натрапити на повітряні колізії.</p> - -<p>Наприклад, коли редагується MDN, поточний вікі контент захешований у <code>Etag</code> і доданий до відповіді:</p> - -<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre> - -<p>{{HTTPMethod("POST")}} запит у вікі сторінках (додання даних/зміни) матиме {{HTTPHeader("If-Match")}} заголовок із <code>ETag</code> кодом, для перевірки актуальності даних.</p> - -<pre>If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre> - -<p>Якщо хеш не сходиться, це означає що данні змінилися, документ був змінений нещодавно і {{HTTPStatus("412")}}<code> Precondition Failed</code> буде повернено.</p> - -<h3 id="Кеш_статичних_ресурсів">Кеш статичних ресурсів</h3> - -<p>Інший випадок використання <code>ETag</code> заголовку це кешування ресурсів які не змінювались. Якщо користувач робить запит якоїсь URL знову (вже встановлений <code>ETag</code>), і якщо контент є застарілим, він може буть непрацюючим. Користувач виконує запит з встановленим <code>ETag</code> із заголовком {{HTTPHeader("If-None-Match")}}:</p> - -<pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre> - -<p>Сервер порівнює клієнтську версію коду <code>ETag</code> (відправлений з <code>If-None-Match</code>) з версією <code>ETag</code> для поточної версії ресурсу і якщо обидва сходяться то змін не було, сервер поверне відповідь {{HTTPStatus("304")}}<code> Not Modified</code>, без тіла відповіді, то поточна версія є актуальна(<em>fresh</em>).</p> - -<h2 id="Стандарти">Стандарти</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7232", "ETag", "2.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_с_оглядачами">Сумісність с оглядачами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.ETag")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPHeader("If-Match")}}</li> - <li>{{HTTPHeader("If-None-Match")}}</li> - <li>{{HTTPStatus("304")}}<code> Not Modified</code></li> - <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li> - <li> - <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p> - </li> -</ul> diff --git a/files/uk/web/http/headers/if-match/index.html b/files/uk/web/http/headers/if-match/index.html deleted file mode 100644 index 03fba37b45..0000000000 --- a/files/uk/web/http/headers/if-match/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: If-Match -slug: Web/HTTP/Headers/If-Match -translation_of: Web/HTTP/Headers/If-Match -original_slug: Web/HTTP/Заголовки/If-Match ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>If-Match</code></strong> HTTP заголовок запиту робить запит умовним. Для {{HTTPMethod("GET")}} і {{HTTPMethod("HEAD")}} методів, сервер поверне запитаний ресурс тільки якщо співпадає обидва <code>ETags</code>. Для методу {{HTTPMethod("PUT")}} чи інших небезпечних методів, виконається тільки завантаження файлу.</p> - -<p>Порівняння коду {{HTTPHeader("ETag")}} може використовувати <em>суворий алгоритм порівняння</em>, мається на увазі повна перевірка байт в байт. Ця функція використовує <code>W/</code> префікс на початку <code>ETag</code>.</p> - -<p>Існує два загальних випадки використання: </p> - -<ul> - <li>Для {{HTTPMethod("GET")}} і {{HTTPMethod("HEAD")}} методів, використовується з додатковим {{HTTPHeader("Range")}} заголовком, це гарантує що усі ranges запити надходять з того самого джерела. В іншому випадку буде повернуто статус {{HTTPStatus("416")}}<code> </code>(Range Not Satisfiable).</li> - <li>Для інших випадків, і частково для {{HTTPMethod("PUT")}}, <code>If-Match</code> можуть бути використані <a href="https://www.w3.org/1999/04/Editing/#3.1">порівняння наявності файлу</a>. В такому випадку можно дізнатись чи якісь зміни ресурсу, які користувач намагається завантажити, не змінено з того часу як вони були розташовані. Якщо запит не буде виконано, повернеться статус {{HTTPStatus("412")}} (Precondition Failed).</li> -</ul> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовку</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>Ні</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">If-Match: <etag_value> -If-Match: <etag_value>, <etag_value>, … -</pre> - -<h2 id="Вказники">Вказники</h2> - -<dl> - <dt><etag_value></dt> - <dd>Значення тегів унікально представляють запитанні ресурси. Це строки ASCII символів розташовані поміж подвійних лапок (наприклад <code>"675af34563dc-tr34"</code>) і можуть мати префікс <code>W/</code> якщо потрібно використання суворого алгоритму порівняння.</dd> - <dt><code>*</code></dt> - <dd>Зірочка для представлення будь якого ресурсу. </dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>If-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" - -If-Match: W/"67ab43", "54ed21", "7892dd" - -If-Match: * -</pre> - -<h2 id="Стандарт">Стандарт</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7232", "If-Match", "3.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.If-Match")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li>{{HTTPHeader("ETag")}}</li> - <li>{{HTTPHeader("If-Unmodified-Since")}}</li> - <li>{{HTTPHeader("If-Modified-Since")}}</li> - <li>{{HTTPHeader("If-None-Match")}}</li> - <li>{{HTTPStatus("416")}}<code> Range Not Satisfiable</code></li> - <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li> -</ul> diff --git a/files/uk/web/http/headers/index.html b/files/uk/web/http/headers/index.html deleted file mode 100644 index e1bdee7d50..0000000000 --- a/files/uk/web/http/headers/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: HTTP заголовки -slug: Web/HTTP/Headers -translation_of: Web/HTTP/Headers -original_slug: Web/HTTP/Заголовки ---- -<div>{{HTTPSidebar}}</div> - -<p>Заголовки HTTP дозволяють клієнту та серверу передавати додаткову інформацію у запиті чи відповіді. Заголовок запиту складається з нечутливих до регістру імен, за якими йде двокрапка '<code>:</code>', а потім їх значення (без розбиття на рядки). Пробіли перед значеннями ігноруються.</p> - -<p>Користувальницькі значення заголовків можуть бути додані за допомогою префіксу 'X-' . Однак ця домовленість більше не підтримується з червня 2012, через незручність, яку вона викликала, коли нестандартизовані поля стали стандартними у <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; інші значення перераховані у <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, оригінальний зміст якого був виначений у <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA також підтримує <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">реєстр запропонованих нових значень заголовків повідомлення HTTP</a>.</p> - -<p>Заголовки можуть бути сгруповані, відповідно до їхнього змісту:</p> - -<ul> - <li>{{Glossary("General header")}}: Заголовки, що застосовуються як для запиту, так і відповіді, але не маєть ніякого відношення до даних, що передаються у тілі.</li> - <li>{{Glossary("Request header")}}: Заголовки, що містять більше інформації про ресурс, що запитується, чи самого клієнта.</li> - <li>{{Glossary("Response header")}}: Заголовки з додатковою інформацією про відповідь, наприклад, її розташування або сам сервер (ім'я, версія тощо).</li> - <li>{{Glossary("Entity header")}}: Заголовки, що містять больше інформації про тіло сутністі, наприклад, довжину її контенту або MIME-тип.</li> -</ul> - -<p>Заголовки також можуть бути згруповані за тим, як проксі обробляє їх:</p> - -<dl> - <dt><a id="e2e" name="e2e"></a>End-to-end (точка-точка або наскрізні) заголовки</dt> - <dd>Ці заголовки повинні бути передані кінцевому отримувачу повідомлення; серверу, що оброблює запит, або клієнту, який отримує відповідь. Проміжний проксі має повторно передати наскрізні заголовки незмінніми, а кеш повинен зберегти їх.</dd> - <dt><a id="hbh" name="hbh"></a>Hop-by-hop (крок-за-кроком або проміжні) заголовки</dt> - <dd>Ці заголовки мають значення лише для одного з'єднання транспортного рівня та не повинні бути повторно передані через проксі або кеш. Це такі заголовки, як: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} та {{ httpheader("Upgrade") }}. Зазначте, що лише проміжні заголовки можуть бути встановлені за допомогою загального заголовку {{ httpheader("Connection") }}.</dd> -</dl> - -<p>Наступний лист підсумовує заголовки HTTP по категорії їхнього використання. Список за абеткою дивись у навігаційному листі зліва.</p> - -<h2 id="Аутентифікація">Аутентифікація</h2> - -<dl> - <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> - <dd>Визначають методи аутентифікації, що мають бути використані для отримання доступу до ресурсу.</dd> - <dt>{{HTTPHeader("Authorization")}}</dt> - <dd>Містить облікові данні для аутентифікації агента користувача сервером.</dd> - <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> - <dd>Визначає метод аутентифікації, який має бути використаний для отримання доступу до ресурсу через проксі сервер.</dd> - <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> - <dd>Містить облікові данні для аутентифікації агента користувача проксі сервером.</dd> -</dl> - -<h2 id="Кешування">Кешування</h2> - -<dl> - <dt>{{HTTPHeader("Age")}}</dt> - <dd>Час у секундах, який об'єкт має бути у кеші проксі.</dd> - <dt>{{HTTPHeader("Cache-Control")}}</dt> - <dd>Означує директиви механізму кешування як у запиті, так і у відповіді.</dd> - <dt>{{HTTPHeader("Expires")}}</dt> - <dd>Дата/час, після якої відповідь вважається застарілою.</dd> - <dt>{{HTTPHeader("Pragma")}}</dt> - <dd>Залежний від реалізації заголовок, який може викликати декілька ефектів де завгодно у ланцюгу запит-відповідь. Використвується для зворотної сумісності з кешем HTTP/1.0, де заголовок <code>Cache-Control</code> ще не присутній.</dd> - <dt>{{HTTPHeader("Warning")}}</dt> - <dd>Загальне попереджувальне поле, яке містить інформацію про імовірні проблеми.</dd> -</dl> - -<h2 id="Клієнтські_підказки">Клієнтські підказки</h2> - -<dl> - <dt> - <p>HTTP Client hints are a work in progress. Actual documentation can be found on the <a href="https://httpwg.org/http-extensions/client-hints.html">website of the HTTP working group</a>.</p> - </dt> - <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> - <dd>Servers can advertise support for Client Hints using the Accept-CH header field or an equivalent HTML meta element with http-equiv attribute (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd> - <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> - <dd>The “Content-DPR” response header field is a number that indicates the ratio between physical pixels over CSS px of the selected image response.</dd> - <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> - <dd>The “DPR” request header field is a number that indicates the client’s current Device Pixel Ratio (DPR), which is the ratio of physical pixels over CSS px (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) of the layout viewport (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) on the device.</dd> - <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt> - <dd>The <a class="internalDFN" href="https://wicg.github.io/netinfo/#dom-networkinformation-savedata"><code>SaveData</code></a> [<cite><a class="bibref" href="https://wicg.github.io/netinfo/#bib-client-hints">CLIENT-HINTS</a></cite>] request header field consists of one or more tokens that indicate user agent's preference for reduced data usage</dd> - <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.3.p.1"> - <p>The “Viewport-Width” request header field is a number that indicates the layout viewport width in CSS px. The provided CSS px value is a number rounded to the smallest following integer (i.e. ceiling value).</p> - </div> - - <div id="rfc.section.3.3.p.2"> - <p>If Viewport-Width occurs in a message more than once, the last value overrides all previous occurrences.</p> - </div> - </dd> - <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.2.p.1"> - <p>The “Width” request header field is a number that indicates the desired resource width in physical px (i.e. intrinsic size of an image). The provided physical px value is a number rounded to the smallest following integer (i.e. ceiling value).</p> - </div> - - <div id="rfc.section.3.2.p.2"> - <p>If the desired resource width is not known at the time of the request or the resource does not have a display width, the Width header field can be omitted. If Width occurs in a message more than once, the last value overrides all previous occurrences</p> - </div> - </dd> - <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> - <dd>Servers can ask the client to remember the set of Client Hints that the server supports for a specified period of time, to enable delivery of Client Hints on subsequent requests to the server’s origin (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd> - <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt> - <dd>Indicates that the request has been conveyed in early data.</dd> -</dl> - -<dl> - <dt> - <h2 id="Умови">Умови</h2> - </dt> - <dt>{{HTTPHeader("Last-Modified")}}</dt> - <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("ETag")}}</dt> - <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("If-Match")}}</dt> - <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> - <dt>{{HTTPHeader("If-None-Match")}}</dt> - <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> - <dt>{{HTTPHeader("If-Modified-Since")}}</dt> - <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> - <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> - <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> -</dl> - -<h2 id="Управління_з'єднанням">Управління з'єднанням</h2> - -<dl> - <dt>{{HTTPHeader("Connection")}}</dt> - <dd>Вказує<span class="tlid-translation translation"><span title=""> чи повинно мережне з'єднання залишатися відкритим після завершення поточної транзакції.</span></span></dd> - <dt>{{HTTPHeader("Keep-Alive")}}</dt> - <dd>Controls how long a persistent connection should stay open.</dd> -</dl> - -<h2 id="Узгодження_змісту">Узгодження змісту</h2> - -<dl> - <dt>{{HTTPHeader("Accept")}}</dt> - <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> - <dt>{{HTTPHeader("Accept-Charset")}}</dt> - <dd>Informs the server about which character set the client is able to understand.</dd> - <dt>{{HTTPHeader("Accept-Encoding")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Інформує сервер про алгоритм кодування, зазвичай алгоритм стиснення, який може бути використаний на ресурсі, відправленому назад.</span></span></dd> - <dt>{{HTTPHeader("Accept-Language")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Інформує сервер про мову, на яку сервер очікує відправлення.</span> <span title="">Це рекомендація і не обов'язково знаходиться під повним контролем користувача: сервер завжди повинен звертати увагу, щоб не перевизначити явний вибір користувача (наприклад, вибір мови у випадаючому списку).</span></span></dd> -</dl> - -<dl> -</dl> - -<h2 id="Контроль">Контроль</h2> - -<dl> - <dt>{{HTTPHeader("Expect")}}</dt> - <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> - <dt>{{HTTPHeader("Max-Forwards")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Cookies">Cookies</h2> - -<dl> - <dt>{{HTTPHeader("Cookie")}}</dt> - <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> - <dt>{{HTTPHeader("Set-Cookie")}}</dt> - <dd>Send cookies from the server to the user agent.</dd> - <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> - <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> - <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> - <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> - <dt> - <h2 id="CORS">CORS</h2> - </dt> - <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> - <dd>Indicates whether the response can be shared.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> - <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> - <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> - <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> - <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> - <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> - <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> - <dd>Indicates how long the results of a preflight request can be cached.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> - <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> - <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Origin")}}</dt> - <dd>Indicates where a fetch originates from.</dd> -</dl> - -<h2 id="Не_відстежується">Не відстежується</h2> - -<dl> - <dt>{{HTTPHeader("DNT")}}</dt> - <dd>Used for expressing the user's tracking preference.</dd> - <dt>{{HTTPHeader("Tk")}}</dt> - <dd>Indicates the tracking status that applied to the corresponding request.</dd> -</dl> - -<h2 id="Завантаження">Завантаження</h2> - -<dl> - <dt>{{HTTPHeader("Content-Disposition")}}</dt> - <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> -</dl> - -<h2 id="Інформація_про_тіло_повідомлення">Інформація про тіло повідомлення</h2> - -<dl> - <dt>{{HTTPHeader("Content-Length")}}</dt> - <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> - <dt>{{HTTPHeader("Content-Type")}}</dt> - <dd>Indicates the media type of the resource.</dd> - <dt>{{HTTPHeader("Content-Encoding")}}</dt> - <dd>Used to specify the compression algorithm.</dd> - <dt>{{HTTPHeader("Content-Language")}}</dt> - <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> - <dt>{{HTTPHeader("Content-Location")}}</dt> - <dd>Indicates an alternate location for the returned data.</dd> - <dt> - <h2 id="Проксі">Проксі</h2> - </dt> -</dl> - -<dl> - <dt>{{HTTPHeader("Forwarded")}}</dt> - <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> - <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> - <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> - <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> - <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("Via")}}</dt> - <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> -</dl> - -<h2 id="Перенаправлення">Перенаправлення</h2> - -<dl> - <dt>{{HTTPHeader("Location")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Позначає URL-адресу сторінки для перенаправлення</span></span>.</dd> -</dl> - -<h2 id="Контекст_запиту">Контекст запиту</h2> - -<dl> - <dt>{{HTTPHeader("From")}}</dt> - <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> - <dt>{{HTTPHeader("Host")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Вказує ім'я домену сервера (для віртуального хостингу) і (при необхідності) номер TCP-порту, на якому прослуховується сервер.</span></span></dd> - <dt>{{HTTPHeader("Referer")}}</dt> - <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> - <dt>{{HTTPHeader("Referrer-Policy")}}</dt> - <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> - <dt>{{HTTPHeader("User-Agent")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Містить характеристичний рядок, що дозволяє одноранговим мережним протоколам ідентифікувати тип програми, операційну систему, постачальника програмного забезпечення або версію програмного забезпечення користувача, що запитує програмне забезпечення.</span> <span title="">Див. Також посилання на рядок користувача агента Firefox. </span></span><a href="/uk/docs/Web/HTTP/Headers/User-Agent/Firefox">посилання на рядок користувача Firefox</a>.</dd> -</dl> - -<h2 id="Контекст_відповіді">Контекст відповіді</h2> - -<dl> - <dt>{{HTTPHeader("Allow")}}</dt> - <dd>Lists the set of HTTP request methods support by a resource.</dd> - <dt>{{HTTPHeader("Server")}}</dt> - <dd>Contains information about the software used by the origin server to handle the request.</dd> -</dl> - -<h2 id="Діапазон_запитів">Діапазон запитів</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Ranges")}}</dt> - <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> - <dt>{{HTTPHeader("Range")}}</dt> - <dd>Indicates the part of a document that the server should return.</dd> - <dt>{{HTTPHeader("If-Range")}}</dt> - <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> - <dt>{{HTTPHeader("Content-Range")}}</dt> - <dd>Indicates where in a full body message a partial message belongs.</dd> -</dl> - -<h2 id="Безпека">Безпека</h2> - -<dl> - <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> - <dd>Controls resources the user agent is allowed to load for a given page.</dd> - <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> - <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> - <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> - <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> - <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> - <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> - <dd>Force communication using HTTPS instead of HTTP.</dd> - <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Надсилає на сервер сигнал, який вказує на бажання клієнта на зашифровану і аутентифіковану відповідь, і що він може успішно обробити директиву </span></span>{{CSP("upgrade-insecure-requests")}}<span class="tlid-translation translation"><span title=""> </span></span></dd> -</dl> - -<dl> - <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> - <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> - <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> - <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> - <dd>Enables cross-site scripting filtering.</dd> -</dl> - -<h2 id="Події_надіслані_сервером">Події надіслані сервером</h2> - -<dl> - <dt>{{HTTPHeader("Ping-From")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Ping-To")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Last-Event-ID")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Кодування_передачі">Кодування передачі</h2> - -<dl> - <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> - <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> - <dt>{{HTTPHeader("TE")}}</dt> - <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> - <dt>{{HTTPHeader("Trailer")}}</dt> - <dd>Allows the sender to include additional fields at the end of chunked message.</dd> -</dl> - -<h2 id="WebSockets">WebSockets</h2> - -<dl> - <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Інше">Інше</h2> - -<dl> - <dt>{{HTTPHeader("Date")}}</dt> - <dd>Contains the date and time at which the message was originated.</dd> - <dt>{{HTTPHeader("Large-Allocation")}}</dt> - <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> - <dt>{{HTTPHeader("Link")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Retry-After")}}</dt> - <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> - <dt>{{HTTPHeader("SourceMap")}}</dt> - <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> - <dt>{{HTTPHeader("Upgrade")}}</dt> - <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> - <dt>{{HTTPHeader("Vary")}}</dt> - <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> - <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> - <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> - <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Requested-With")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Внесок">Внесок</h2> - -<p>Ви можете допомогти, <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">написав нові записи</a> або покращити існуючі.</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> - <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> -</ul> diff --git a/files/uk/web/http/headers/location/index.html b/files/uk/web/http/headers/location/index.html deleted file mode 100644 index c982e45bc2..0000000000 --- a/files/uk/web/http/headers/location/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Location -slug: Web/HTTP/Headers/Location -translation_of: Web/HTTP/Headers/Location -original_slug: Web/HTTP/Заголовки/Location ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Заголовок відповіді </span></span><strong><code>Location</code></strong> <span class="tlid-translation translation"><span title="">вказує URL-адресу для перенаправлення сторінки.</span> <span title="">Він надає лише значення, коли подається відповідь зі статусом 3xx (перенаправлення) або 201 (створений).</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У випадках перенаправлення, метод HTTP, який використовується для внесення нового запиту на вибір сторінки, на яку позначається </span></span><code>Location</code><span class="tlid-translation translation"><span title="">, залежить від оригінального методу та виду перенаправлення:</span></span></p> - -<ul> - <li><span class="tlid-translation translation"><span title="">Якщо відповіді </span></span>{{HTTPStatus("303")}} (Див.також)<span class="tlid-translation translation"><span title=""> завжди призводять до використання методу </span></span>{{HTTPMethod("GET")}}<span class="tlid-translation translation"><span title="">, </span></span>{{HTTPStatus("307")}} <span class="tlid-translation translation"><span title="">(Тимчасове перенаправлення) та</span> </span>{{HTTPStatus("308")}} <span class="tlid-translation translation"><span title="">(Постійне перенаправлення) не змінює метод, використаний у вихідному запиті;</span></span></li> - <li><span class="tlid-translation translation"><span title="">{{HTTPStatus ("301")}} (Постійне перенаправлення) і {{HTTPStatus ("302")}} (Знайдено) не змінюють метод більшу частину часу, хоча старі користувачі-агенти можуть це робити (так що ви, в основному,</span> <span title="">не відомо).</span></span></li> -</ul> - -<p><span class="tlid-translation translation"><span title="">Усі відповіді з одним із цих кодів стану надсилають заголовок </span></span><code>Location</code> <span class="tlid-translation translation"><span title="">.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">У випадках створення ресурсу, сервер вказує URL-адресу новоствореного ресурсу.</span></span></p> - -<p><code>Location</code> <span class="tlid-translation translation"><span title="">та {{HTTPHeader ("Content-Location")}} є різними: </span></span><code>Location</code> <span class="tlid-translation translation"><span title="">вказує на ціль перенаправлення (або URL новоствореного ресурсу), тоді як {{HTTPHeader ("Content-Location")}} вказує на</span> <span title="">пряму URL-адресу, яка використовується для доступу до ресурсу, коли відбувається узгодження вмісту, без необхідності подальшого узгодження вмісту.</span> </span><code>Location</code> <span class="tlid-translation translation"><span title="">є заголовком, пов'язаним з відповіддю, тоді як {{HTTPHeader ("Content-Location")}} асоціюється з повернутим об'єктом.</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Response header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Location: <url> -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><url></dt> - <dd><span class="tlid-translation translation"><span title="">Відносна (до URL-адреси запиту) або абсолютна URL-адреса.</span></span></dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>Location: /index.html</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "Location", "7.1.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.Location")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPHeader("Content-Location")}}</li> - <li>Status of responses including a <code>Location</code> header: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.</li> -</ul> diff --git a/files/uk/web/http/headers/referer/index.html b/files/uk/web/http/headers/referer/index.html deleted file mode 100644 index b51eb309e2..0000000000 --- a/files/uk/web/http/headers/referer/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Referer -slug: Web/HTTP/Headers/Referer -translation_of: Web/HTTP/Headers/Referer -original_slug: Web/HTTP/Заголовки/Referer ---- -<div>{{HTTPSidebar}}</div> - -<p><span id="result_box" lang="uk"><span>Заголовок запиту </span></span> <code><strong>Referer</strong></code> <span lang="uk"><span> містить адресу попередньої веб-сторінки, з якої було отримано посилання на поточну запитувану сторінку.</span> <span>Заголовок </span></span> <code>Referer</code> <span lang="uk"><span> дозволяє серверам визначати, звідки люди відвідують їх, і можуть використовувати ці дані для аналітики, ведення журналів або оптимізованого кешування, наприклад.</span></span></p> - -<p>Зауважте, що написання referer є помилкою слову "referrer". Дивіться {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}} більш детальніше.</p> - -<div class="warning"> -<p>Заголовок <code>Referer</code> потенційно має можливість для виявлення інформації про історію перегляду браузера користувача, що є конфіденційним.</p> -</div> - -<p>Заголовок <code>Referer</code> не надсилається браузерами, якщо:</p> - -<ul> - <li>referring-ресурс є локальним "файлом" або "даними" URI,</li> - <li> - <p>використовується незахищений HTTP-запит, а сторінка переходу отримувалась за допомогою захищеного протоколу (HTTPS).</p> - </li> -</ul> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовка</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>Так</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">Referer: <url> -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><url></dt> - <dd>Абсолютна або часткова адреса попередньої веб-сторінки, з якої було зроблено посилання на поточну запитувана сторінку. URL фрагменти (i.e. "#section") та інформація про користувача (i.e. "username:password" в "https://username:password@example.com/foo/bar/") не входять.</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "Referer", "5.5.2")}}</td> - <td>Протокол передачі гіпертексту (HTTP/1.1): Семантика та зміст</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_браузера">Сумісність браузера</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці генерується зі структурованих даних. Якщо ви хочете зробити свій внесок у свої дані, будь ласка відвідайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам pull-запит.</p> - -<p>{{Compat("http.headers.Referer")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> - <li>{{HTTPHeader("Referrer-Policy")}}</li> -</ul> diff --git a/files/uk/web/http/headers/user-agent/index.html b/files/uk/web/http/headers/user-agent/index.html deleted file mode 100644 index b0d7c5ce67..0000000000 --- a/files/uk/web/http/headers/user-agent/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: User-Agent -slug: Web/HTTP/Headers/User-Agent -translation_of: Web/HTTP/Headers/User-Agent -original_slug: Web/HTTP/Заголовки/User-Agent ---- -<div>{{HTTPSidebar}}</div> - -<p><span id="result_box" lang="uk"><span>Заголовок запиту User-Agent містить характерний рядок, який дозволяє однорідним мережевим протоколам ідентифікувати тип програми, операційну систему, постачальника програмного забезпечення або версію програмного забезпечення запитуючого користувацького агента програмного забезпечення.</span></span></p> - -<div class="note"> -<p><span class="short_text" id="result_box" lang="uk"><span>Будь ласка, прочитайте</span></span> <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Виявлення браузера за допомогою агента користувача</a> <span id="result_box" lang="uk"><span>і чому обслуговування різних веб-сторінок або служб для різних браузерів зазвичай погана ідея.</span></span></p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="uk"><span>Синтаксис</span></span></h2> - -<pre class="syntaxbox">User-Agent: <product> / <product-version> <comment> - -Common format for web browsers: - -User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions> -</pre> - -<h2 id="Директиви"><span class="short_text" id="result_box" lang="uk"><span>Директиви</span></span></h2> - -<dl> - <dt><product></dt> - <dd>A product identifier</dd> - <dt><product-version></dt> - <dd>A version number of the product.</dd> - <dt><comment></dt> - <dd>Zero or more comments containing sub product information, for example.</dd> -</dl> - -<h2 id="Firefox_UA_string">Firefox UA string</h2> - -<p>For more details on Firefox and Gecko based user agent strings, see the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>. The UA string of Firefox itself is broken down into four components:</p> - -<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p> - -<ul> - <li><em><strong>Mozilla/5.0</strong></em> is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.</li> - <li><strong><em>platform</em></strong> describes the native platform the browser is running on (e.g. Windows, Mac, Linux or Android), and whether or not it's a mobile phone. Firefox OS phones simply say "Mobile"; the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple "; "-separated tokens. See below for further details and examples.</li> - <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li> - <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on Gecko.</li> - <li>On Desktop, <em><strong>geckotrail</strong></em> is the fixed string "20100101"</li> - <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li> -</ul> - -<h3 id="Examples">Examples</h3> - -<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 -Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0 -</pre> - -<h2 id="Chrome_UA_string">Chrome UA string</h2> - -<p>The Chrome (or Chromium/blink-based engines) user agent string is similar to the Firefox format. For compatibility, it adds strings like "KHTML, like Gecko" and "Safari".</p> - -<h3 id="Examples_2">Examples</h3> - -<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre> - -<h2 id="Opera_UA_string">Opera UA string</h2> - -<p>The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/<version>".</p> - -<h3 id="Examples_3">Examples</h3> - -<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre> - -<h2 id="Safari_UA_string">Safari UA string</h2> - -<p>In this example, the user agent string is mobile safari version. It contains the word "Mobile".</p> - -<h3 id="Examples_4">Examples</h3> - -<pre>Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1</pre> - -<h2 id="Internet_Explorer_UA_string">Internet Explorer UA string</h2> - -<h3 id="Examples_5">Examples</h3> - -<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre> - -<h2 id="Crawler_and_bot_UA_strings">Crawler and bot UA strings</h2> - -<h3 id="Examples_6">Examples</h3> - -<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "User-Agent", "5.5.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.headers.User-Agent")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li> - <li><a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a></li> - <li> - <p><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></p> - </li> -</ul> diff --git a/files/uk/web/http/headers/x-forwarded-proto/index.html b/files/uk/web/http/headers/x-forwarded-proto/index.html deleted file mode 100644 index 45dd2ed485..0000000000 --- a/files/uk/web/http/headers/x-forwarded-proto/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: X-Forwarded-Proto -slug: Web/HTTP/Headers/X-Forwarded-Proto -translation_of: Web/HTTP/Headers/X-Forwarded-Proto -original_slug: Web/HTTP/Заголовки/X-Forwarded-Proto ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>X-Forwarded-Proto</code></strong> (XFP) - це HTTP заголовок, який де-факто використовується використув для ідентифікації протоколу (HTTP or HTTPS) який використовує клієнт, для підключення через проксі або до лоад балансера.</p> - -<p>Логи доступу до сервера включають протокол, що використовується між сервером та лоад балансером, але не включають той, за допомогою якого клієнт підключається до лоад балансера. Для того щоб передати інформацію про протокол з'єднання між клієнтом та лоад балансером на сервер, потрібно додати до запиту заголовок <code>X-Forwarded-Proto</code>.</p> - -<p>Стандартизованою версією цього заголовка являється - HTTP {{HTTPHeader("Forwarded")}} заголовок.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Тип заголовка</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">X-Forwarded-Proto: <protocol> -</pre> - -<h2 id="Директиви">Директиви</h2> - -<dl> - <dt><protocol></dt> - <dd>Протокол, що переадресовуюється (http або https).</dd> -</dl> - -<h2 id="Приклади">Приклади</h2> - -<pre>X-Forwarded-Proto: https</pre> - -<p>Інші не стандартні форми використання:</p> - -<pre># Microsoft -Front-End-Https: on - -X-Forwarded-Protocol: https -X-Forwarded-Ssl: on -X-Url-Scheme: https -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<p>Не являється частиною поточної специфікації. Стандартизована версія йього заголовку - {{HTTPHeader("Forwarded")}}.</p> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - - - -<p>{{Compat("http.headers.X-Forwarded-Proto")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{HTTPHeader("Forwarded")}}</li> - <li>{{HTTPHeader("X-Forwarded-For")}}</li> - <li>{{HTTPHeader("X-Forwarded-Host")}}</li> -</ul> diff --git a/files/uk/web/http/index.html b/files/uk/web/http/index.html deleted file mode 100644 index eb38dd6d92..0000000000 --- a/files/uk/web/http/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: HTTP -slug: Web/HTTP -tags: - - HTTP - - NeedsTranslation - - Reference - - TopicStub - - Web - - 'l10n:priority' -translation_of: Web/HTTP ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong><dfn>Протокол передачі гіпертексту (Hypertext Transfer Protocol - HTTP)</dfn></strong> це <a class="external" href="https://uk.wikipedia.org/wiki/Прикладний_рівень">прикладний</a> протокол для передачі гіпертекстових документів, таких як HTML.</span> Він був розроблений для зв'язку між веб-браузерами та веб серверами, проте може використовуватись і для інших цілей. HTTP дотримується класичної <a class="external" href="https://uk.wikipedia.org/wiki/Клієнт-серверна_архітектура">моделі клієнт-сервер</a>, коли клієнт відкриває з'єднання для здійснення запиту, а потім чекає поки отримає відповідь. HTTP - це <a href="https://en.wikipedia.org/wiki/Stateless_protocol">протокол без збереження стану</a>, що означає, що сервер не зберігає жодних даних (стану) між двома запитами. Хоча часто він базується на стеку протоколів TCP/IP, він може використовувати будь-який надійний протокол <a href="https://uk.wikipedia.org/wiki/Транспортний_рівень_моделі_OSI">транспортного рівня</a>, тобто протокол, який не втрачає "мовчки" повідомлення, як це робить UDP. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> - надійне оновлення UDP - є підходящою альтернативою.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Посібники">Посібники</h2> - -<p>Дізнайтеся, як використовувати HTTP завдяки підручникам та посібникам.</p> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> - <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> - <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> - <dd>How cookies work is defined by <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control (CORS)</a></dt> - <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> - <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd> - <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> - <dd>A collection of tips to help operational teams with creating secure web applications.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> - <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> - <dd>Shows and explains the flow of a usual HTTP session.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> - <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Довідники">Довідники</h2> - -<p>Перегляньте детальну довідкову документацію HTTP.</p> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> - <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> - <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> - <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> - <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> -</dl> - -<h2 id="Інструменти_і_ресурси">Інструменти і ресурси</h2> - -<p>Helpful tools and resources for understanding and debugging HTTP.</p> - -<dl> - <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> - <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> - <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> - <dd> - <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> - </dd> - <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> - <dd>Tools to check your cache-related headers</dd> - <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> - <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> -</dl> -</div> -</div> - -<div id="gtx-anchor" style="position: absolute; left: 495.844px; top: 1100px; width: 300.938px; height: 41px;"></div> - -<div class="jfk-bubble gtx-bubble" style="left: -311px; top: -10px; opacity: 1;"> -<div class="jfk-bubble-content-id" id="bubble-9"> -<div id="gtx-host" style="max-width: 400px;"></div> -</div> - -<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> - -<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 130.5px;"> -<div class="jfk-bubble-arrowimplbefore"></div> - -<div class="jfk-bubble-arrowimplafter"></div> -</div> -</div> diff --git a/files/uk/web/http/methods/get/index.html b/files/uk/web/http/methods/get/index.html deleted file mode 100644 index cb677dc943..0000000000 --- a/files/uk/web/http/methods/get/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: GET -slug: Web/HTTP/Methods/GET -translation_of: Web/HTTP/Methods/GET ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title=""><strong>HTTP-метод</strong> </span></span><strong><code>GET</code> </strong><span class="tlid-translation translation"><span title="">запитує представлення зазначеного ресурсу.</span> <span title="">Запити, які використовують </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, повинні лише отримувати дані.</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Запит має тіло</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Успішна відповідь має тіло</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">{{Glossary("Safe")}}</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">{{Glossary("Idempotent")}}</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">{{Glossary("Cacheable")}}</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">Дозволений в <a class="new" href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML/Forms" rel="nofollow">HTML-формах</a></th> - <td>Так</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">GET /index.html -</pre> - -<h2 id="Приклад">Приклад</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "GET", "4.3.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.methods.GET")}}</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>{{HTTPHeader("Range")}}</li> -</ul> diff --git a/files/uk/web/http/methods/index.html b/files/uk/web/http/methods/index.html deleted file mode 100644 index f70eecf38f..0000000000 --- a/files/uk/web/http/methods/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: HTTP-методи запиту -slug: Web/HTTP/Methods -tags: - - HTTP - - Methods - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/HTTP/Methods ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title="">Щоб вказати потрібну дію, яку необхідно зробити з ресурсом, в HTTP означено набір <strong>методів запиту</strong> (</span></span><strong>request methods</strong><span class="tlid-translation translation"><span title="">).</span> <span title="">Ці методи іноді називають HTTP-<em>дієсловами</em>, незважаючи на те, що вони можуть бути іменниками.</span> <span title="">Кожен з них реалізує іншу семантику, але вони мають деякі спільні риси, за якими їх поділяють на групи: наприклад</span> <span title="">методи запиту можуть бути</span></span> {{glossary("safe")}}<span class="tlid-translation translation"><span title="">, </span></span>{{glossary("idempotent")}}<span class="tlid-translation translation"><span title="">, або </span></span>{{glossary("cacheable")}}<span class="tlid-translation translation"><span title="">.</span></span></p> - -<dl> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/GET">GET</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>GET</code> <span class="tlid-translation translation"><span title="">запитує представлення вказаного ресурсу.</span> <span title="">Запити, які використовують </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, повинні лише отримувати дані.</span></span></dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>HEAD</code> <span class="tlid-translation translation"><span title="">запитує відповідь, ідентичну запиту </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, але без тіла.</span></span></dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/POST">POST</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>POST</code> <span class="tlid-translation translation"><span title=""> використовується для відправки об'єкта на вказаний ресурс, часто викликаючи зміну стану або побічних ефектів на сервері</span></span></dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> - <dd> - <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">замінює всі поточні представлення цільового ресурсу на корисне навантаження, що вказане в запиті.</span></span></p> - </dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>DELETE</code> <span class="tlid-translation translation"><span title="">видаляє вказаний ресурс.</span></span></dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> - <dd> - <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>CONNECT</code> <span class="tlid-translation translation"><span title="">встановлює тунель до сервера, ідентифікованого цільовим ресурсом.</span></span></p> - </dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>OPTIONS</code> <span class="tlid-translation translation"><span title="">використовується для опису варіантів зв'язку до цільового ресурсу.</span></span></dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> - <dd> - <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>TRACE</code> <span class="tlid-translation translation"><span title="">виконує тест зворотного зв'язку по шляху до цільового ресурсу.</span></span></p> - </dd> - <dt><code><a href="/uk/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> - <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>PATCH</code> <span class="tlid-translation translation"><span title="">використовується для застосування часткових модифікацій в ресурсі.</span></span></dd> -</dl> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{RFC("7231", "Request methods", "4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td> - </tr> - <tr> - <td>{{RFC("5789", "Patch method", "2")}}</td> - <td>PATCH Method for HTTP</td> - <td>Specifies PATCH.</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.methods")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li> -</ul> diff --git a/files/uk/web/http/methods/post/index.html b/files/uk/web/http/methods/post/index.html deleted file mode 100644 index 8ab0ccf386..0000000000 --- a/files/uk/web/http/methods/post/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: POST -slug: Web/HTTP/Methods/POST -translation_of: Web/HTTP/Methods/POST ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation"><span title=""><strong>HTTP</strong>-<strong>метод </strong></span></span><strong><code>POST</code> </strong><span class="tlid-translation translation"><span title="">надсилає дані на сервер.</span> <span title="">Тип тіла запиту позначається в заголовку </span></span>{{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title="">.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Різниця між </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">і </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title=""> полягає в тому, що </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">є ідемпотентним: кілька послідовних викликів має той же ефект що і один раз (не дасть побічних ефектів). В противагу цьому, послідовні ідентичні виклики </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">можуть мати додаткові ефекти,</span> <span title="">подібно проходження замовлення кілька разів.</span></span></p> - -<p><span class="tlid-translation translation"><span title="">Запит </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">зазвичай надсилається через <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-форму</a> і призводить до зміни на сервері.</span> <span title="">У цьому випадку тип вмісту вибирається шляхом введення відповідного рядка в атрибут </span></span>{{htmlattrxref("enctype", "form")}}<span class="tlid-translation translation"><span title=""> елемента </span></span>{{HTMLElement("form")}}, <span class="tlid-translation translation"><span title=""> або в атрибут</span></span> {{htmlattrxref("formenctype", "input")}} <span class="tlid-translation translation"><span title=""> елементів </span></span>{{HTMLElement("input") }} <span class="tlid-translation translation"><span title=""> або </span></span>{{HTMLElement("button")}}<span class="tlid-translation translation"><span title="">:</span></span></p> - -<ul> - <li><code>application/x-www-form-urlencoded</code><span class="tlid-translation translation"><span title="">: ключі та значення кодуються в кортежах ключ-значення, розділених символом </span></span><code>'&'</code><span class="tlid-translation translation"><span title=""> з </span></span><code>'='</code> <span class="tlid-translation translation"><span title=""> між ключем і значенням.</span> <span title="">Цей тип не підходить для використання з двійковими даними, тому що тут н</span><span title="">е дозволяються не алфавітно-цифрові символи як в ключах так і в значеннях </span></span>{{glossary("percent-encoding", "percent encoded")}}<span class="tlid-translation translation"><span title="">, використовуйте замість цього </span></span> <code>multipart/form-data</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> -</ul> - -<p><span class="tlid-translation translation"><span title="">Коли запит </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">відправляється за допомогою методу, відмінного від HTML-форми - як наприклад через </span></span>{{domxref("XMLHttpRequest")}}<span class="tlid-translation translation"><span title=""> - тіло може приймати будь-який тип.</span> <span title="">Як описано в специфікації HTTP 1.1, </span></span><code>POST</code> <span class="tlid-translation translation"><span title=""> призначений для забезпечення уніфікованого методу для виконання наступних функцій:</span></span></p> - -<ul> - <li><span class="tlid-translation translation"><span title="">Анотування існуючих ресурсів</span></span></li> - <li><span class="tlid-translation translation"><span title="">Розміщення повідомлення на дошці оголошень, групі новин, списку розсилки або подібній групі статей;</span></span></li> - <li><span class="tlid-translation translation"><span title="">Додавання нового користувача через реєстраційне вікно;</span></span></li> - <li> <span class="tlid-translation translation"><span title="">Надання блоку даних, таких як результат подання форми до процесу обробки даних;</span></span></li> - <li><span class="tlid-translation translation"><span title="">Розширення бази даних через операцію додавання.</span></span></li> -</ul> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Запит має тіло</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">Успішна відповідь має тіло</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">{{Glossary("Safe")}}</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">{{Glossary("Idempotent")}}</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">{{Glossary("Cacheable")}}</th> - <td>Тільки у випадку, якщо включена інформація про свіжість</td> - </tr> - <tr> - <th scope="row">Дозволений в <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-формах</a></th> - <td>Так</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">POST /index.html -</pre> - -<h2 id="Приклад">Приклад</h2> - -<p><span class="tlid-translation translation"><span title="">Проста форма з використанням типового типу вмісту </span></span><code>application/x-www-form-urlencoded</code><span class="tlid-translation translation"><span title="">:</span></span></p> - -<pre class="line-numbers language-html">POST / HTTP/1.1 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 - -say=Hi&to=Mom</pre> - -<p><span class="tlid-translation translation"><span title="">Форма, що використовує тип вмісту </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title="">:</span></span></p> - -<pre>POST /test.html HTTP/1.1 -Host: example.org -Content-Type: multipart/form-data;boundary="boundary" - ---boundary -Content-Disposition: form-data; name="field1" - -value1 ---boundary -Content-Disposition: form-data; name="field2"; filename="example.txt" - -value2</pre> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "POST", "4.3.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.methods.POST")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPHeader("Content-Type")}}</li> - <li>{{HTTPHeader("Content-Disposition")}}</li> -</ul> diff --git a/files/uk/web/http/methods/put/index.html b/files/uk/web/http/methods/put/index.html deleted file mode 100644 index c66918862e..0000000000 --- a/files/uk/web/http/methods/put/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: PUT -slug: Web/HTTP/Methods/PUT -translation_of: Web/HTTP/Methods/PUT ---- -<div>Метод HTTP запиту PUT створює новий ресурс або замінює представлення цільового ресурсу даними відправленими у тілі запиту.</div> - -<div></div> - -<p>Різниця між PUT та {{HTTPMethod("POST")}} полягає у тому, що PUT є ідемпотентним: викликаючи його один або кілька разів з одним набором даних продукується той самий результат (тобто немає сторонніх ефектів), у той час, коли, множинні виклики POST можуть мати сторонні ефекти.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Має тіло запиту</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">Успішна відповідь має тіло</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">{{Glossary("Safe")}}</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">{{Glossary("Idempotent")}}</th> - <td>Так</td> - </tr> - <tr> - <th scope="row">{{Glossary("Cacheable")}}</th> - <td>Ні</td> - </tr> - <tr> - <th scope="row">Дозволений у <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML формах</a></th> - <td>Ні</td> - </tr> - </tbody> -</table> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">PUT /new.html HTTP/1.1 -</pre> - -<h2 id="Приклад">Приклад</h2> - -<h3 id="Запит">Запит</h3> - -<pre>PUT /new.html HTTP/1.1 -Host: example.com -Content-type: text/html -Content-length: 16 - -<p>Новий файл</p></pre> - -<h3 id="Відповіді">Відповіді</h3> - -<p>Якщо цільовий ресурс не містить відправляємої сутності і PUT запит створює її, сервер має проінформувати клієнтський додаток про створення, відправивши у відповідь {{HTTPStatus("201")}} (<code>Created</code>)</p> - -<pre class="newpage">HTTP/1.1 201 Created -Content-Location: /new.html -</pre> - -<p>Якщо цільовий ресурс містить відправляєму сутність і сутність була успішно мутована (тобто оновлена), відповідно до даних у тілі запиту, сервер має відправити у відповідь або {{HTTPStatus("200")}} (<code>OK</code>), або {{HTTPStatus("204")}} (<code>No Content</code>), щоб проінформувати клієнт про успішне завершення запиту.</p> - -<pre>HTTP/1.1 204 No Content -Content-Location: /existing.html -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "PUT", "4.3.4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Підтрімка_браузерами">Підтрімка браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.methods.PUT")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{HTTPStatus("201")}}</li> - <li>{{HTTPStatus("204")}}</li> -</ul> diff --git a/files/uk/web/http/session/index.html b/files/uk/web/http/session/index.html deleted file mode 100644 index 96e10d914a..0000000000 --- a/files/uk/web/http/session/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: A typical HTTP session -slug: Web/HTTP/Session -translation_of: Web/HTTP/Session ---- -<div>{{HTTPSidebar}}</div> - -<p>В клієнт-серверних протоколах таких як HTTP, сесії складаються з трьох фаз:</p> - -<ol> - <li>Клієнт встановлює TCP з'єднання (або підходяще з'єднання якщо неможливо зробити це на TCP).</li> - <li>Клієнт посилає запит , і очікує відповіді .</li> - <li>Сервер обробляє запит , І посилає відповідь , надаючи код статусу і відповідні дані</li> -</ol> - -<p>Починаючи з версії HTTP/1.1, з'єднання більше не закривається після завершення третьої фази, і клієнту тепер надається можливість подальшого запиту: це означає, що друга та третя фази можуть тепер виконуватись будь-яку кількість разів.</p> - -<h2 id="Встановлення_зєданння">Встановлення з'єданння </h2> - -<p>В клієнт-серверних протоколах , клієнт встановлює з'єднання. Відкриття з'єднання в HTTP Означає втановлення з'єднанняна транспортному рівні , зазвичай використовується TCP.</p> - -<p>З TCP порт за замовчуванням, для HTTP сервера на будь-якому комп'ютері становить порт 80. Інші порти також можуть бути використані, як наприклад 8000 чи 8080. Для запиту сторінки URL повинен включати в себе домене ім'я та номер порту, але порт можна опустити якщо його номер 80. Дивись <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> для детальної інформації.</p> - -<div class="note"><strong>Note:</strong> The client-server model does not allow the server to send data to the client without an explicit request for it. To work around this problem, web developers use several techniques: ping the server periodically via the {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} APIs, using the <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a>, or similar protocols.</div> - -<h2 id="Надсилання_клієнтського_запиту">Надсилання клієнтського запиту </h2> - -<p>Once the connection is established, the user-agent can send the request (a user-agent is typically a web browser, but can be anything else, a crawler, for example). A client request consists of text directives, separated by CRLF (carriage return, followed by line feed), divided into three blocks:</p> - -<ol> - <li>The first line contains a request method followed by its parameters: - <ul> - <li>the path of the document, i.e. an absolute URL without the protocol or domain name</li> - <li>the HTTP protocol version</li> - </ul> - </li> - <li>Subsequent lines represent an HTTP header, giving the server information about what type of data is appropriate (e.g., what language, what MIME types), or other data altering its behavior (e.g., not sending an answer if it is already cached). These HTTP headers form a block which ends with an empty line.</li> - <li>The final block is an optional data block, which may contain further data mainly used by the POST method.</li> -</ol> - -<h3 id="Приклади_запитів">Приклади запитів </h3> - -<p>Fetching the root page of developer.mozilla.org, i.e. <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a>, and telling the server that the user-agent would prefer the page in French, if possible:</p> - -<pre>GET / HTTP/1.1 -Host: developer.mozilla.org -Accept-Language: fr -</pre> - -<p>Observe that final empty line, this separates the data block from the header block. As there is no <code>Content-Length</code> provided in an HTTP header, this data block is presented empty, marking the end of the headers, allowing the server to process the request the moment it receives this empty line.</p> - -<p>For example, sending the result of a form:</p> - -<pre>POST /contact_form.php HTTP/1.1 -Host: developer.mozilla.org -Content-Length: 64 -Content-Type: application/x-www-form-urlencoded - -name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue -</pre> - -<h3 id="Види_методів">Види методів </h3> - -<p>HTTP defines a set of <a href="/en-US/docs/Web/HTTP/Methods">request methods</a> indicating the desired action to be performed upon a resource. Although they can also be nouns, these requests methods are sometimes referred as HTTP verbs. The most common requests are <code>GET</code> and <code>POST</code>:</p> - -<ul> - <li>The {{HTTPMethod("GET")}} method requests a data representation of the specified resource. Requests using <code>GET</code> should only retrieve data.</li> - <li>The {{HTTPMethod("POST")}} method sends data to a server so it may change its state. This is the method often used for <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>.</li> -</ul> - -<h2 id="Структура_відповіді_сервера">Структура відповіді сервера </h2> - -<p>After the connected agent has sent its request, the web server processes it, and ultimately returns a response. Similar to a client request, a server response is formed of text directives, separated by CRLF, though divided into three blocks:</p> - -<ol> - <li>The first line, the <em>status line</em>, consists of an acknowledgment of the HTTP version used, followed by a status request (and its brief meaning in human-readable text).</li> - <li>Subsequent lines represent specific HTTP headers, giving the client information about the data sent (e.g. type, data size, compression algorithm used, hints about caching). Similarly to the block of HTTP headers for a client request, these HTTP headers form a block ending with an empty line.</li> - <li>The final block is a data block, which contains the optional data.</li> -</ol> - -<h3 id="Приклади_відповідей">Приклади відповідей</h3> - -<p>Успішна відповідь :</p> - -<pre>HTTP/1.1 200 OK -Content-Type: text/html; charset=utf-8 -Content-Length: 55743 -Connection: keep-alive -Cache-Control: s-maxage=300, public, max-age=0 -Content-Language: en-US -Date: Thu, 06 Dec 2018 17:37:18 GMT -ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" -Server: meinheld/0.6.1 -Strict-Transport-Security: max-age=63072000 -X-Content-Type-Options: nosniff -X-Frame-Options: DENY -X-XSS-Protection: 1; mode=block -Vary: Accept-Encoding,Cookie -Age: 7 - - -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>A simple webpage</title> -</head> -<body> - <h1>Simple HTML5 webpage</h1> - <p>Hello, world!</p> -</body> -</html> -</pre> - -<p>Notification that the requested resource has permanently moved:</p> - -<pre>HTTP/1.1 301 Moved Permanently -Server: Apache/2.4.37 (Red Hat) -Content-Type: text/html; charset=utf-8 -Date: Thu, 06 Dec 2018 17:33:08 GMT -Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(this is the</em><em> new link to the resource; it is expected that the user-agent will fetch it)</em></strong> -Keep-Alive: timeout=15, max=98 -Accept-Ranges: bytes -Via: Moz-Cache-zlb05 -Connection: Keep-Alive -Content-Length: 325 <em>(<strong>the content contains a default page to display if the user-agent is not able to follow the link)</strong></em> - - -<!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong> -</pre> - -<p>Notification that the requested resource doesn't exist:</p> - -<pre>HTTP/1.1 404 Not Found -Content-Type: text/html; charset=utf-8 -Content-Length: 38217 -Connection: keep-alive -Cache-Control: no-cache, no-store, must-revalidate, max-age=0 -Content-Language: en-US -Date: Thu, 06 Dec 2018 17:35:13 GMT -Expires: Thu, 06 Dec 2018 17:35:13 GMT -Server: meinheld/0.6.1 -Strict-Transport-Security: max-age=63072000 -X-Content-Type-Options: nosniff -X-Frame-Options: DENY -X-XSS-Protection: 1; mode=block -Vary: Accept-Encoding,Cookie -X-Cache: Error from cloudfront - - -<!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong> -</pre> - -<h3 id="Статус_коди_відповідей">Статус коди відповідей</h3> - -<p><a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes</a> indicate if a specific HTTP request has been successfully completed. Responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and servers errors.</p> - -<ul> - <li>{{HTTPStatus(200)}}: OK. The request has succeeded.</li> - <li>{{HTTPStatus(301)}}: Moved Permanently. This response code means that the URI of requested resource has been changed.</li> - <li>{{HTTPStatus(404)}}: Not Found. The server cannot find the requested resource.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></li> - <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li> - <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> - <li><a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes </a></li> -</ul> diff --git a/files/uk/web/http/status/100/index.html b/files/uk/web/http/status/100/index.html deleted file mode 100644 index 60b1d9d609..0000000000 --- a/files/uk/web/http/status/100/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 100 Продовження -slug: Web/HTTP/Status/100 -tags: - - 100 Continue - - 100 Продовжити - - HTTP -translation_of: Web/HTTP/Status/100 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код відповіді HTTP <strong><code>100 Continue</code></strong> інформаційного статусу вказує на те, що все до цих пір все в порядку, і клієнт повинен продовжувати запит або ігнорувати його, якщо він вже закінчений.</p> - -<p>Щоб перевірити заголовки запиту сервера, клієнт повинен відправити {{HTTPHeader ("Expect")}}<code>: 100-continue</code>, як заголовок у своєму початковому запиті, та отримати відповідний код стану <code>100 Continue</code> у відповіді до відправлення тіла запиту.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">100 Continue</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p> - -<p>{{Compat("http.status.100")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li>{{HTTPHeader("Expect")}}</li> - <li>{{HTTPStatus(417)}}</li> -</ul> diff --git a/files/uk/web/http/status/101/index.html b/files/uk/web/http/status/101/index.html deleted file mode 100644 index 4248f1cdff..0000000000 --- a/files/uk/web/http/status/101/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 101 Зміна протоколів -slug: Web/HTTP/Status/101 -translation_of: Web/HTTP/Status/101 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код відповіді HTTP <strong><code>101 Switching Protocols</code></strong> вказує на протокол, на який сервер перемикається за запитом клієнта, який надіслав повідомлення, включаючий заголовок запиту {{HTTPHeader ("Upgrade")}}.</p> - -<p>Сервер включає в цю відповідь заголовок відповіді {{HTTPHeader ("Upgrade")}} і вказує протокол, на який він перейшов. Процес детально описаний у статті <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Протокол механізму оновлення</a>.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">101 Switching Protocols</pre> - -<h2 id="Приклади">Приклади</h2> - -<p>Зміна протоколів може використовуватись з <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>.</p> - -<pre>HTTP/1.1 101 Switching Protocols -Upgrade: websocket -Connection: Upgrade</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li> - <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li> - <li>{{HTTPHeader("Upgrade")}}</li> - <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li> -</ul> diff --git a/files/uk/web/http/status/200/index.html b/files/uk/web/http/status/200/index.html deleted file mode 100644 index 90157eba33..0000000000 --- a/files/uk/web/http/status/200/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 200 OK -slug: Web/HTTP/Status/200 -tags: - - 200 OK - - HTTP - - HTTP Статус -translation_of: Web/HTTP/Status/200 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код відповіді на статус успіху HTTP <strong><code>200 OK</code></strong> вказує на те, що запит виконано. За замовчуванням відповідь 200 - кешується.</p> - -<p>Значення успіху залежить від методу запиту HTTP:</p> - -<ul> - <li>{{HTTPMethod ("GET")}}: ресурс був вилучений і передається в тілі повідомлення.</li> - <li>{{HTTPMethod ("HEAD")}}: заголовки суб'єкта знаходяться в тілі повідомлення.</li> - <li>{{HTTPMethod ("POST")}}: ресурс, що описує результат дії, передається в тілі повідомлення.</li> - <li>{{HTTPMethod ("TRACE")}}: тіло повідомлення містить повідомлення запиту, отримане сервером.</li> -</ul> - -<p>Успішний результат {{HTTPMethod ("PUT")}} або {{HTTPMethod ("DELETE")}} часто не є <code>200 OK</code>, але {{HTTPStatus ("204")}} <code>No Content</code> (або {{HTTPStatus ("201")}} <code>Created</code>, коли ресурс завантажується вперше).</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">200 OK</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p> - -<p>{{Compat("http.status.200")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> -</ul> diff --git a/files/uk/web/http/status/201/index.html b/files/uk/web/http/status/201/index.html deleted file mode 100644 index aa8c04df08..0000000000 --- a/files/uk/web/http/status/201/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 201 Створений -slug: Web/HTTP/Status/201 -tags: - - 201 Created - - 201 Створено - - HTTP - - HTTP Статус -translation_of: Web/HTTP/Status/201 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код відповіді HTTP <strong><code>201 Created</code></strong> вказує на те, що запит був успішним і призвів до створення ресурсу. Новий ресурс ефективно створюється до відправки цієї відповіді і повертається в тілі повідомлення, його місце розташування - це URL-адреса запиту або вміст заголовка {{HTTPHeader ("Location")}}.</p> - -<p>Загальний випадок коду цього стану є результатом запиту {{HTTPMethod ("PUT")}}.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">201 Created</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_бразерами">Сумісність з бразерами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p> - -<p>{{Compat("http.status.201")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> -</ul> diff --git a/files/uk/web/http/status/203/index.html b/files/uk/web/http/status/203/index.html deleted file mode 100644 index c1cfddde79..0000000000 --- a/files/uk/web/http/status/203/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 203 Non-Authoritative Information -slug: Web/HTTP/Status/203 -tags: - - HTTP - - Довідка - - Успішна відповідь - - код стану - - код стану HTTP -translation_of: Web/HTTP/Status/203 ---- -<div>{{HTTPSidebar}}</div> - -<p>Стан відповіді HTTP <strong><code>203 Non-Authoritative Information</code></strong> <em>(<strong>укр.</strong> Не авторитетна інформація)</em> вказує на те, що запит був успішним, але додане корисне навантаження було змінено через {{Glossary("Proxy server", "проксі")}} трансформації, з відповіді {{HTTPStatus("200")}} (<code>OK</code>) сервера-джерела.</p> - -<p>Відповідь <code>203</code> схожа на значення <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a></code>, що означає <code>Transformation Applied</code> <em>(<strong>укр.</strong> Застосовується трансформація)</em> коду заголовка {{HTTPHeader("Warning")}}, що має додаткову перевагу при застосуванні до відповідей з будь-яким кодом стану <em>(<strong>анг.</strong> status code)</em>.</p> - -<h2 id="Стан">Стан</h2> - -<pre class="syntaxbox notranslate">203 Non-Authoritative Information</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{HTTPStatus("200")}}</li> - <li>{{Glossary("Proxy server")}}</li> - <li>{{HTTPHeader("Warning")}}</li> -</ul> diff --git a/files/uk/web/http/status/204/index.html b/files/uk/web/http/status/204/index.html deleted file mode 100644 index 5762dec47a..0000000000 --- a/files/uk/web/http/status/204/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 204 Без вмісту -slug: Web/HTTP/Status/204 -tags: - - '204' - - 204 No Content - - 204 Без вмісту - - HTTP -translation_of: Web/HTTP/Status/204 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код відповіді HTTP <strong><code>204 No Content</code></strong> вказує на те, що запит виконано, але клієнтові не потрібно відходити від поточної сторінки. Відповідь 204 за замовчуванням кешується. В такому відгуку включений заголовок {{HTTPHeader ("ETag")}}.</p> - -<p>Спільним випадком використання є повернення <code>204</code> в результаті запиту {{HTTPMethod ("PUT")}}, оновлення ресурсу, без зміни поточного вмісту сторінки, що відображається користувачеві. Якщо ресурс створено, замість нього буде показано {{HTTPStatus ("201")}} <code>Created</code>. Якщо сторінка повинна бути змінена на нещодавно оновлену сторінку, замість нього слід використовувати {{HTTPStatus ("200")}}.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">204 No Content</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.status.204")}}</p> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<ul> - <li> - <p>Хоча цей код стану призначений для опису відповіді без тіла, сервер може помилково включати дані, що слідують за заголовками. Протокол дозволяє користувальницьким агентам варіюватися в тому, як вони обробляють такі відповіді (<a href="https://github.com/httpwg/http11bis/issues/26">обговорення щодо цього тексту специфікації можна знайти тут</a>). Це спостерігається при стійких з'єднаннях, де недійсний орган може включати чіткий відповідь на наступний запит.</p> - - <p>Apple Safari відкидає будь-які такі дані. Google Chrome і Microsoft Edge відкидають до чотирьох недійсних байтів, що передують дійсній відповіддю. Firefox допускає понад кілобайт недійсних даних, що передують дійсній відповіддю.</p> - </li> -</ul> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> -</ul> diff --git a/files/uk/web/http/status/206/index.html b/files/uk/web/http/status/206/index.html deleted file mode 100644 index 9c4da2ba75..0000000000 --- a/files/uk/web/http/status/206/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 206 Частковий вміст -slug: Web/HTTP/Status/206 -tags: - - 206 Частковий зміст - - HTTP - - HTTP Статус - - Запити діапазону -translation_of: Web/HTTP/Status/206 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код статусу <strong>HTTP</strong> <strong><code>206 Partial Content</code></strong> вказує на те, що запит був успішним, і його тіло містить запитувані діапазони даних, як описано в заголовку {{HTTPHeader ("Range")}} запиту.</p> - -<p>Якщо є лише один діапазон, {{HTTPHeader ("Content-Type")}} всієї відповіді встановлюється на тип документа, а також {{HTTPHeader ("Content-Range")}}.</p> - -<p>Якщо декілька діапазонів відправлені назад, {{HTTPHeader ("Content-Type")}} встановлюється на <code>multipart/byteranges</code>, а кожен фрагмент охоплює один діапазон, з {{HTTPHeader ("Content-Range")}} і {{HTTPHeader ("Content-Type") }} описуючи його.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">206 Partial Content</pre> - -<h2 id="Приклади">Приклади</h2> - -<p>Відповідь, що містить один єдиний діапазон:</p> - -<pre class="newpage">HTTP/1.1 206 Partial Content -Date: Wed, 15 Nov 2015 06:25:24 GMT -Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT -Content-Range: bytes 21010-47021/47022 -Content-Length: 26012 -Content-Type: image/gif - -... 26012 bytes of partial image data ...</pre> - -<p>Відповідь, що містить кілька діапазонів:</p> - -<pre class="newpage">HTTP/1.1 206 Partial Content -Date: Wed, 15 Nov 2015 06:25:24 GMT -Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT -Content-Length: 1741 -Content-Type: multipart/byteranges; boundary=String_separator - ---String_separator -Content-Type: application/pdf -Content-Range: bytes 234-639/8000 - -...the first range... ---String_separator -Content-Type: application/pdf -Content-Range: bytes 4590-7999/8000 - -...the second range ---String_separator--</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p> - -<p>{{Compat("http.status.206")}}</p> - -<h2 id="Дивись_також">Дивись також</h2> - -<ul> - <li>{{HTTPHeader("If-Range")}}</li> - <li>{{HTTPHeader("Range")}}</li> - <li>{{HTTPHeader("Content-Range")}}</li> - <li>{{HTTPHeader("Content-Type")}}</li> -</ul> diff --git a/files/uk/web/http/status/418/index.html b/files/uk/web/http/status/418/index.html deleted file mode 100644 index 176fa6f000..0000000000 --- a/files/uk/web/http/status/418/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 418 I'm a teapot -slug: Web/HTTP/Status/418 -translation_of: Web/HTTP/Status/418 ---- -<div>{{HTTPSidebar}}</div> - -<p>Код помилки HTTP <strong><code>418 I'm a teapot</code></strong> повідомляє, що сервер відмовляється готувати каву у зв'язку з тим, що він чайник. Ця помилка посилається на Hyper Text Coffee Pot Control Protocol (Гіпертекстовий протокол управління кавниками), що був першоквітневим жартом у 1998.</p> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">418 I'm a teapot</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Назва</th> - </tr> - <tr> - <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td> - <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("http.status.418")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li> -</ul> diff --git a/files/uk/web/http/status/422/index.html b/files/uk/web/http/status/422/index.html deleted file mode 100644 index be92381f02..0000000000 --- a/files/uk/web/http/status/422/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: 422 Unprocessable Entity -slug: Web/HTTP/Status/422 -tags: - - HTTP - - HTTP Status Code - - WebDAV - - Довідка - - Клієнтська помилка - - Код відповіді - - Помилка клієнта -translation_of: Web/HTTP/Status/422 ---- -<p>{{HTTPSidebar}}</p> - -<p>Код відповіді HyperText Transfer Protocol (HTTP) <code><strong>422 Unprocessable Entity</strong></code> означає, що сервер розуміє тип сутності запиту, і синтаксис цієї сутності вірний, проте опрацювати вміщені в неї інструкції неможливо.</p> - -<div class="warning"> -<p><strong>Важливо</strong>: клієнт не повинен повторювати цей запит без його модифікації.</p> -</div> - -<h2 id="Статус">Статус</h2> - -<pre class="syntaxbox">422 Unprocessable Entity</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Специфікації</th> - <th scope="col">Назва</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("4918", "422 Unprocessable Entity" , "11.2")}}</td> - <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)</td> - </tr> - </tbody> -</table> diff --git a/files/uk/web/http/status/index.html b/files/uk/web/http/status/index.html deleted file mode 100644 index e490502369..0000000000 --- a/files/uk/web/http/status/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: HTTP response status codes -slug: Web/HTTP/Status -tags: - - HTTP - - NeedsTranslation - - Status codes - - TopicStub -translation_of: Web/HTTP/Status ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p> - -<h2 id="Information_responses">Information responses</h2> - -<dl> - <dt>{{HTTPStatus(100, "100 Continue")}}</dt> - <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd> - <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> - <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd> - <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> - <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> -</dl> - -<h2 id="Successful_responses">Successful responses</h2> - -<dl> - <dt>{{HTTPStatus(200, "200 OK")}}</dt> - <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br> - GET: The resource has been fetched and is transmitted in the message body.<br> - HEAD: The entity headers are in the message body.<br> - POST: The resource describing the result of the action is transmitted in the message body.<br> - TRACE: The message body contains the request message as received by the server</dd> - <dt>{{HTTPStatus(201, "201 Created")}}</dt> - <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd> - <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> - <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> - <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> - <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd> - <dt>{{HTTPStatus(204, "204 No Content")}}</dt> - <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> - <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> - <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> - <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> - <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> - <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> - <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd> - <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> - <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd> - <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> - <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> -</dl> - -<h2 id="Redirection_messages">Redirection messages</h2> - -<dl> - <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> - <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> - <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> - <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> - <dt>{{HTTPStatus(302, "302 Found")}}</dt> - <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> - <dt>{{HTTPStatus(303, "303 See Other")}}</dt> - <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> - <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> - <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> - <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> - <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> - <dt><code>306 unused</code></dt> - <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> - <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> - <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> - <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> - <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> -</dl> - -<h2 id="Client_error_responses">Client error responses</h2> - -<dl> - <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> - <dd>This response means that server could not understand the request due to invalid syntax.</dd> - <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> - <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> - <dt><code>402 Payment Required</code></dt> - <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> - <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> - <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd> - <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> - <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd> - <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> - <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> - <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> - <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> - <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> - <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> - <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> - <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> - <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> - <dd>This response is sent when a request conflicts with the current state of the server.</dd> - <dt>{{HTTPStatus(410, "410 Gone")}}</dt> - <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> - <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> - <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> - <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> - <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> - <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> - <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> - <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> - <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> - <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> - <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> - <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> - <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> - <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> - <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> - <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> - <dd>The server refuses the attempt to brew coffee with a teapot.</dd> - <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> - <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> - <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> - <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> - <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> - <dd>The resource that is being accessed is locked.</dd> - <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> - <dd>The request failed due to failure of a previous request.</dd> - <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> - <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> - <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> - <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> - <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> - <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> - <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> - <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> - <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> - <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> -</dl> - -<h2 id="Server_error_responses">Server error responses</h2> - -<dl> - <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> - <dd>The server has encountered a situation it doesn't know how to handle.</dd> - <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> - <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> - <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> - <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> - <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> - <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> - <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> - <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> - <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> - <dd>The HTTP version used in the request is not supported by the server.</dd> - <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> - <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> - <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> - <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> - <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> - <dd>The server detected an infinite loop while processing the request.</dd> - <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> - <dd>Further extensions to the request are required for the server to fulfill it.</dd> - <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> - <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> - <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> -</ul> diff --git a/files/uk/web/index.html b/files/uk/web/index.html deleted file mode 100644 index 2ad9df36ea..0000000000 --- a/files/uk/web/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Веб-технології для розробників -slug: Web -tags: - - Landing - - NeedsTranslation - - Веб -translation_of: Web ---- -<p>Відкритий веб представляє неймовірні можливості для людей які хочуть створювати веб-сайти або веб-додатки. Щоб скористатися всіма перевагами цих технологій, ви повинні знати, як їх використовувати. Нижче ви знайдете посилання на документацію MDN для різноманітних веб-технологій.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Веб-технології">Веб-технології</h2> - -<h3 id="Основи">Основи</h3> - -<dl> - <dt><a href="/uk/docs/Web/HTML">HTML</a></dt> - <dd>(англ. <em><span lang="en">HyperText Markup Language</span></em> — Мова розмітки гіпертексту) це мова, що використовується для опису і визначення вмісту веб-сторінки в добре структурованому форматі.</dd> - <dt><a href="/uk/docs/Web/CSS">CSS</a></dt> - <dd>(англ.<em>Cascading Style Sheets</em> — Каскадні таблиці стилів) використовуються для опису зовнішнього вигляду веб-вмісту.</dd> -</dl> - -<h3 id="Скрипти">Скрипти</h3> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript">JavaScript</a></dt> - <dd>JavaScript є мовою програмування, яка працює у браузері, що використовується, для побудови просунутих інтерактивних веб-сайтів та додатків для безпечного виконання в браузері.</dd> - <dd>З появою {{glossary("Node.js")}}, ви також можете виконувати JavaScript на сервері.</dd> - <dt><a href="/uk/docs/Web/Reference/API">Web APIs</a></dt> - <dd>Даний розділ містить довідкові матеріали, по кожному API, які надають величезні можливості для створення веб-сценаріїв, включаючи <a href="https://developer.mozilla.org/uk/docs/DOM">DOM</a> та всі пов'язані з ним API, які ви можете використовувати для побудови веб-контенту і додатків. - <ul> - <li><a href="/uk/docs/Web/API" title="/uk/docs/Web/API">Web API interface reference</a> - всі інтерфейси відсортовані по-алфавіту.</li> - <li><a href="/uk/docs/WebAPI">WebAPI</a> - перелік API для взаємодії з пристроями та іншими API корисними для додатків.</li> - </ul> - </dd> -</dl> - -<h3 id="Графіка">Графіка</h3> - -<dl> - <dt><a href="/uk/docs/SVG">SVG</a></dt> - <dd>(<em>англ. Scalable Vector Graphics - </em>Масштабована Векторна Графіка) дозволяє описати зображення як набір векторів (ліній) та форм, що дозволяє плавне масштабування незалежно від розміру, без втрат якості.</dd> - <dt><a href="/uk/docs/Web/WebGL" title="/uk/docs/Web/WebGL">WebGL</a></dt> - <dd>WebGL додає 3D-графіку у Веб, надаючи API, що побудований на основі OpenGL ES 2.0, який дозволяє використовувати його в HTML {{HTMLElement("canvas")}} елементах.</dd> -</dl> - -<h3 id="Інше">Інше</h3> - -<dl> - <dt><a href="/uk/docs/Web/MathML">MathML</a></dt> - <dd>Мова Математичної Розмітки дозволяє відтворювати складні математичні рівняння і синтаксис.</dd> -</dl> -</div> -<span class="hidden"> </span> - -<div class="section"> -<div> -<h2 class="Documentation" id="Документація_за_типом">Документація за типом </h2> -</div> - -<div> -<dl> - <dt> - <p><a href="/uk/docs/Web/Guide">Розробка Веб-застосунків</a></p> - </dt> - <dd> - <p>Цей розділ містить статті, що пояснюють техніки, які використовують для розробки веб-застосунків для мобільних пристроїв, настільних комп'ютерів та середовищ Firefox OS.</p> - </dd> - <dt> - <p><a href="/uk/docs/Web/Tutorials">Підручники для веб-розробників</a></p> - </dt> - <dd> - <p>Тут ти знадеш перелік навчальних матеріалів, що дозволять тобі крок за кроком опанувати API, веб-технології та знайти відповіді на дотичні до цих тем питання.</p> - </dd> - <dt> - <p><a href="/uk/docs/Web/Reference">Посилання</a></p> - </dt> - <dd> - <p><em>Ця сторінка міститиме посилання на усю довідникову інформацію проекту MDN, але поки що можна скористатись посиланнями на веб-технології в лівій секції сторінки.</em></p> - </dd> -</dl> -</div> - -<dl> -</dl> - -<div> -<h2 id="Інші_теми">Інші теми</h2> -</div> - -<div> -<dl> - <dt> - <p><a href="/uk/docs/Web/Apps">Розробка веб-додатків</a></p> - </dt> - <dd> - <p>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</p> - </dd> - <dt> - <p><a href="/uk/docs/Web/Accessibility">Доступність</a></p> - </dt> - <dd> - <p>Доступні веб-сайти надають можливість вільно користуватись можливостями мережі якомога більшій кількості людей, включно з тими, чиї можливості бачити, чути, тощо, певною мірою обмежені. Цей розділ статей надасть тобі інформацію про доступність у веб-розробці.</p> - </dd> - <dt> - <p><a href="/uk/docs/Web/Security">Безпека</a></p> - </dt> - <dd> - <p>Гарантувати безпеку свого веб-сайту чи веб-застосунку є життєвою необхідністю для його існування. Не дозволь персональним даним користувачів потрапити до рук "поганих хлопців", використавши поради з цього циклу статей.</p> - </dd> -</dl> -</div> - -<dl> -</dl> -</div> -<span class="hidden"> </span></div> - -<p><span class="alllinks"><a href="/uk/docs/tag/Web">Дивитись все...</a></span></p> diff --git a/files/uk/web/javascript/a_re-introduction_to_javascript/index.html b/files/uk/web/javascript/a_re-introduction_to_javascript/index.html deleted file mode 100644 index 83db347460..0000000000 --- a/files/uk/web/javascript/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,949 +0,0 @@ ---- -title: Повторне введення в JavaScript (JS-підручник) -slug: Web/JavaScript/A_re-introduction_to_JavaScript -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -<div>{{jsSidebar}}</div> - -<h2 id="Вступ">Вступ</h2> - -<p>Чому повторне введення? Тому що {{Glossary ("JavaScript")}} відомий тим, що він є <a href="http://javascript.crockford.com/javascript.html">найпопулярнішою у світі мовою програмування</a>. Його часто висміюють як іграшку, але під його шаром оманливої простоти чекають потужні мовні особливості. JavaScript зараз використовується неймовірним числом популярних додатків, які показують, що більш глибоке знання цієї технології є важливим вмінням для будь-якого веб-розробника або розробника мобільних пристроїв.</p> - -<p>Варто почати з огляду історії мови. JavaScript був створений у 1995 році Бренданом Айком, коли він був інженером у Netscape. JavaScript був вперше випущений з Netscape 2 на початку 1996 року. Спочатку він мав назву LiveScript, але він був перейменований у злополучному маркетинговому рішенні, яке спробувало скористатися популярністю Java-мови Sun Microsystem - незважаючи на те, що вони мають мало спільного. З тих пір це стало джерелом плутанини.</p> - -<p>Трохи пізніше Microsoft випустила дуже схожу та практично сумісну мову JScript який йшов разом з Internet Explorer 3. Через пару місяців Netscape відправила мову JavaScript до <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, Європейську організацію, яка займається стандартами, яка випустила першу версію стандарту {{Glossary("ECMAScript")}} в 1997 року. Стандарт отримав значуще оновлення в <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> в 1999 році, і залишається найстабільнішим до сьогоднішнього дня. Четверта версія була відхилена, через проблеми з ускладненням в мові. Більшість речей з четвертого видання послужили основою для стандарту ECMAScript edition 5, оприлюднений в грудні 2009 року, і для 6-го основного видання стандарту, оприлюдненого в червні 2015 року.</p> - -<div class="note"> -<p>На замітку: На далі по тексту ми будемо називати мову ECMAScript як "JavaScript".</p> -</div> - -<p>На відміну від більшості мов програмування, JavaScript не наслідує концепцію введення(input) та виведенн(output). Він спроектований таким чином, щоб запускатися як мова сценаріїв, вбудованих в середовище виконання. Найпопулярніше середовище виконання це браузер, однак інтепретатори JavaScript присутні також в Adobe Acrobat, Adobe Photoshop, SVG images, Yahoo's Widget engine, і навіть в серверному середовищі наприклад <a href="http://nodejs.org/" title="nodejs.org">Node.js</a>.</p> - -<h2 id="Загальний_огляд">Загальний огляд</h2> - -<p>JavaScript це мультіпарадігматична, динамічна мова з типами та операторами, стандартними вбудованими об'єктами та методами. ЇЇ синтаксис базован на мовах Java та C - взагалі, більша частина структури цих мов закладена в JavaScript. JavaScript підтримує об'єктно-орієнтований підхід через прототипи об'єктів, замість класів (дивись більше про <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototypical inheritance">успадкування через прототипи</a> та ES2015 {{jsxref("Classes")}}). JavaScript також підтримує функціональне програмування — тому що функції це об'єкти, їх можна тримати в змінних та передавати як будь-які інші об'єкти.</p> - -<p>Давайте почнемо огляд з блоків будови будь-якої мови: з типів. програми JavaScript керують значеннями-даними та ці значення належать до якогось типу. JavaScript має наступні типи данних:</p> - -<ul> - <li>{{jsxref("Number")}}</li> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Object")}}</li> - <li>{{jsxref("Symbol")}} (нове в ES2015)</li> -</ul> - -<p>... О, ще й {{jsxref("undefined")}} та {{jsxref("null")}}, які є ... досить відокремленими типами. Та {{jsxref("Array")}}, який є спеціальним видом об'єкту. Також {{jsxref("Date")}} та{{jsxref("RegExp")}}, які є вбудованними видами об'єктів. Та, якщо бути технічно акуратними, функція це всього-навсього спеціальний тип об'єкту. Тож діаграмма типів має виглядати наступним чином:</p> - -<ul> - <li>{{jsxref("Number")}}</li> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Symbol")}} (нове в ES2015)</li> - <li>{{jsxref("Object")}} - <ul> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Date")}}</li> - <li>{{jsxref("RegExp")}}</li> - </ul> - </li> - <li>{{jsxref("null")}}</li> - <li>{{jsxref("undefined")}}</li> -</ul> - -<p>Також є вбудований {{jsxref("Error")}} тип. На першій діаграммі усе видається простішим, та далі ми обговоримо усі типи, що були описані.</p> - -<h2 id="Числа_Numbers">Числа (Numbers)</h2> - -<p>Numbers в JavaScript є "значення подвійної точністі 64-бітового формату IEEE 754", згідно специфікаціїї. Це має деякі цікаві наслідки. В JavaScript <em><strong>немає цілих чисел (integer)</strong></em>, тож вам треба бути уважнішими з аріфметикою в порівнянні з математикою мов C або Java. Таким чином, <em>ціле число насправді є неявним плаваючим</em>.</p> - -<p>Також, обережніше з такими випадками:</p> - -<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004; -</pre> - -<p>На практиці, цілі (integer) значення представляються як 32-бітні цілі, та деякі реалізації навіть зберігають їх таким чином до тих пір, <span class="tlid-translation translation" lang="uk"><span title="">поки не буде потреби виконати інструкцію, дійсну для числа (Number), але не для 32-бітного цілого числа.</span> <span title="">Це може бути важливо для побітових (bit-wise) операцій.</span></span></p> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Підтримуються стандартні </span></span>арифметичні оператори (<a href="/uk/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">arithmetic operators</a>), <span class="tlid-translation translation" lang="uk"><span title="">включаючи додавання, віднімання, модуль (або залишок) тощо.</span> <span title="">Існує також вбудований об'єкт, про який ми не згадували раніше, так званий {{jsxref ("Math")}}, який забезпечує розширені математичні функції та константи:</span></span></p> - -<pre class="brush: js notranslate">Math.sin(3.5); -var circumference = 2 * Math.PI * r; -</pre> - -<p>Ви можете конвертувати рядки (string) в цілі числа (integer) за допомогою вбудованої {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції. Вона приймає опційним другим аргументом основу системи числення (яку бажано передавати завжди):</p> - -<pre class="brush: js notranslate">parseInt('123', 10); // 123 -parseInt('010', 10); // 10 -</pre> - -<p>У браузерах попередніх версій рядки, що починаються з "0", розглядаються, як числа з основою 8 (radix 8), але це вже не є стандартом з 2013 року. Вас може здивувати результат наступних дій в старших браузерах:</p> - -<pre class="brush: js notranslate">parseInt('010'); // 8 -parseInt('0x10'); // 16 -</pre> - -<p>В цьому зразку коду ми бачимо {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції приймають перший string як число в вісімковій системі (octal) через передуючий "0", да другий string приймається як число в шістнадцятковій системі (hexadecimal) через передуючий "0x". <em>Шістнадцяткова нотація все ще оброблюється в нових браузерахю Тількі вісімкову було прибрано з мови</em>.</p> - -<p>Якщо бажаєте конвертувати бінарне число в звичайне ціле (integer), просто зміність базу (base):</p> - -<pre class="brush: js notranslate">parseInt('11', 2); // 3 -</pre> - -<p>Таким же чином, ви можете конвертувати числа із плаваючою комою, використавши вбудовані функції {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}. На відміну від своїх двоюрідних сестер {{jsxref("Global_Objects/parseInt", "parseInt()")}} , <code>parseFloat()</code> завжди використовує десятичну базу.</p> - -<p>Ви також можете використовувати унарний операнд <code>+</code> для конвертації в числа (numbers):</p> - -<pre class="brush: js notranslate">+ '42'; // 42 -+ '010'; // 10 -+ '0x10'; // 16 -</pre> - -<p>Спеціальне значення, що називається {{jsxref("NaN")}} (скорочення від "Not a Number" - не число) повертається якщо строка є не-числом (non-numeric):</p> - -<pre class="brush: js notranslate">parseInt('hello', 10); // NaN -</pre> - -<p><code>NaN</code> токсичний! Якщо ви зробите його вхідними даними для будь-якої математичної операції - результатом буде також <code>NaN</code>:</p> - -<pre class="brush: js notranslate">NaN + 5; // NaN -</pre> - -<p>Вы можете тестувати <code>NaN</code>, використовуючи вбудовану функцію {{jsxref("Global_Objects/isNaN", "isNaN()")}}:</p> - -<pre class="brush: js notranslate">isNaN(NaN); // true -</pre> - -<p>JavaScript також має спеціальні значення {{jsxref("Infinity")}} та <code>-Infinity</code>:</p> - -<pre class="brush: js notranslate"> 1 / 0; // Infinity --1 / 0; // -Infinity -</pre> - -<p>Ви можете тестувати <code>Infinity</code>, <code>-Infinity</code> <code>та</code><code>NaN</code> значення, використвовуючи вбудовані вбудовані функції {{jsxref("Global_Objects/isFinite", "isFinite()")}}:</p> - -<pre class="brush: js notranslate">isFinite(1 / 0); // false -isFinite(-Infinity); // false -isFinite(NaN); // false -</pre> - -<div class="note">{{jsxref("Global_Objects/parseInt", "parseInt()")}} та {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} функції розкладають string допоки не зустрінуть символ, що не є валідним для заданого числового формату, потім повертає число, що було розгорнуто із string до цієї точки. Однак оператор "+" конвертує string до <code>NaN</code> якщо було виявлене некоректне значення. Просто спробуйте зробити парсінг для "10.2abc" кожним з методів у консолі та ви зрозумієте різницю краще.</div> - -<h2 id="Строки_Strings">Строки (Strings)</h2> - -<p>Строки в JavaScript є послідовністю знаків - <a href="/uk/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode characters</a>. Це радісна новина для усіх, хто мав справи з інтернаціоналізацією ( internationalization). Якщо бути точнішими, це послідовність одиниць кодування UTF-16; кожна така одиниця представлена 16-бітовим числом. Кожний Unicode знак представлен однією чи двома одиницями коду.</p> - -<p>Якщо бажаєте представити строку із одного символа-знака, ви просто використовуєте строку, що складається з одного символа.</p> - -<p>Що дізнатись довжину строки (в одиницях коду), зверніться до його <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> властивості:</p> - -<pre class="brush: js notranslate">'hello'.length; // 5 -</pre> - -<p>Ось наша перша зустріч з об'єктами JavaScript! Ви помітили, що ви можете використовувати строку як {{jsxref("Object", "objects", "", 1)}} також? У строк є {{jsxref("String", "methods", "#Methods", 1)}} які дозволяють Вам керувати строками та мати доступ до інформації про строку:</p> - -<pre class="brush: js notranslate">'hello'.charAt(0); // "h" -'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" -'hello'.toUpperCase(); // "HELLO" -</pre> - -<h2 id="Інші_типи">Інші типи</h2> - -<p>JavaScript розрізняє {{jsxref("null")}}, якие є значенням, що показує свідому відсутність значення (та доступне лише через ключеве слово <code>null</code>), та {{jsxref("undefined")}}, яке є значенням типу <code>undefined</code> та вказує на неініціалізоване значення, яке ще не отримало присвоєння значення. Ми поговоримо про змінні пізніше, а зараз зазначимо, що в JavaScript можлива об'ява змінної без присвоєння значення. Якщо ви зробите це, тип змінної буде <code>undefined</code>. Взагалі, <code>undefined</code> це константа.</p> - -<p>В JavaScript є булевий тип, з можливими значеннями<code> true</code> та <code>false</code> (обидва є ключовими словами) Будь-яке значення може бути перетворено в булевий тип, згідно наступних правил:</p> - -<ol> - <li><code>false</code>, <code>0</code>, пуста строка (<code>""</code>), <code>NaN</code>, <code>null</code>, <code>та</code><code>undefined</code> стають <code>false.</code></li> - <li>все інше - <code>true.</code></li> -</ol> - -<p>Ви можете зробити цю конвертацію безпосередньо за допомогою <code>Boolean()</code> функції:</p> - -<pre class="brush: js notranslate">Boolean(''); // false -Boolean(234); // true -</pre> - -<p>Однак, це майже не використовується, тому що JavaScript <span class="tlid-translation translation" lang="uk"><span title="">буде мовчки виконувати це перетворення</span></span> коли очікується булеве значення, як в <code>if</code> твердженні (дивися нижче). Тому ми інколи говоримо просто "вірне значення" та "хибне значення", маючи на увазі значення, що стає <code>true</code> та <code>false</code> відповідно, при перетворенні на булеве. <span class="tlid-translation translation" lang="uk"><span title="">Як альтернативу, такі значення можна назвати відповідно "правдоподібними" та "хибними".</span></span></p> - -<p>Підтримуються такі булеві операції як <code>&&</code> (<em>логіч</em><em>ний ТА</em>), <code>||</code> (<em>логічній АБО</em>), <code>та</code><code>!</code> (<em>логічний НІ</em>); дивися про це нижче.</p> - -<h2 id="Змінні">Змінні</h2> - -<p>Нові змінні в JavaScript оголошуються за допомогою одного з трьох ключових слів: <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, або <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a>. </code><br> - <br> - <strong><code>let</code> </strong>дозволяє оголосити змінну рівня блоку. Оголошена таким чином змінна доступна на рівні функціонального блоку, до якого вона <em>входить</em>. </p> - -<pre class="brush: js notranslate">let a; -let name = 'Simon'; -</pre> - -<p>Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою <code><strong>let</strong></code>:</p> - -<pre class="brush: js notranslate">// myLetVariable is *not* visible out here - -for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { - // myLetVariable is only visible in here -} - -// myLetVariable is *not* visible out here - -</pre> - -<p><code><strong>const</strong></code><strong> </strong>дозволяє оголосити змінні, чиї значення не збираються бути змінені. Такі змінні доступні з функційного блоку, де були оголошені.</p> - -<pre class="brush: js notranslate">const Pi = 3.14; // змінна Pi встановлена -Pi = 1; // викине помилку (error), тому що ви не можете змінювати постійні змінні (сonstant variable).</pre> - -<p><br> - <code><strong>var</strong></code> є самим загальним ключовим словом оголошень змінних. Він не має обмежень, що мають попередні два ключових слова. Це тому що це був єдиний спосіб оголошувати змінні в JavaScript. Змінна, що оголошена за допомогою <strong><code>var</code> </strong>доступна із функційного блоку, де була оголошена.</p> - -<pre class="brush: js notranslate">var a; -var name = 'Simon';</pre> - -<p>Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою <strong><code>var</code>:</strong></p> - -<pre class="brush: js notranslate">// myVarVariable *є* видимою звідси - -for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { - // myVarVariable є видимою для усієї функції -} - -// myVarVariable *є* видимою звідси -</pre> - -<p>Якщо ви оголосити змінну без присвоєння їй значення, її тип буде <code>undefined</code>.</p> - -<p>Важлива різниця між JavaScript та іншими мовами, такими як Java це те, що в JavaScript, блоки не мають області осяжності (scope); тільки функції мають область осяжності. Тому, якщо змінна визначена у складі виразу за допомогою <code>var</code> (наприклад, всередені структури контроля <code>if</code>), вона буде видимою для зовнішньої функції. Однак, починаючи з ECMAScript 2015, <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/let">let</a></code> <code>та</code><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/const">const</a></code> оголошення дозволяють створювати блочно-обмежені змінні.</p> - -<h2 id="Оператори">Оператори</h2> - -<p>Числові оператори JavaScript це +, <code>-</code>, <code>*</code>, <code>/</code> <code>та</code><code>%</code> що є оператором решти (<a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">що не слід плутати з модулем числа (modulo)</a>.) Значення присвоюються за допомогою =, та є також вирази компоновочного присвоєння такі як <code>+=</code> and <code>-=</code>. Це розширення виразу <code>x = x <em>operator</em> y</code>.</p> - -<pre class="brush: js notranslate">x += 5; -x = x + 5; -</pre> - -<p>Ви можете використовувати <code>++</code> and <code>--</code> щоб збільшувати та зменьшувати відповідно. Вони можуть бути як в префіксному так і в постфіксному положенні відносно значень.</p> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> оператор</a> також робить складання строк:</p> - -<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" -</pre> - -<p>Якщо ви додаєте строку до числа (або інше значення) усе конвертуюеться насамперед в строку. Це може Вас здивувати:</p> - -<pre class="brush: js notranslate">'3' + 4 + 5; // "345" - 3 + 4 + '5'; // "75" -</pre> - -<p>Додавання пустої строки до якогось значення є зручним шляхом конвертування цього значення у строку.</p> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Порівняння</a> в JavaScript робляться за допомогою <code><</code>, <code>></code>, <code><=</code> and <code>>=</code>. Це працює як для строк, так і для чисел. Рівність менш прямолінійна. Оператор подвійне-рівно (double-equals) призводить до примусової конвертації (coercion), якщо значення порівняння різних типів, інколи - з дивним результатом:</p> - -<pre class="brush: js notranslate">123 == '123'; // true -1 == true; // true -</pre> - -<p>Щоб запобігти коерції, використовуйте потрійне-рівне:</p> - -<pre class="brush: js notranslate">123 === '123'; // false -1 === true; // false -</pre> - -<p>Є також оператори <code>!=</code> <code>та</code><code>!==</code>.</p> - -<p>JavaScript також має <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">побітові операції</a>. Якщо хочете їх використовувати - вони до Ваших послуг.</p> - -<h2 id="Control_structures">Control structures</h2> - -<p>JavaScript має схожий набір структур контроля з іншими мовами сімейства C. Ствердження умов підтримуються за допомогою <code>if</code> та <code>else</code>; Можете організовувати їх у ланцюги за бажанням:</p> - -<pre class="brush: js notranslate">var name = 'kittens'; -if (name == 'puppies') { - name += ' woof'; -} else if (name == 'kittens') { - name += ' meow'; -} else { - name += '!'; -} -name == 'kittens meow'; -</pre> - -<p>JavaScript має <code>while</code> цикли та <code>do-while</code> цикли. Перший добре підходить для загального цикла; другий для циклів, де Ви бажаєте бути впевненими що тіло циклу буде виконано хоча б раз:</p> - -<pre class="brush: js notranslate">while (true) { - // an infinite loop! -} - -var input; -do { - input = get_input(); -} while (inputIsNotValid(input)); -</pre> - -<p> <code>for</code> цикл в JavaScript це теж саме, що і в С та Java мовах: це дозволяє впровадити усю інформацію про цикл в єдиній лінії коду.</p> - -<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { - // Буде виконано 5 разів -} -</pre> - -<p>JavaScript також має два інших відомих варіанта циклу: <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></p> - -<pre class="brush: js notranslate">for (let value of array) { - // робиться щось з value -} -</pre> - -<p>та <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>:</p> - -<pre class="brush: js notranslate">for (let property in object) { - // робиться щось з property object -} -</pre> - -<p>Оператори <code>&&</code> та <code>||</code> використовують логіку скороченого обчислення , це означає що чи буде обчислюватись другий операнд залежить від результату обчислення першого операнда. Дуже зручно перевіряти об'єкти на належність до null перед доступом до його атрибутів:</p> - -<pre class="brush: js notranslate">var name = o && o.getName(); -</pre> - -<p>Або для кешування значень (коли хибні значення є недійсними):</p> - -<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); -</pre> - -<p>JavaScript має тернарний оператор для виразів умов:</p> - -<pre class="brush: js notranslate">var allowed = (age > 18) ? 'yes' : 'no'; -</pre> - -<p>Твердження <code>switch</code> може бути використано для багатогілкових умов на основі чисели чи строк:</p> - -<pre class="brush: js notranslate">switch (action) { - case 'draw': - drawIt(); - break; - case 'eat': - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p>Якщо не додати <code>break</code> твердження, виконання "провалиться" на наступний рівень. Це досить рідко може бути тим, чого ви хотіли — насправді<span class="tlid-translation translation" lang="uk"><span title=""> варто конкретно позначити навмисний "прорив" коментарем, якщо ви дійсно мали на увазі це для сприяння налагодженню</span></span> (debugging):</p> - -<pre class="brush: js notranslate">switch (a) { - case 1: // провал нижче - case 2: - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p>Завершення за допомогою default за бажанням. Ви можете мати вирази в обидвах частинах switch та cases якщо бажаєте; порівняння буде робитися за допомогою оператора <code>===</code>:</p> - -<pre class="brush: js notranslate">switch (1 + 3) { - case 2 + 2: - yay(); - break; - default: - neverhappens(); -} -</pre> - -<h2 id="Обєкти">Об'єкти</h2> - -<p>JavaScript об'єкти можна уявляти як прості колекції пар ім'я-значення (name-value pairs). Таким чином, вони схожі на:</p> - -<ul> - <li>Dictionaries в Python.</li> - <li>Hashes в Perl та Ruby.</li> - <li>Hash tables в C та C++.</li> - <li>HashMaps в Java.</li> - <li>Associative arrays в PHP.</li> -</ul> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Те, що ця структура даних настільки широко використовується, є свідченням її універсальності</span></span> . Через те, що усе (основні типи даних) в JavaScript це об'єкт, <span class="tlid-translation translation" lang="uk"><span title="">будь-яка програма JavaScript, природно, передбачає велику кількість пошукових запитів хеш-таблиць.</span></span> Як добре, що запити такі швидкі!</p> - -<p> частина "ім'я" це строка JavaScript, а "значення" може бути будь яким з типів JavaScript — включно об'єктами. Це дозволяє Вам будувати структури даних необмеженої складності.</p> - -<p>Є два основних способи створити пустий об'єкт:</p> - -<pre class="brush: js notranslate">var obj = new Object(); -</pre> - -<p>Та:</p> - -<pre class="brush: js notranslate">var obj = {}; -</pre> - -<p>Це семантично одинаково; другий спосіб називається синтаксис буквального об'єкта (object literal syntax), та є більш зручним. Цей синтаксис також базовий для формату JSON та повинен бути бажаним завжди.</p> - -<p>Синтаксис буквального об'єкту може бути використаний щоб ініціалізувати об'єкт у всій повноті:</p> - -<pre class="brush: js notranslate">var obj = { - name: 'Carrot', - 'for': 'Max', - details: { - color: 'orange', - size: 12 - } -} -</pre> - -<p>Доступ до атрибутів може бути у вигляді ланцюга:</p> - -<pre class="brush: js notranslate">obj.details.color; // orange -obj['details']['size']; // 12 -</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Наступний приклад створює об'єкт-прототип, Person та екземпляр цього прототипу, You.</span></span></p> - -<pre class="brush: js notranslate">function Person(name, age) { - this.name = name; - this.age = age; -} - -// Define an object -var You = new Person('You', 24); -// We are creating a new person named "You" -// (that was the first parameter, and the age..) -</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Після створення, до властивостей об'єкта можна отримати доступ одним із двох способів:</span></span></p> - -<pre class="brush: js notranslate">obj.name = 'Simon'; -var name = obj.name; -</pre> - -<p>та...</p> - -<pre class="brush: js notranslate">obj['name'] = 'Simon'; -var name = obj['name']; -</pre> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Вони також семантично рівнозначні.</span> <span title="">Другий метод має перевагу в тому, що ім'я властивості надається у вигляді рядка, а значить, його можна обчислити під час виконання.</span> <span title="">Однак використання цього методу запобігає застосуванню деяких оптимізацій двигуна JavaScript та мініфікаторів.</span> <span title="">Він також може бути використаний для встановлення та отримання властивостей із іменами, </span></span><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">зарезервованими словами</a>:</p> - -<pre class="brush: js notranslate">obj.for = 'Simon'; // Syntax error, тому що 'for' зарезервоване слово -obj['for'] = 'Simon'; // спрацьовує добре -</pre> - -<div class="note"> -<p>Починаючи з ECMAScript 5, зарезервовані слова можна використовувати <span class="tlid-translation translation" lang="uk"><span title="">як імена властивостей об'єкта "в буфі".</span> <span title="">Це означає, що при визначенні об’єктних літералів їх не потрібно "вбирати" в лапки.</span> <span title="">Див. Специфікацію ES5.</span></span></p> -</div> - -<p><span class="tlid-translation translation" lang="uk"><span title="">Детальніше про об'єкти та прототипи див. : </span></span><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a><span class="tlid-translation translation" lang="uk"><span title="">.</span> <span title="">Пояснення прототипів об’єктів та ланцюгів прототипів об'єктів див .: </span></span><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p> - -<h2 id="Масиви">Масиви</h2> - -<p>Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p> - -<p>One way of creating arrays is as follows:</p> - -<pre class="brush: js notranslate">var a = new Array(); -a[0] = 'dog'; -a[1] = 'cat'; -a[2] = 'hen'; -a.length; // 3 -</pre> - -<p>A more convenient notation is to use an array literal:</p> - -<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; -a.length; // 3 -</pre> - -<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p> - -<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; -a[100] = 'fox'; -a.length; // 101 -</pre> - -<p>Remember — the length of the array is one more than the highest index.</p> - -<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> returned:</p> - -<pre class="brush: js notranslate">typeof a[90]; // undefined -</pre> - -<p>If you take the above into account, you can iterate over an array using the following:</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - // Do something with a[i] -} -</pre> - -<p>You can iterate over an array using a <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. Note that if someone added new properties to <code>Array.prototype</code>, they will also be iterated over by this loop. Therefore this method is "not" recommended.</p> - -<p>Another way of iterating over an array that was added with ECMAScript 5 is <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code>:</p> - -<pre class="brush: js notranslate" style="font-size: 14px;">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { - // Do something with currentValue or array[index] -}); -</pre> - -<p>If you want to append an item to an array simply do it like this:</p> - -<pre class="brush: js notranslate">a.push(item);</pre> - -<p>Arrays come with a number of methods. See also the <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p> - -<table> - <thead> - <tr> - <th scope="col">Method name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>a.toString()</code></td> - <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td> - </tr> - <tr> - <td><code>a.toLocaleString()</code></td> - <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td> - </tr> - <tr> - <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> - <td>Returns a new array with the items added on to it.</td> - </tr> - <tr> - <td><code>a.join(sep)</code></td> - <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td> - </tr> - <tr> - <td><code>a.pop()</code></td> - <td>Removes and returns the last item.</td> - </tr> - <tr> - <td><code>a.push(item1, ..., itemN)</code></td> - <td>Adds one or more items to the end.</td> - </tr> - <tr> - <td><code>a.reverse()</code></td> - <td>Reverses the array.</td> - </tr> - <tr> - <td><code>a.shift()</code></td> - <td>Removes and returns the first item.</td> - </tr> - <tr> - <td><code>a.slice(start[, end])</code></td> - <td>Returns a sub-array.</td> - </tr> - <tr> - <td><code>a.sort([cmpfn])</code></td> - <td>Takes an optional comparison function.</td> - </tr> - <tr> - <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> - <td>Lets you modify an array by deleting a section and replacing it with more items.</td> - </tr> - <tr> - <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> - <td>Prepends items to the start of the array.</td> - </tr> - </tbody> -</table> - -<h2 id="Функції">Функції</h2> - -<p>Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> - -<pre class="brush: js notranslate">function add(x, y) { - var total = x + y; - return total; -} -</pre> - -<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> - -<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> - -<pre class="brush: js notranslate">add(); // NaN -// You can't perform addition on undefined -</pre> - -<p>You can also pass in more arguments than the function is expecting:</p> - -<pre class="brush: js notranslate">add(2, 3, 4); // 5 -// added the first two; 4 was ignored -</pre> - -<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> - -<pre class="brush: js notranslate">function add() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum; -} - -add(2, 3, 4, 5); // 14 -</pre> - -<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> - -<pre class="brush: js notranslate">function avg() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<div class="syntaxbox">This is pretty useful, but it does seem a little verbose. To diminish this code a bit more we can look at substituting the use of the arguments array through <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread syntax</a>. In this way we can pass in any number of arguments into the function while keeping our code minimal. The <strong>spread operator</strong> is used in function declarations with the format: <strong>...[variable] </strong>and it will include within that variable the entire list of uncaptured arguments that the function was called with. We will also replace the <strong>for </strong>loop with a <strong>for...of</strong> loop to return the values within our variable.</div> - -<div class="syntaxbox"></div> - -<pre class="brush: js notranslate">function avg(...args) { - var sum = 0; - for (let value of args) { - sum += value; - } - return sum / args.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<div class="note"> -<div class="syntaxbox">In the above code the variable <strong>args</strong> holds all the values that were passed into the function. <br> -<br> -It is important to note that wherever the spread operator is placed in a function declaration it will store all arguments <em>after</em> its declaration, but not before.</div> - -<div class="syntaxbox"><em>a.e. function</em> <em>avg(</em><strong>firstValue, </strong><em>...args</em><strong><em>)</em> </strong>will store the first value passed into the function in the <strong>firstValue </strong>variable and the remaining arguments in <strong>args</strong></div> -</div> - -<div class="syntaxbox">Another useful function but it does lead us to a new problem. The <code>avg()</code> function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</div> - -<div class="syntaxbox"></div> - -<pre class="brush: js notranslate">function avgArray(arr) { - var sum = 0; - for (var i = 0, j = arr.length; i < j; i++) { - sum += arr[i]; - } - return sum / arr.length; -} - -avgArray([2, 3, 4, 5]); // 3.5 -</pre> - -<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.</p> - -<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 -</pre> - -<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p> - -<p>JavaScript lets you create anonymous functions.</p> - -<pre class="brush: js notranslate">var avg = function() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -}; -</pre> - -<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> - -<pre class="brush: js notranslate">var a = 1; -var b = 2; - -(function() { - var b = 3; - a += b; -})(); - -a; // 4 -b; // 2 -</pre> - -<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> - -<pre class="brush: js notranslate">function countChars(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += countChars(child); - } - return count; -} -</pre> - -<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:</p> - -<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += counter(child); - } - return count; -})(document.body); -</pre> - -<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> - -<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.</p> - -<h2 id="Custom_objects">Custom objects</h2> - -<div class="note">For a more detailed discussion of object-oriented programming in JavaScript, see <a href="/uk/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduction to Object Oriented JavaScript</a>.</div> - -<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:</p> - -<pre class="example-bad brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last - }; -} -function personFullName(person) { - return person.first + ' ' + person.last; -} -function personFullNameReversed(person) { - return person.last + ', ' + person.first; -} - -s = makePerson('Simon', 'Willison'); -personFullName(s); // "Simon Willison" -personFullNameReversed(s); // "Willison, Simon" -</pre> - -<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p> - -<pre class="brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last, - fullName: function() { - return this.first + ' ' + this.last; - }, - fullNameReversed: function() { - return this.last + ', ' + this.first; - } - }; -} - -s = makePerson('Simon', 'Willison'); -s.fullName(); // "Simon Willison" -s.fullNameReversed(); // "Willison, Simon" -</pre> - -<p>There's something here we haven't seen before: the <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="/uk/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global object.</p> - -<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> - -<pre class="brush: js notranslate">s = makePerson('Simon', 'Willison'); -var fullName = s.fullName; -fullName(); // undefined undefined -</pre> - -<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> - -<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = function() { - return this.first + ' ' + this.last; - }; - this.fullNameReversed = function() { - return this.last + ', ' + this.first; - }; -} -var s = new Person('Simon', 'Willison'); -</pre> - -<p>We have introduced another keyword: <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty object, and then calls the function specified, with <code>this</code> set to that new object. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> object. It's <code>new</code> that returns the <code>this</code> object to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> - -<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> - -<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?</p> - -<pre class="brush: js notranslate">function personFullName() { - return this.first + ' ' + this.last; -} -function personFullNameReversed() { - return this.last + ', ' + this.first; -} -function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = personFullName; - this.fullNameReversed = personFullNameReversed; -} -</pre> - -<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; -} -Person.prototype.fullName = function() { - return this.first + ' ' + this.last; -}; -Person.prototype.fullNameReversed = function() { - return this.last + ', ' + this.first; -}; -</pre> - -<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p> - -<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p> - -<pre class="brush: js notranslate">s = new Person('Simon', 'Willison'); -s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function - -Person.prototype.firstNameCaps = function firstNameCaps() { - return this.first.toUpperCase(); -}; -s.firstNameCaps(); // "SIMON" -</pre> - -<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p> - -<pre class="brush: js notranslate">var s = 'Simon'; -s.reversed(); // TypeError on line 1: s.reversed is not a function - -String.prototype.reversed = function reversed() { - var r = ''; - for (var i = this.length - 1; i >= 0; i--) { - r += this[i]; - } - return r; -}; - -s.reversed(); // nomiS -</pre> - -<p>Our new method even works on string literals!</p> - -<pre class="brush: js notranslate">'This can now be reversed'.reversed(); // desrever eb won nac sihT -</pre> - -<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p> - -<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); -s; // [object Object] - -Person.prototype.toString = function() { - return '<Person: ' + this.fullName() + '>'; -} - -s.toString(); // "<Person: Simon Willison>" -</pre> - -<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> - -<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { - var o = {}; // Create an object - constructor.apply(o, args); - return o; -} -</pre> - -<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> - -<p>Calling</p> - -<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> - -<p>is therefore almost equivalent to</p> - -<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> - -<p><code>apply()</code> has a sister function named <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> - -<pre class="brush: js notranslate">function lastNameCaps() { - return this.last.toUpperCase(); -} -var s = new Person('Simon', 'Willison'); -lastNameCaps.call(s); -// Is the same as: -s.lastNameCaps = lastNameCaps; -s.lastNameCaps(); -</pre> - -<h3 id="Inner_functions">Inner functions</h3> - -<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> - -<pre class="brush: js notranslate">function betterExampleNeeded() { - var a = 1; - function oneMoreThanA() { - return a + 1; - } - return oneMoreThanA(); -} -</pre> - -<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> - -<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> - -<h2 id="Замикання">Замикання</h2> - -<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> - -<pre class="brush: js notranslate">function makeAdder(a) { - return function(b) { - return a + b; - }; -} -var x = makeAdder(5); -var y = makeAdder(20); -x(6); // ? -y(7); // ? -</pre> - -<p>The name of the <code>makeAdder()</code> function should give it away: it creates new 'adder' functions, each of which when called with one argument adds it to the argument that it was created with.</p> - -<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and one in which <code>a</code> is 20. So the result of those function calls is as follows:</p> - -<pre class="brush: js notranslate">x(6); // returns 11 -y(7); // returns 27 -</pre> - -<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.</p> - -<p>So when <code>makeAdder()</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage collected until there are no more references to the function object that <code>makeAdder()</code> returned.</p> - -<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p> - -<p>A <strong>closure</strong> is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> - -<div class="jfk-bubble gtx-bubble"> -<div class="jfk-bubble-content-id" id="bubble-18"> -<div id="gtx-host" style="max-width: 400px;"></div> -</div> - -<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> - -<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 313.5px;"> -<div class="jfk-bubble-arrowimplbefore"></div> - -<div class="jfk-bubble-arrowimplafter"></div> -</div> -</div> diff --git a/files/uk/web/javascript/about_javascript/index.html b/files/uk/web/javascript/about_javascript/index.html deleted file mode 100644 index 430be4a307..0000000000 --- a/files/uk/web/javascript/about_javascript/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Про JavaScript -slug: Web/JavaScript/About_JavaScript -tags: - - JavaScript - - Вступ - - Початківець -translation_of: Web/JavaScript/About_JavaScript ---- -<div>{{JsSidebar}}</div> - -<h2 id="Що_таке_JavaScript">Що таке JavaScript?</h2> - -<p><strong>JavaScript</strong><sup>®</sup> (зазвичай скорочено <strong>JS</strong>) це легка, інтерпретована, об'єктно-орієнтована мова програмування з <a href="https://en.wikipedia.org/wiki/First-class_function" title="https://en.wikipedia.org/wiki/First-class_function">функціями першого класу</a>, що також відома як найкраща мова скриптів для веб-сторінок, проте також часто <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">використовувана в багатьох не-браузерних середовищах</a>. Це також <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">базована на прототипах</a>, мульти парадигмова динамічна мова скриптів, що підтримує об'єктно-орієнтовані, імперативні та функціональні стилі програмування.</p> - -<p>JavaScript працює на клієнтській стороні Вебу і може використовуватись для програмування поведінки сторінки відповідно до події, що на ній відбувається. JavaScript легка для вивчення, проте водночас це потужна мова скриптів, яка широко застосовується для контролю поведінки веб-сторінок.</p> - -<p>Contrary to popular misconception, <strong>JavaScript is <em>not</em> "Interpreted Java"</strong>. In a nutshell, JavaScript is a dynamic scripting language supporting <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages" title="en-US/docs/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">prototype based</a> object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as <code>if</code> statements, <code>for</code> and <code>while</code> loops, and <code>switch</code> and <code>try ... catch</code> blocks function the same as in these languages (or nearly so).</p> - -<p>JavaScript can function as both a <a class="external" href="https://en.wikipedia.org/wiki/Procedural_programming" title="https://en.wikipedia.org/wiki/Procedural_programming">procedural</a> and an <a class="external" href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">object oriented language</a>. Objects are created programmatically in JavaScript, by attaching methods and properties to otherwise empty objects <strong>at run time</strong>, as opposed to the syntactic class definitions common in compiled languages like C++ and Java. Once an object has been constructed it can be used as a blueprint (or prototype) for creating similar objects.</p> - -<p>JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" title="en-US/docs/JavaScript/Reference/Global_Functions/eval">eval</a></code>), object introspection (via <code>for ... in</code>), and source code recovery (JavaScript programs can decompile function bodies back into their source text).</p> - -<p>For a more in depth discussion of JavaScript programming follow the <a href="#JavaScript_resources">JavaScript resources</a> links below.</p> - -<h2 id="What_JavaScript_implementations_are_available">What JavaScript implementations are available?</h2> - -<p>The Mozilla project provides two JavaScript implementations. The first <strong>ever</strong> JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, is implemented in C/C++. The <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.</p> - -<p>Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.</p> - -<p>Besides the above implementations, there are other popular JavaScript engines such as:-</p> - -<ul> - <li>Google's <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a>, which is used in the Google Chrome browser and recent versions of Opera browser. This is also the engine used by <a href="http://nodejs.org">Node.js</a>.</li> - <li>The <a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) used in some WebKit browsers such as Apple Safari.</li> - <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> in old versions of Opera.</li> - <li>The <a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> engine used in Internet Explorer (although the language it implements is formally called "JScript" in order to avoid trademark issues).</li> -</ul> - -<p>Each of Mozilla's JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create <strong>host objects</strong> responsible for reflecting the <a class="external" href="http://www.w3.org/DOM/">DOM</a> into JavaScript.</p> - -<p>Another common application for JavaScript is as a (Web) server side scripting language. A JavaScript web server would expose host objects representing a HTTP request and response objects, which could then be manipulated by a JavaScript program to dynamically generate web pages. <a href="http://nodejs.org">Node.js</a> is a popular example of this.</p> - -<h2 id="JavaScript_resources">JavaScript resources</h2> - -<dl> - <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> - <dd>Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> - <dd>Information specific to the JavaScript implementation written in Java (aka Rhino).</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt> - <dd>Pointers to published JavaScript standards.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt> - <dd><a href="/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">JavaScript guide</a> and <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</dd> -</dl> - -<p>JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.</p> diff --git a/files/uk/web/javascript/closures/index.html b/files/uk/web/javascript/closures/index.html deleted file mode 100644 index 1abe835739..0000000000 --- a/files/uk/web/javascript/closures/index.html +++ /dev/null @@ -1,471 +0,0 @@ ---- -title: Closures -slug: Web/JavaScript/Closures -tags: - - Замикання -translation_of: Web/JavaScript/Closures ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<p class="summary">Замикання - це функції, що посилаються на незалежні (вільні) змінні (змінні, які використовуються локально, але визначені в обмеженій області видимості). Іншими словами, ці функції "пам'ятають" середовище, в якому вони були створені.</p> - -<h2 id="Лексичне_середовище">Лексичне середовище</h2> - -<p>Розглянемо наступне:</p> - -<div> -<pre class="brush: js notranslate">function init() { - var name = "Mozilla"; // name - це локальна змінна, створена в функції init - function displayName() { // displayName() - це внутрішня функція, замикання - alert(name); // використовує змінну, оголошену в батьківській функції - } - displayName(); -} -init();</pre> -</div> - -<p><code>init()</code> створює локальну змінну <code>name</code> та функцію <code>displayName()</code>. <code>displayName()</code> є вкладеною функцією, що оголошена всередині <code>init()</code> та є доступною тільки в тілі цієї функції. <code>displayName()</code> не має локальних змінних, проте вкладені функції мають доступ до змінних зовнішніх функцій саме тому <code>displayName()</code> може використовувати імена змінних, оголошених в батьківській функції <code>init()</code>.</p> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}</p> - -<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Запустіть</a> цей код і побачите, що alert() всередині функції displayName() успішно відображає змінну name, оголошену в батьківській функції. Це є прикладом лексичного середовища (lexical environment), яке описує, яким чином парсер звертається до змінних, коли функції вкладені. Слово <em>лексичне</em> посилається на факт, що лексичне середовище використовує розташування, де в коді була створена змінна задля визначення середовища, де ця змінна доступна. Вкладені функції мають доступ до змінних, оголошених у їх зовнішній області.</p> - -<h2 id="Замикання">Замикання</h2> - -<p>Тепер розглянемо наступний приклад:</p> - -<pre class="brush: js notranslate">function makeFunc() { - var name = "Mozilla"; - function displayName() { - alert(name); - } - return displayName; -} - -var myFunc = makeFunc(); -myFunc(); -</pre> - -<p>Результат запуску цього коду буде таким самим, як і в попередньому прикладі функції <code>init()</code>: рядок "Mozilla" буде відображений в спливаючому повідомленні <font face="consolas, Liberation Mono, courier, monospace">alert</font>(). Цікавою відмінністю є те, що внутрішня функція <code>displayName() </code>буде повернена з зовнішньої функції перш ніж вона буде виконана. </p> - -<p>Той факт, що цей код досі працює, може здаватись неочевидним. В деяких мовах програмування локальні змінні існують лише протягом часу виконання функції. Як тільки <code>makeFunc()</code> завершила своє виконання, слід очікувати, що змінна <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">name</span></font> не буде більше існувати. Однак у JavaScript цей підхід інакший, оскільки даний код працює, як і очікувалось.</p> - -<p>Це відбувається тому що ці функції в JavaScript утворюють замикання. <em>Замикання</em> це комбінація функції і лексичного середовища (або просто середовища), всередині якого функція була оголошена. Середовище складається з будь-яких локальних змінних, які були в області видимості в той час, коли замикання було створене. В цьому випадку, <code>myFunc</code> є посиланням на екземпляр функції <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">displayName</span></font> створений, коли <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">makeFunc</span></font> була виконана. Екземпляр <code>displayName</code> включає посилання на власне лексичне середовище в середині якого існує змінна <code>name</code>. З цієї причини, коли <code>myFunc</code> викликається, змінна <code>name</code> залишається доступною для використання і "Mozilla" передається до <code>alert</code>. </p> - -<p>Ось трохи цікавіший приклад — a <code>makeAdder</code> function:</p> - -<pre class="brush: js notranslate">function makeAdder(x) { - return function(y) { - return x + y; - }; -} - -var add5 = makeAdder(5); -var add10 = makeAdder(10); - -console.log(add5(2)); // 7 -console.log(add10(2)); // 12 -</pre> - -<p>У цьому прикладі ми визначили функцію <code>makeAdder(x),</code> яка приймає єдиний аргумент <code>x</code> і повертає нову функцію. Функція, яку вона повертає, приймає єдиний аргумент <code>y</code>, і повертає суму <code>x</code> і <code>y</code>.</p> - -<p>По суті, <code>makeAdder</code> це фабрика функцій — вона створює функції, які можуть додавати певне значення до свого аргументу. У наведеному вище прикладі ми використовуємо нашу фабричну функцію для створення двох нових функцій — одна додає 5 до свого аргументу, і інша додає 10.</p> - -<p><code>add5</code> і <code>add10</code> є прикладами замикання. Вони поділяють одне визначення тіла функції, але зберігають різні лексичні середовища. В лексичному середовищі <code>add5</code> <code>x</code> - це 5, а в лексичному середовищі <code>add10</code> <code>x</code>- це 10.</p> - -<h2 id="Замикання_на_практиці">Замикання на практиці</h2> - -<p>Замикання корисні, оскільки вони дозволяють зв'язати деякі дані (лексичне середовище) з функцією, яка працює з цими даними. Це має очевидні паралелі з об'єктно-орієнтованим програмуванням, де об'єкти дозволяють нам зв'язати деякі дані (властивості об'єкта) з одним або декількома методами.</p> - -<p>Отже, замикання можна використовувати всюди, де зазвичай використовується об'єкт з одним єдиним методом. </p> - -<p>Ситуації, в яких ви можливо захочете зробити це, особливо поширені в web-розробці. Велика частина front-end коду, написана на JavaScript, основана на обробці подій. Ви визначаєте деяку поведінку, а потім прикріплюєте її до події, яка запускається користувачем (наприклад, клік або натискання клавіші). Код, як правило, прив'язується до події як зворотній виклик <strong>(callback)</strong> - функція, яка виконується у відповідь на виникнення події.</p> - -<p>Наприклад припустимо, що ми хочемо додати кілька кнопок на сторінку, які змінюватимуть розмір тексту. Один із способів зробити це - вказати <code>font-size</code> елементу <code>body</code> у пікселях, а потім встановити розмір інших елементів на сторінці (таких як заголовки) за допомогою відносних одиниць виміру <code>em</code>:</p> - -<pre class="brush: css notranslate">body { - font-family: Helvetica, Arial, sans-serif; - font-size: 12px; -} - -h1 { - font-size: 1.5em; -} - -h2 { - font-size: 1.2em; -} -</pre> - -<p>Такі інтерактивні кнопки розміру тексту можуть змінювати властивість <code>font-size</code> елемента <code>body</code>, і налаштування будуть підхоплені іншими елементами на сторінці завдяки відносним одиницям.</p> - -<p>Ось JavaScript:</p> - -<pre class="brush: js notranslate">function makeSizer(size) { - return function() { - document.body.style.fontSize = size + 'px'; - }; -} - -var size12 = makeSizer(12); -var size14 = makeSizer(14); -var size16 = makeSizer(16); -</pre> - -<p> Тепер <code>size12</code>, <code>size14</code>, і <code>size16</code> є функціями, які будуть змінювати розмір тексту елемента body відповідно до 12, 14 та 16 пікселів. Ми можемо прив'язати їх до кнопок таким чином:</p> - -<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12; -document.getElementById('size-14').onclick = size14; -document.getElementById('size-16').onclick = size16; -</pre> - -<pre class="brush: html notranslate"><a href="#" id="size-12">12</a> -<a href="#" id="size-14">14</a> -<a href="#" id="size-16">16</a> -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p> - -<h2 id="Емуляція_приватних_методів_з_замиканнями">Емуляція приватних методів з замиканнями</h2> - -<p>В таких мовах як Java є можливість об'являти методи приватними, що означає їх здатність бути викликаними лише іншими методами того ж класу. </p> - -<p>JavaScript не має власного способу зробити це, але є можливість емуляції приватних методів використовуючи замикання. Приватні методи корисні не лише для обмеження доступу до коду: вони також забезпечують потужний спосіб управління глобальним простором імен, зберігаючи несуттєві методи від захаращення публічного інтерфейсу до вашого коду.</p> - -<p>Ось як визначити деякі загальнодоступні функції, які можуть отримати доступ до приватних функцій та змінних, використовуючи замикання, також відомі як модель модуля (<a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>).</p> - -<pre class="brush: js notranslate">var counter = (function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - }; -})(); - -console.log(counter.value()); // logs 0 -counter.increment(); -counter.increment(); -console.log(counter.value()); // logs 2 -counter.decrement(); -console.log(counter.value()); // logs 1 -</pre> - -<p>Тут багато чого відбувається. В попередніх пригладах кожне замикання мало своє власне оточення. Тут, однак, існує одне лексичне середовище, яке поділяють три функції: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p> - -<p>Спільне лексичне середовище створюється в тілі анонімної функції, яка викликається одразу після створення. Навколишнє середовище містить два приватні складові: змінну <code>privateCounter</code> і функцію <code>changeBy</code>. Жодна із цих приватних складових не може бути доступна безпосередньо за межами анонімної функції. Натомість до них мають бути доступні три загальнодоступні функції, які повертаються з анонімної обгортки.</p> - -<p>Ці три функції - це замикання, які мають одне і те ж середовище. Завдяки лексичному оточенню JavaScript, кожна з них має доступ до змінної privateCounter та функції changeBy.</p> - -<p>Ми визначаємо анонімну функцію, яка створює лічильник, а потім ми викликаємо її негайно і присвоюємо результат змінній лічильника.Ми можемо зберігати цю функцію в окремій змінній makeCounter і використовувати її для створення декількох лічильників</p> - -<pre class="brush: js notranslate">var makeCounter = function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - } -}; - -var counter1 = makeCounter(); -var counter2 = makeCounter(); -alert(counter1.value()); /* Alerts 0 */ -counter1.increment(); -counter1.increment(); -alert(counter1.value()); /* Alerts 2 */ -counter1.decrement(); -alert(counter1.value()); /* Alerts 1 */ -alert(counter2.value()); /* Alerts 0 */ -</pre> - -<p>Зауважте, як кожен з двох лічильників підтримує свою незалежність від іншого. Його середовище під час виклику функції makeCounter () щоразу відрізняється. Змінна замикання privateCounter містить кожен раз інший екземпляр.</p> - -<p>Використання замикання таким чином забезпечує ряд переваг, які зазвичай пов'язані з об'єктно-орієнтованим програмуванням, зокрема приховування даних та інкапсуляція.</p> - -<h2 id="Ланцюжок_замикань">Ланцюжок замикань</h2> - -<p>Кожне замикання має три оточення:</p> - -<ul> - <li>Local Scope (власне оточення)</li> - <li>Outer Functions Scope (зовнішнє функціональне оточення)</li> - <li>Global Scope (глобальне оточення)</li> -</ul> - -<p>Поширеною помилкою є не усвідомлення того, що у випадку, коли зовнішня функція сама є вкладеною функцією, доступ до оточення її зовнішньої функції включає вкладене оточення її як зовнішньої функції - ефективно створюючи ланцюг областей оточення. Для демонстрації розглянемо наступний приклад коду.</p> - -<pre class="notranslate">// global scope -var e = 10; -function sum(a){ - return function(b){ - return function(c){ - // outer functions scope - return function(d){ - // local scope - return a + b + c + d + e; - } - } - } -} - -console.log(sum(1)(2)(3)(4)); // log 20 - -// You can also write without anonymous functions: - -// global scope -var e = 10; -function sum(a){ - return function sum2(b){ - return function sum3(c){ - // outer functions scope - return function sum4(d){ - // local scope - return a + b + c + d + e; - } - } - } -} - -var s = sum(1); -var s1 = s(2); -var s2 = s1(3); -var s3 = s2(4); -console.log(s3) //log 20 -</pre> - -<p>У наведеному вище прикладі є низка вкладених функцій, всі з яких мають доступ до області оточення зовнішніх функцій. У цьому контексті можна сказати, що замикання мають доступ до всіх зовнішніх областей функцій.</p> - -<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2> - -<p>До введення ключового слова let у ECMAScript 2015, загальна проблема із замиканням виникала, коли вони створювалися всередині циклу. Розглянемо наступний приклад: </p> - -<pre class="brush: html notranslate"><p id="help">Helpful notes will appear here</p> -<p>E-mail: <input type="text" id="email" name="email"></p> -<p>Name: <input type="text" id="name" name="name"></p> -<p>Age: <input type="text" id="age" name="age"></p> -</pre> - -<pre class="brush: js notranslate">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p> - -<p>Масив helpText визначає три корисні підказки, кожну пов'язану з ID поля Input. Цикл циклично перераховує ці визначення, підключаючи подію onfocus до кожного, що показує пов'язаний метод help.</p> - -<p>Якщо ви спробуєте цей код, ви побачите, що він не працює, як очікувалося. Незалежно від того, на якому полі ви зосереджені, відображатиметься повідомлення про ваш вік.</p> - -<p>Причиною цього є те, що функції, призначені для фокусування, - це замикання; вони складаються з визначення функції та захопленого оточення з області видимосты функцій setupHelp. Три замикання були створені циклом, але кожне ділиться тим самим єдиним середовищем, яке має змінну зі змінними значеннями (item.help).</p> - -<p>Коли виконуються зворотні виклики onfocus, доступ до item.help в цей момент викликає таку поведінку (дійсно, оскільки значення змінної доступно / обчислюється лише під час виконання), оскільки цикл до цього часу виконувався, а об'єкт змінної елемента (розділений усіма трьома замиканнями) був залишений, вказуючи на останній запис у списку довідкового тексту.</p> - -<p>Одне рішення в цьому випадку - використовувати більше замикань: зокрема, використовувати фабрику функцій, як описано раніше:</p> - -<pre class="brush: js notranslate">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function makeHelpCallback(help) { - return function() { - showHelp(help); - }; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = makeHelpCallback(item.help); - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p> - -<p>Це працює як очікувалося. Замість того, щоб зворотні виклики мали спільний доступ до одного середовища, функція makeHelpCallback створює нове середовище для кожного з них, в якій довідка посилається на відповідний рядок із масиву helpText.</p> - -<p>Ще один спосіб написати вищезгадане - використання анонімних замикань:</p> - -<pre class="brush: js notranslate">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - (function() { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - })(); // Immediate event listener attachment with the current value of item (preserved until iteration). - } -} - -setupHelp();</pre> - -<p>Якщо ви не хочете більше використовувати замикання, можете скористатися ключовим словом let з ES6:</p> - -<pre class="brush: js notranslate">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - let item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp();</pre> - -<p>Цей приклад використовує let замість var, таким чином кожне замикання прив'язує блочну змінну,це означає, що додаткові замикання не потрібні.</p> - -<p>Іншою альтернативою може бути використання forEach () для повторення масиву helpText та приєднання слухача до кожного <p>, як показано:</p> - -<pre class="notranslate">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - helpText.forEach(function(text) { - document.getElementById(text.id).onfocus = function() { - showHelp(text.help); - } - }); -} - -setupHelp(); -</pre> - -<h2 id="Performance_considerations">Performance considerations</h2> - -<p>Нерозумно створювати функції в межах інших функцій, якщо замикання не потрібне для конкретного завдання, оскільки це негативно вплине на продуктивність сценарію як з точки зору швидкості обробки, так і споживання пам'яті.</p> - -<p>Наприклад, при створенні нового об'єкта / класу методи, як правило, повинні бути пов'язані з прототипом об'єкта, а не визначені в конструкторі об'єктів. Причина полягає в тому, що щоразу, коли конструктор викликається, методи отримують перепризначення (тобто для кожного створення об'єкта).</p> - -<p>Розглянемо наступний непрактичний, але показовий випадок:</p> - -<pre class="brush: js notranslate">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); - this.getName = function() { - return this.name; - }; - - this.getMessage = function() { - return this.message; - }; -} -</pre> - -<p>Попередній код не використовує переваги замикань, а тому може виглядати:</p> - -<pre class="brush: js notranslate">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype = { - getName: function() { - return this.name; - }, - getMessage: function() { - return this.message; - } -}; -</pre> - -<p>Однак переробляти прототип не рекомендується, тому наступний приклад ще кращий, оскільки він додається до існуючого прототипу:</p> - -<pre class="brush: js notranslate">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype.getName = function() { - return this.name; -}; -MyObject.prototype.getMessage = function() { - return this.message; -}; -</pre> - -<p>Код вище також може бути записаний чистіше з тим же результатом:</p> - -<pre class="brush: js notranslate">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -(function() { - this.getName = function() { - return this.name; - }; - this.getMessage = function() { - return this.message; - }; -}).call(MyObject.prototype); -</pre> - -<p>In the three previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details. У трьох попередніх прикладах успадкований прототип може бути спільним для всіх об'єктів, і визначення методів не повинно виникати при кожному створенні об'єкта. Докладніше див. Деталі Об'єктної Моделі (<a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a>).</p> diff --git a/files/uk/web/javascript/data_structures/index.html b/files/uk/web/javascript/data_structures/index.html deleted file mode 100644 index ae52c4dbdc..0000000000 --- a/files/uk/web/javascript/data_structures/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Типи та структури даних у JavaScript -slug: Web/JavaScript/Data_structures -tags: - - JavaScript - - Types -translation_of: Web/JavaScript/Data_structures ---- -<div>{{jsSidebar("More")}}</div> - -<p>Усі мови програмування мають вбудовані структури даних, які, втім, у різних мовах дещо відрізняються. У цій статті ми розглянемо наявні у JavaScript структури даних та їх властивості, а також створення на їх основі інших структур. За можливості наведемо порівняння з іншими мовами.</p> - -<h2 id="Динамічна_типізація">Динамічна типізація</h2> - -<p>JavaScript є мовою з <em>нестрогою типізацією </em>або ж <em>динамічною мовою</em>. Оголошення змінної в JavaScript не визначає типу даних, а отже всяка змінна з отриманням нового значення отримує і новий тип. Звідси випливає, що тип з'ясовується перед виконанням певної операції, позаяк від нього залежить і результат:</p> - -<pre class="brush: js">// Одразу по оголошенню змінна foo разом з початковим значенням отримує тип Number -var foo = 42; - -console.log(foo + 1); // виводить 43 - -// Змінна отримує нове значення й тепер має тип String -foo = 'bar'; - -console.log(foo + 1); // виводить "bar1" - -// Разом із значенням true тип змінної foo обертається на Boolean -foo = true; -</pre> - -<h2 id="Типи_даних">Типи даних</h2> - -<p>Згідно з останнім стандартом ECMAScript у мові є сім типів даних:</p> - -<ul> - <li>Шість типів даних, що є {{Glossary("Primitive", "простими величинами")}}: - <ul> - <li>{{Glossary("Boolean", "Boolean (логічний тип даних)")}}</li> - <li>{{Glossary("Null")}}</li> - <li>{{Glossary("Undefined")}}</li> - <li>{{Glossary("Number", "Number (Число)")}}</li> - <li>{{Glossary("String", "String (Рядок)")}}</li> - <li>{{Glossary("Symbol", "Symbol (Символ)")}} (новий тип з ECMAScript 6)</li> - </ul> - </li> - <li>та {{Glossary("Object")}}</li> -</ul> - -<h2 id="Прості_величини">Прості величини</h2> - -<p>Усі типи даних, окрім об'єкта, передають незмінювані величини (можна встановити нове значення змінної, але неможливо змінити того значення, яке вона вже має). На відміну від, наприклад, мови C, рядки є незмінюваними. Такі величини називають {{Glossary("Primitive", "простими")}} або «примітивними».</p> - -<h3 id="Тип_boolean">Тип boolean</h3> - -<p>Тип Boolean передає два логічних значення: <code>true</code> та <code>false</code>.</p> - -<h3 id="Тип_null">Тип null</h3> - -<p>Тип Null, власне, передає лише одне-єдине значення: <code>null</code>. Див. також {{jsxref("null")}} та {{Glossary("Null")}}.</p> - -<h3 id="Тип_undefined">Тип undefined</h3> - -<p>Змінна, допоки не отримає нового (початкового), має значення <code>undefined</code>. Див. також {{jsxref("Global_Objects/undefined", "undefined")}} та {{Glossary("Undefined")}}.</p> - -<h3 id="Тип_number">Тип number</h3> - -<p>Відповідно до стандарту ECMAScript, існує лише один тип чисел: <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">64-розрядне число подвійної точності з рухомою комою в форматі IEEE 754</a> (приймає значення від -(2<sup>53</sup> -1) до 2<sup>53</sup> -1). Для цілих чисел немає окремого типу даних. Окрім чисел з рухомою комою цей формат підтримує три особливих значення: <code>+Infinity</code>, <code>-Infinity</code> та {{jsxref("Global_Objects/NaN", "NaN")}} (так зване «не число»).</p> - -<p>To check for the largest available value or smallest available value within <code>+/-Infinity</code>, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}} and starting with ECMAScript 6, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> - -<p>The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> - -<pre class="brush: js">> 42 / +0 -Infinity -> 42 / -0 --Infinity -</pre> - -<p>Although a number often represents only its value, JavaScript provides <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">some binary operators</a>. These can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.</p> - -<h3 id="Тип_string">Тип string</h3> - -<p>JavaScript's {{jsxref("Global_Objects/String", "String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.</p> - -<p>Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string. For example:</p> - -<ul> - <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> - <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> -</ul> - -<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> - -<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> - -<ul> - <li>It is easy to build complex strings with concatenation.</li> - <li>Strings are easy to debug (what you see printed is always what is in the string).</li> - <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, {{ domxref("XMLHttpRequest") }} responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> -</ul> - -<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> - -<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> - -<h3 id="Тип_symbol">Тип symbol</h3> - -<p>Symbols are new to JavaScript in ECMAScript Edition 6. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> - -<h2 id="Об'єкти">Об'єкти</h2> - -<p>In computer science, an object is a value in memory which is possibly referenced by an {{Glossary("Identifier", "identifier")}}.</p> - -<h3 id="Properties">Properties</h3> - -<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.</p> - -<p>There are two types of object properties which have certain attributes: The data property and the accessor property.</p> - -<h4 id="Data_property">Data property</h4> - -<p>Associates a key with a value and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of a data property</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - <th>Default value</th> - </tr> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property's [[Value]] can't be changed.</td> - <td>false</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted and attributes other than [[Value]] and [[Writable]] can't be changed.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - </tr> - <tr> - <td>Read-only</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Writable]] attribute.</td> - </tr> - <tr> - <td>DontEnum</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> - </tr> - <tr> - <td>DontDelete</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Configurable]] attribute.</td> - </tr> - </tbody> -</table> - -<h4 id="Accessor_property">Accessor property</h4> - -<p>Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of an accessor property</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - <th>Default value</th> - </tr> - <tr> - <td>[[Get]]</td> - <td>Function object or undefined</td> - <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function object or undefined</td> - <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it(see more about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>).That's why the attribute is put in double square brackets instead of single.</p> -</div> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> - -<p>Functions are regular objects with the additional capability of being callable.</p> - -<h3 id="Dates">Dates</h3> - -<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> - -<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> - -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript Edition 6 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p> - -<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p> - -<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> - -<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> - -<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p> - -<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p> - -<h3 id="Structured_data_JSON">Structured data: JSON</h3> - -<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p> - -<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> - -<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> - -<h2 id="З'ясування_типу_за_допомогою_оператора_typeof">З'ясування типу за допомогою оператора <code>typeof</code></h2> - -<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Первинне визначення.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> - <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> -</ul> diff --git a/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html deleted file mode 100644 index b176c24495..0000000000 --- a/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Перелічуваність та належність властивостей -slug: Web/JavaScript/Enumerability_and_ownership_of_properties -tags: - - JavaScript - - Посібник -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -<div>{{JsSidebar("More")}}</div> - -<p>Перелічуваними називаються властивості, чий внутрішній прапор перелічуваності має значення true, що є значенням за замовчуванням для властивостей, створених простим присвоєнням або за допомогою ініціалізатора властивості (властивості, визначені за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> та подібного, за замовчуванням мають значення перелічуваності false). Перелічувані властивості з'являються у циклах <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>, якщо тільки ключ властивості не є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol">символом</a>. Належність властивостей визначається тим, чи належить властивість безпосередньо до об'єкта, а не до його ланцюга прототипів. Властивості об'єкта також можна отримати всі загалом. Існують численні вбудовані засоби виявлення, перебору/переліку та отримання властивостей об'єкта, а у таблиці нижче наведено, які з них є доступними. Далі наведено зразок коду, який демонструє, як отримати відсутні категорії.</p> - -<div style="overflow: auto; width: 100%;"> -<table> - <caption>Перелічуваність та належність властивостей - вбудовані методи виявлення, отримання та перебору</caption> - <tbody> - <tr> - <th>Функціональність</th> - <th>Власний об'єкт</th> - <th>Власний об'єкт та його ланцюг прототипів</th> - <th>Лише ланцюг прототипів</th> - </tr> - <tr> - <td>Виявлення</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Перелічувані</th> - <th scope="col">Неперелічувані</th> - <th scope="col">Перелічувані та неперелічувані</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p> - </td> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - </td> - <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Перелічувані</th> - <th scope="col">Неперелічувані</th> - <th scope="col">Перелічувані та неперелічувані</th> - </tr> - </thead> - <tbody> - <tr> - <td>Недоступні без додаткового коду</td> - <td>Недоступні без додаткового коду</td> - <td><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td> - </tr> - </tbody> - </table> - </td> - <td>Недоступні без додаткового коду</td> - </tr> - <tr> - <td>Отримання</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Перелічувані</th> - <th scope="col">Неперелічувані</th> - <th scope="col">Перелічувані та неперелічувані</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td>Недоступні без додаткового коду</td> - <td>Недоступні без додаткового коду</td> - </tr> - <tr> - <td>Перебір</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Перелічувані</th> - <th scope="col">Неперелічувані</th> - <th scope="col">Перелічувані та неперелічувані</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Перелічувані</th> - <th scope="col">Неперелічувані</th> - <th scope="col">Перелічувані та неперелічувані</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p> - - <p>(за винятком символів)</p> - </td> - <td>Недоступні без додаткового коду</td> - <td>Недоступні без додаткового коду</td> - </tr> - </tbody> - </table> - </td> - <td>Недоступні без додаткового коду</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Отримання_властивостей_за_перелічуваністюналежністю">Отримання властивостей за перелічуваністю/належністю</h2> - -<p>Зауважте, що це не найефективніший алгоритм для усіх випадків, але він корисний для швидкої демонстрації.</p> - -<ul> - <li>Виявлення може відбуватись через <code>SimplePropertyRetriever.методЯкийВамПотрібен(obj).indexOf(prop) > -1</code></li> - <li>Перебір може відбуватись через <code>SimplePropertyRetriever.методЯкийВамПотрібен(obj).forEach(function (value, prop) {});</code> (або скористайтесь <code>filter()</code>, <code>map()</code> і т. д.)</li> -</ul> - -<pre class="brush: js notranslate">var SimplePropertyRetriever = { - getOwnEnumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerable); - // Або скористайтесь for..in, відфільтрувавши методом hasOwnProperty, або просто цим: return Object.keys(obj); - }, - getOwnNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._notEnumerable); - }, - getOwnEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); - // Або просто скористайтесь: return Object.getOwnPropertyNames(obj); - }, - getPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerable); - }, - getPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._notEnumerable); - }, - getPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); - }, - getOwnAndPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerable); - // Або можна використати невідфільтрований результат for..in - }, - getOwnAndPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._notEnumerable); - }, - getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); - }, - // Приватні статичні фукнції зворотного виклику для перевірки властивостей - _enumerable: function(obj, prop) { - return obj.propertyIsEnumerable(prop); - }, - _notEnumerable: function(obj, prop) { - return !obj.propertyIsEnumerable(prop); - }, - _enumerableAndNotEnumerable: function(obj, prop) { - return true; - }, - // Натхненний http://stackoverflow.com/a/8024294/271577 - _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { - var props = []; - - do { - if (iterateSelfBool) { - Object.getOwnPropertyNames(obj).forEach(function(prop) { - if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { - props.push(prop); - } - }); - } - if (!iteratePrototypeBool) { - break; - } - iterateSelfBool = true; - } while (obj = Object.getPrototypeOf(obj)); - - return props; - } -};</pre> - -<h2 id="Таблиця_виявлення">Таблиця виявлення</h2> - -<div style="overflow: auto; width: 100%;"> -<table> - <thead> - <tr> - <th scope="row"></th> - <th scope="col"><code>in</code></th> - <th scope="col"><code>for..in</code></th> - <th scope="col"><code>obj.hasOwnProperty</code></th> - <th scope="col"><code>obj.propertyIsEnumerable</code></th> - <th scope="col"><code>Object.keys</code></th> - <th scope="col"><code>Object.getOwnPropertyNames</code></th> - <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th> - <th scope="col"><code>Reflect.ownKeys()</code></th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Перелічувані</th> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Неперелічувані</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Символи</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Успадковані перелічувані</th> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Успадковані неперелічувані</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Успадковані символи</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li> - <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li> - <li>{{jsxref("Object.hasOwnProperty()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li> -</ul> diff --git a/files/uk/web/javascript/equality_comparisons_and_sameness/index.html b/files/uk/web/javascript/equality_comparisons_and_sameness/index.html deleted file mode 100644 index 67aeef4ef7..0000000000 --- a/files/uk/web/javascript/equality_comparisons_and_sameness/index.html +++ /dev/null @@ -1,495 +0,0 @@ ---- -title: Перевірка на рівність та однаковість -slug: Web/JavaScript/Equality_comparisons_and_sameness -tags: - - JavaScript - - NaN - - SameValue - - SameValueZero - - Однаковість - - Рівність - - Тотожність - - порівняння -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -original_slug: Web/JavaScript/Перевірка_на_рівність_та_однаковість ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<p>У ES2015 існує чотири алгоритми рівності:</p> - -<ul> - <li>Абстрактна рівність (<code>==</code>);</li> - <li>Строга рівність (<code>===</code>): вживається у методах <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code> та у блоках <code>case</code>;</li> - <li>SameValueZero (однакове значення або нуль): вживається конструкторами {{jsxref("Global_Objects/TypedArray", "типізованих масивів")}} та {{jsxref("Global_Objects/ArrayBuffer", "ArrayBuffer")}}, так само, як і операціями з {{jsxref("Global_Objects/Map", "Map")}} та {{jsxref("Global_Objects/Set", "Set")}}, а також методами <code>String.prototype.includes</code> та <code>Array.prototype.includes</code>, починаючи з ES2016;</li> - <li>SameValue (однакове значення): вживається у решті випадків.</li> -</ul> - -<p>JavaScript надає три різні операції порівняння значень:</p> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()">===</a> - Строга рівність ("ідентичність", "потрійне дорівнює")</li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність_()">==</a> - Абстрактна рівність ("нестрога рівність", "подвійне дорівнює")</li> - <li>метод {{jsxref("Object.is")}} реалізує SameValue (нове у ES2015).</li> -</ul> - -<p>Вибір оператора залежитиме від того, який різновид порівняння вам потрібен. Коротко:</p> - -<ul> - <li>подвійне дорівнює (<code>==</code>) виконає приведення типів при порівнянні двох величин, і оброблятиме <code>NaN</code>, <code>-0</code> та <code>+0</code> особливим чином, у відповідності з IEEE 754 (тому <code>NaN != NaN</code>, а <code>-0 == +0</code>);</li> - <li>потрійне дорівнює (<code>===</code>) виконує таке саме порівняння, як і подвійне дорівнює (і так само поводиться з <code>NaN</code>, <code>-0</code> та <code>+0</code>), але без приведення типів; якщо типи величин відрізняються, повертається <code>false</code>.</li> - <li><code>Object.is</code> не виконує приведення типів та не обробляє <code>NaN</code>, <code>-0</code> та <code>+0</code> особливим чином (має таку саму поведінку, як і <code>===</code>, за винятком цих спеціальних числових значень).</li> -</ul> - -<p>Зауважте, що усі відмінності операторів стосуються їхнього поводження з простими величинами; жоден з них не порівнює, чи є параметри концептуально однаковими за структурою. Для будь-яких не примітивних об'єктів <code>x</code> та <code>y</code>, що мають однакову структуру, але є двома окремими об'єктами, всі вищенаведені форми порівняння вертатимуть <code>false</code>.</p> - -<h2 id="Строга_рівність_за_допомогою">Строга рівність за допомогою <code>===</code></h2> - -<p>Строга рівність перевіряє рівність двох значень. До жодного з них не застосовується неявне приведення перед порівнянням. Якщо значення мають різні типи, вони вважаються нерівними. Якщо значення мають однаковий тип, не є числами, і мають однакові значення, вони вважаються рівними. Нарешті, якщо обидва значення є числами, вони вважаються рівними, якщо обидва не дорівнюють <code>NaN</code> та мають однакові значення, або якщо одне дорівнює <code>+0</code>, а інше <code>-0</code>.</p> - -<pre class="brush: js">var num = 0; -var obj = new String('0'); -var str = '0'; - -console.log(num === num); // true -console.log(obj === obj); // true -console.log(str === str); // true - -console.log(num === obj); // false -console.log(num === str); // false -console.log(obj === str); // false -console.log(null === undefined); // false -console.log(obj === null); // false -console.log(obj === undefined); // false -</pre> - -<p>Строга рівність майже завжди є доречною операцією порівняння. Для усіх значень, крім чисел, вона використовує очевидну семантику: значення дорівнює лише самому собі. Для чисел вона використовує трохи відмінну семантику, щоб згладити два граничні випадки. Перший полягає в тому, що нуль з рухомою комою є або додатним, або від'ємним. Це корисно для представлення деяких математичних рішень, але, оскільки у більшості ситуацій різниця між <code>+0</code> та <code>-0</code> не має значення, строга рівність вважає їх одним значенням. Другий випадок полягає в тому, що рухома кома містить концепцію не числа, <code>NaN</code> (not a number), для вирішення деяких нечітко визначених математичних проблем: наприклад, від'ємна нескінченність, додана до позитивної нескінченності. Строга рівність вважає значення <code>NaN</code> нерівним будь-якій іншій величині, в тому числі самому собі. (Єдиний випадок, у якому <code>(x !== x)</code> дорівнює <code>true</code>, це коли <code>x</code> дорівнює <code>NaN</code>.)</p> - -<h2 id="Нестрога_рівність_за_допомогою">Нестрога рівність за допомогою ==</h2> - -<p>Нестрога рівність порівнює два значення <em>після</em> приведення обох значень до спільного типу. Після приведення (один чи обидва значення можуть зазнати перетворення), фінальне порівняння виконується так само, як його виконує оператор <code>===</code>. Нестрога рівність є <em>симетричною</em>: вираз <code>A == B</code> за семантикою завжди ідентичний <code>B == A</code> для будь-яких значень <code>A</code> та <code>B</code> (за винятком порядку, в якому виконуються перетворення).</p> - -<p>Порівняльна операція виконується наступним чином для операндів різних типів:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"></th> - <th colspan="7" scope="col" style="text-align: center;">Операнд B</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"></th> - <td></td> - <td style="text-align: center;">Undefined</td> - <td style="text-align: center;">Null</td> - <td style="text-align: center;">Number</td> - <td style="text-align: center;">String</td> - <td style="text-align: center;">Boolean</td> - <td style="text-align: center;">Object</td> - </tr> - <tr> - <th colspan="1" rowspan="6" scope="row">Операнд A</th> - <td>Undefined</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Null</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Number</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>String</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Boolean</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Object</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - </tr> - </tbody> -</table> - -<p>У наведеній вище таблиці <code>ToNumber(A)</code> пробує перетворити свій аргумент на число перед порівнянням. Його поведінка еквівалентна операції <code>+A</code> (унарний оператор +). <code>ToPrimitive(A)</code> пробує перетворити свій аргумент-об'єкт на просту величину, викликаючи в різній послідовності методи <code>A.toString</code> та <code>A.valueOf</code> на операнді <code>A</code>.</p> - -<p>Традиційно, та згідно з ECMAScript, усі об'єкти нестрого нерівні <code>undefined</code> та <code>null</code>. Але більшість переглядачів дозволяють дуже вузькому класу об'єктів (зокрема, об'єкту <code>document.all</code> на будь-якій сторінці) у певному контексті поводитись, як наче вони <em>емулюють</em> значення <code>undefined</code>. Нестрога рівність у такому контексті: <code>null == A</code> та <code>undefined == A</code> оцінить як true тільки за умови, що A є об'єктом, який <em>емулює</em> <code>undefined</code>. У всіх інших випадках об'єкт ніколи не є нестрого рівним <code>undefined</code> або <code>null</code>.</p> - -<pre class="brush: js">var num = 0; -var obj = new String('0'); -var str = '0'; - -console.log(num == num); // true -console.log(obj == obj); // true -console.log(str == str); // true - -console.log(num == obj); // true -console.log(num == str); // true -console.log(obj == str); // true -console.log(null == undefined); // true - -// обидва дорівнюють false, крім виняткових випадків -console.log(obj == null); -console.log(obj == undefined); -</pre> - -<p>Деякі розробники вважають, що краще ніколи не використовувати нестрогу рівність. Результат порівняння за допомогою строгої рівності легше передбачити, а, оскільки жодного приведення типів не виконується, обчислення може відбуватись швидше.</p> - -<h2 id="Порівняння_за_алгоритмом_same-value">Порівняння за алгоритмом same-value</h2> - -<p>Порівняння same-value (однакове значення) спрямоване на останній випадок використання: визначення того, чи є два значення <em>функціонально ідентичними</em> в усіх контекстах. (Цей випадок використання демонструє приклад <a href="https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF_%D0%BF%D1%96%D0%B4%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B8_%D0%9B%D1%96%D1%81%D0%BA%D0%BE%D0%B2" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">принципу підстановки Лісков</a>.) Один приклад виникає, коли робиться спроба змінити незмінну властивість:</p> - -<pre class="brush: js">// Додати незмінну властивість NEGATIVE_ZERO у конструктор Number. -Object.defineProperty(Number, 'NEGATIVE_ZERO', - { value: -0, writable: false, configurable: false, enumerable: false }); - -function attemptMutation(v) { - Object.defineProperty(Number, 'NEGATIVE_ZERO', { value: v }); -} -</pre> - -<p><code>Object.defineProperty</code> викине виняток, коли спроба змінити незмінну властивість дійсно змінить її, але нічого не зробить, якщо не робиться запитів на реальну зміну. Якщо <code>v</code> дорівнює <code>-0</code>, запитів на зміну не виконувалось, жодна помилка не буде викинута. Внутрішньо, коли перевизначається незмінна властивість, нове значення порівнюється з наявним значенням за допомогою алгоритму same-value.</p> - -<p>Алгоритм same-value надається методом {{jsxref("Object.is")}}.</p> - -<h2 id="Порівняння_за_алгоритмом_same-value-zero">Порівняння за алгоритмом same-value-zero</h2> - -<p>Схожий на алгоритм same-value, але вважає +0 та -0 рівними.</p> - -<h2 id="Абстрактна_рівність_строга_рівність_та_однакове_значення_у_специфікації">Абстрактна рівність, строга рівність та однакове значення у специфікації</h2> - -<p>У ES5 порівняння, що виконується за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a>, описане у <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Розділі 11.9.3, Алгоритм абстрактної рівності</a>. Порівняння <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> у <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, Алгоритм строгої рівності</a>. (Сходіть почитайте. Вони короткі та легкі для читання. Підказка: читайте спочатку алгоритм строгої рівності.) ES5 також описує, у <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Розділі 9.12, Алгоритм SameValue</a>, для внутрішнього використання рушієм JS. Він значною мірою такий самий, як алгоритм строгої рівності, за винятком того, як 11.9.6.4 та 9.12.4 відрізняються у поводженні з {{jsxref("Number","числами")}}. ES2015 просто відкриває цей алгоритм через {{jsxref("Object.is")}}.</p> - -<p>Щодо подвійного та потрійного дорівнює, можна побачити, що, за винятком попередньої перевірки типу у 11.9.6.1, алгоритм строгої рівності є підмножиною алгоритму абстрактної рівності, бо 11.9.6.2–7 відповідають 11.9.3.1.a–f.</p> - -<h2 id="Модель_для_розуміння_порівняльних_алгоритмів">Модель для розуміння порівняльних алгоритмів?</h2> - -<p>До ES2015 ви, можливо, сказали б щодо подвійного та потрійного дорівнює, що один є "посиленою" версією іншого. Наприклад, хтось може сказати, що подвійне дорівнює є посиленою версією потрійного дорвінює, тому що перше робить усе, що робить друге, але з приведенням типів у операндах. Наприклад, <code>6 == "6"</code>. (Альтернативно, хтось може сказати, що подвійне дорівнює є основою, а потрійне дорівнює є посиленою версією, тому що воно вимагає, щоб два операнди були однакового типу, і таким чином, вводить додаткове обмеження. Яка модель краща для розуміння, залежить від того, яким чином ви розглядаєте питання.)</p> - -<p>Однак, така модель вбудованих операторів однаковості не може бути поширена на ES2015 з включенням у свій "діапазон" методу {{jsxref("Object.is")}}. Метод {{jsxref("Object.is")}} не просто "абстрактніший", ніж подвійне, або "суворіший", ніж потрійне дорівнює, він також не вписується десь посередині (тобто, будучи одночасно суворішим за подвійне дорівнює, але менш строгим за потрійне дорівнює). Як можна побачити з наведеної нижче порівняльної таблиці, все через поводження {{jsxref("Object.is")}} з {{jsxref("NaN")}}. Зверніть увагу, що, якби значення <code>Object.is(NaN, NaN)</code> дорівнювало <code>false</code>, ми <em>могли б</em> сказати, що метод вписується у абстрактно-суворий діапазон як ще суворіший за потрійне дорівнює, такий, що розрізняє <code>-0</code> та <code>+0</code>. Однак, його поводження з {{jsxref("NaN")}} означає, що це не так. На жаль, {{jsxref("Object.is")}} просто має сприйматись з точки зору його особливих характеристик, а не його абстрактності чи суворості у порівнянні з операторами рівності.</p> - -<table class="standard-table" style="height: 944px; width: 892px;"> - <caption>Порівняльні алгоритми</caption> - <thead> - <tr> - <th scope="col" style="text-align: center;">x</th> - <th scope="col" style="text-align: center;">y</th> - <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>SameValueZero</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>undefined</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>true</code></td> - <td><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>false</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>'foo'</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>-0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>-0</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>'0'</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>'17'</code></td> - <td><code>17</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>[1, 2]</code></td> - <td><code>'1,2'</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>'foo'</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>undefined</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>{ foo: 'bar' }</code></td> - <td><code>{ foo: 'bar' }</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>new String('foo')</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>NaN</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - </tbody> -</table> - -<h2 id="Коли_використовувати_jsxrefObject.is_та_потрійне_дорівнює">Коли використовувати {{jsxref("Object.is")}} та потрійне дорівнює</h2> - -<p>Загалом, єдиний випадок, коли особлива поведінка {{jsxref("Object.is")}} щодо нулів може становити інтерес, це впровадження певних схем метапрограмування, особливо тих, що стосуються дескрипторів властивостей, коли бажано, щоб ваша робота відображала певні характеристики {{jsxref("Object.defineProperty")}}. Якщо ваш випадок цього не вимагає, пропонується уникати {{jsxref("Object.is")}} та використовувати натомість <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a>. Навіть якщо у вашому випадку вимагається, щоб порівняння двох {{jsxref("NaN")}} повертало <code>true</code>, загалом, легше перевіряти {{jsxref("NaN")}} окремо (за допомогою методу {{jsxref("isNaN")}}, доступного у попередніх версіях ECMAScript), ніж розбиратися, як навколишні обчислення можуть вплинути на знаки нулів, які зустрінуться вам у порівняннях.</p> - -<p>Ось невичерпний список вбудованих методів та операцій, що можуть спричинити відмінності між <code>-0</code> та <code>+0</code>, які можуть проявити себе у коді:</p> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation"><code>- (унарний мінус)</code></a></dt> -</dl> - -<dl> - <dd> - <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity;</pre> - - <p>Якщо <code>obj.velocity</code> дорівнює <code>0</code> (або обчислюється як <code>0</code>), в цьому місці отримуємо <code>-0</code>, який переходить далі у <code>stoppingForce</code>.</p> - </dd> -</dl> - -<dl> - <dt>{{jsxref("Math.atan2")}}</dt> - <dt>{{jsxref("Math.ceil")}}</dt> - <dt>{{jsxref("Math.pow")}}</dt> - <dt>{{jsxref("Math.заокругелння","Math.round")}}</dt> -</dl> - -<dl> - <dd>У деяких випадках <code>-0</code> може потрапити у вираз як результат одного з цих методів, навіть коли жоден параметр не дорівнює <code>-0</code>. Наприклад, при використанні {{jsxref("Math.pow")}} для піднесення {{jsxref("Infinity", "-Infinity")}} до будь-якого від'ємного непарного степеня, отримуємо <code>-0</code>. Звертайтесь до документації щодо окремих методів.</dd> -</dl> - -<dl> - <dt>{{jsxref("Math.floor")}}</dt> - <dt>{{jsxref("Math.max")}}</dt> - <dt>{{jsxref("Math.min")}}</dt> - <dt>{{jsxref("Math.sin")}}</dt> - <dt>{{jsxref("Math.sqrt")}}</dt> - <dt>{{jsxref("Math.tan")}}</dt> -</dl> - -<dl> - <dd>Можливо отримати <code>-0</code> як результат виконання даних методів у певних випадках, коли <code>-0</code> присутній як один з параметрів. Наприклад, <code>Math.min(-0, +0)</code> повертає <code>-0</code>. Звертайтесь до документації щодо окремих методів.</dd> -</dl> - -<dl> - <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_НЕ" title="Побітове НЕ">~</a></code></dt> - <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#<<_Лівий_зсув" title="Лівий зсув"><<</a></code></dt> - <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку" title="Правий зсув з розширенням знаку">>></a></code></dt> - <dd>Кожний з цих операторів внутрішньо використовує алгоритм ToInt32. Оскільки існує лише одне представлення 0 у внутрішньому 32-бітному цілочисельному типі, <code>-0</code> не збережеться після подвійної операції інверсії. Наприклад, і <code>Object.is(~~(-0), -0)</code>, і <code>Object.is(-0 << 2 >> 2, -0)</code> повернуть <code>false</code>.</dd> -</dl> - -<p>Покладатися на метод {{jsxref("Object.is")}}, не беручи до уваги знаки нулів, може бути небезпечно. Звісно, якщо на меті стоїть розрізнити <code>-0</code> та <code>+0</code>, він робить саме те, що потрібно.</p> - -<h2 id="Попередження_jsxrefObject.is_та_NaN">Попередження: {{jsxref("Object.is")}} та NaN</h2> - -<p>Специфікація {{jsxref("Object.is")}} вважає усі екземпляри {{jsxref("NaN")}} тим самим об'єктом, але, оскільки нам доступні <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, ми можемо мати окремі екземпляри, які не поводитимуться ідентично в усіх контекстах. Приклад:</p> - -<pre class="brush: js">var f2b = x => new Uint8Array(new Float64Array([x]).buffer); -var b2f = x => new Float64Array(x.buffer)[0]; -var n = f2b(NaN); -n[0] = 1; -var nan2 = b2f(n); -nan2 -> NaN -Object.is(nan2, NaN) -> true -f2b(NaN) -> Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127) -f2b(nan2) -> Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)</pre> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li> -</ul> diff --git a/files/uk/web/javascript/eventloop/index.html b/files/uk/web/javascript/eventloop/index.html deleted file mode 100644 index ab47fd4b48..0000000000 --- a/files/uk/web/javascript/eventloop/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Модель конкурентності та цикл подій -slug: Web/JavaScript/EventLoop -tags: - - JavaScript - - обробники подій - - події - - цикл подій - - черга -translation_of: Web/JavaScript/EventLoop ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p>JavaScript має модель одночасності, що базується на <strong>циклі подій</strong>, який є відповідальним за виконання коду, збір та обробку подій та виконання підзадач з черги. Ця модель доволі сильно відрізняється від моделей у інших мовах, таких як С та Java.</p> - -<h2 id="Концепції_виконання">Концепції виконання</h2> - -<p>Наступні розділи пояснють теоретичну модель. Сучасні імплементації JavaScript реалізують і значно оптимізують описану семантику.</p> - -<h3 id="Візуальне_відображення">Візуальне відображення</h3> - -<p style="text-align: center;"><img alt="Стек, купа, черга" src="https://mdn.mozillademos.org/files/17036/visual.png" style="height: 270px; width: 294px;"></p> - -<h3 id="Стек">Стек</h3> - -<p>Виклики функцій утворюють стек <em>фреймів (frames)</em>.</p> - -<pre class="brush: js">function foo(b) { - var a = 10; - return a + b + 11; -} - -function bar(x) { - var y = 3; - return foo(x * y); -} - -console.log(bar(7)); // вертає 42 -</pre> - -<p>Коли викликається <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code>, утворюється перший фрейм, який містить аргументи та локальні змінні функції <code>bar</code>. Коли <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> викликає <code>foo</code>, створюється другий фрейм та розміщується над першим, він містить аргументи та локальні змінні функції <code>foo</code>. Коли <code>foo</code> повертає значення, верхній фрейм виштовхується зі стеку (залишаючи лише фрейм виклику <font face="Consolas, Liberation Mono, Courier, monospace"><code>bar</code></font>). Коли <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> повертає значення, стек стає порожнім.</p> - -<h3 id="Купа">Купа</h3> - -<p>Об'єкти розподіляються у купі, яка є лише назвою для позначення великої (здебільшого не структурованої) області пам'яті.</p> - -<h3 id="Черга">Черга</h3> - -<p>Процес виконання JavaScript використовує чергу повідомлень, яка є списком повідомлень, що мають бути опрацьовані. Кожне повідомлення має пов'язану функцію, яка викликається для обробки цього повідомлення </p> - -<p>В певний момент {{anch("Цикл_подій", "циклу подій")}} процес виконання починає обробку повідомлень з черги, починаючи з найстаршого. Для цього повідомлення видаляється з черги, а його пов'язана функція викликається з повідомленням в якості вхідного параметра. Як завжди, виклик функції створює новий фрейм стеку для цієї функції.</p> - -<p>Опрацювання функцій продовжується, доки стек знову не стане порожнім. Тоді цикл подій опрацює наступне повідомлення у черзі (якщо воно є).</p> - -<h2 id="Цикл_подій">Цикл подій</h2> - -<p><strong>Цикл подій</strong> отримав свою назву через те, як він зазвичай реалізується. Як правило, це схоже на:</p> - -<pre class="brush: js">while (queue.waitForMessage()) { - queue.processNextMessage(); -}</pre> - -<p><code>queue.waitForMessage</code> синхронно чекає на прибуття повідомлення (якщо воно вже не надійшло і не чекає на обробку).</p> - -<h3 id="Виконання_до_завершення">"Виконання до завершення"</h3> - -<p>Кожне повідомлення обробляється до завершення, перш, ніж обробляти будь-яке інше повідомлення.</p> - -<p>Це надає деякі приємні властивості для вашої програми, в тому числі той факт, що, коли виконується функція, вона не може бути попередньо вилучена і виконається до кінця перш, ніж буде запущено будь-який інший код (і зможе змінювати дані, якими користується функція). Це відрізняється, наприклад, від C, де, якщо функція виконується у потоці, її можна зупинити в будь-якій точці, щоб запустити інший код в іншому потоці.</p> - -<p>Зворотним боком цієї моделі є те, що, якщо обробка повідомлення займає надто багато часу, веб-застосунок не може обробити взаємодії користувача, як-от натискання чи прокручування. Веб-переглядач пом'якшує це діалоговим вікном "a script is taking too long to run" (виконання сценарію займає забагато часу). Гарною практикою є робити обробку повідомлень короткою і, за можливості, розбивати одне повідомлення на декілька.</p> - -<h3 id="Додавання_повідомлень">Додавання повідомлень</h3> - -<p>У веб-переглядачах повідомлення додаються щоразу, коли виникає подія, до якої приєднаний прослуховувач подій. Якщо прослуховувача немає, подія втрачається. Отже, натискання на елементі з обробником подій натискання додасть повідомлення, так само з будь-якою іншою подією.</p> - -<p>Функція <code><a href="/uk/docs/Web/API/WindowTimers/setTimeout">setTimeout</a></code> викликається з двома аргументами: повідомлення, що додається до черги, та значення часу (необов'язкове; за замовчуванням <code>0</code>). <em>Значення часу </em>відображає (мінімальну) затримку, після якої повідомлення буде, власне, додане до черги. Якщо в черзі немає інших повідомлень, це повідомлення буде оброблене одразу після затримки. Однак, якщо там є повідомлення, повідомленню <code>setTimeout</code> доведеться зачекати, доки не будуть оброблені інші повідомлення. З цієї причини другий аргумент вказує <em>мінімальний</em>, а не гарантований час.</p> - -<p>Ось приклад, який демонструє цю концепцію (<code>setTimeout</code> не виконується негайно після того, як його таймер завершився): </p> - -<pre class="brush: js">const s = new Date().getSeconds(); - -setTimeout(function() { - // виводить "2", тобто, функція зворотного виклику не запустилась одразу через 500 мілісекунд. - console.log("Функція запустилась через " + (new Date().getSeconds() - s) + " секунд"); -}, 500) - -while (true) { - if (new Date().getSeconds() - s >= 2) { - console.log("Добре, виконувалось 2 секунди") - break; - } -}</pre> - -<h3 id="Нульові_затримки">Нульові затримки</h3> - -<p>Нульова затримка насправді не означає, що зворотній виклик запуститься через нуль мілісекунд. Виклик {{domxref ("WindowTimers.setTimeout", "setTimeout")}} із затримкою в <code>0</code> (нуль) мілісекунд не виконує функцію зворотного виклику після заданого інтервалу.</p> - -<p>Виконання залежить від кількості задач, що чекають у черзі. У наведеному нижче прикладі повідомлення <code>"це просто повідомлення"</code> буде написане у консоль раніше, ніж буде оброблене повідомлення у зворотному виклику, оскільки затримка - це <em>мінімальний</em> час, необхідний для обробки запиту (а не <em>гарантований</em> час).</p> - -<p>Загалом, <code>setTimeout</code> має чекати, доки виконається весь код для повідомлень у черзі, незважаючи на те, що ви вказали певний часовий ліміт для своєї функції <code>setTimeout</code>.</p> - -<pre class="brush: js">(function() { - - console.log('це початок'); - - setTimeout(function cb() { - console.log('Зворотний виклик 1: це повідомлення зворотного виклику'); - }); - - console.log('це просто повідомлення'); - - setTimeout(function cb1() { - console.log('Зворотний виклик 2: це повідомлення зворотного виклику'); - }, 0); - - console.log('це кінець'); - -})(); - -// "це початок" -// "це просто повідомлення" -// "це кінець" -// "Зворотний виклик 1: це повідомлення зворотного виклику" -// "Зворотний виклик 2: це повідомлення зворотного виклику" -</pre> - -<h3 id="Декілька_процесів_виконання_що_спілкуються_між_собою">Декілька процесів виконання, що спілкуються між собою</h3> - -<p>Веб-виконавець або iframe перехресного походження має свій стек, купу та чергу повідомлень. Два різних процеси виконання можуть спілкуватися надсиланням повідомлень за допомогою методу <a href="/uk/docs/Web/API/Window/postMessage"><code>postMessage</code></a>. Цей метод додає повідомлення до іншого процесу виконання, якщо останній прослуховує події <code>message</code>.</p> - -<h2 id="Жодного_блокування">Жодного блокування</h2> - -<p>Дуже цікавою властивістю моделі циклу подій є те, що JavaScript, на відміну від багатьох інших мов, ніколи не блокує. Управління введенням/виводом зазвичай здійснюється за допомогою подій та зворотних викликів, тому, коли програма чекає на результат запиту <a href="/uk/docs/Web/API/IndexedDB_API">IndexedDB</a> чи запиту <a href="/uk/docs/Web/API/XMLHttpRequest">XHR</a>, вона може опрацьовувати інші події, такі як введення даних користувачем.</p> - -<p>Існують спадкові винятки, такі як <code>alert</code> або синхронний XHR, але вважається гарною практикою їх уникати. Будьте обережні: <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">існують винятки з винятку</a> (але зазвичай це помилки реалізації, а не що-небудь інше).</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td> - </tr> - <tr> - <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td> - </tr> - </tbody> -</table> diff --git a/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html deleted file mode 100644 index c055e31dc0..0000000000 --- a/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html +++ /dev/null @@ -1,465 +0,0 @@ ---- -title: Управління потоком виконання та обробка помилок -slug: Web/JavaScript/Guide/Control_flow_and_error_handling -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> - -<p class="summary">JavaScript підтримує компактний набір інструкцій, зокрема інструкцій для управління потоком, які можна використати, щоб включити інтерактивність до вашого додатку. Цей розділ надає огляд таких інструкцій.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Довідник JavaScript</a> містить вичерпні дані про інструкції, описані у цьому розділі. Символ крапки з комою (<code>;</code>) розділяє інструкції у JavaScript-коді.</p> - -<p>Будь-який вираз у JavaScript також являється інструкцією. Повну інформацію про вирази дивіться у розділі <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a>.</p> - -<h2 id="Блокова_інструкція">Блокова інструкція</h2> - -<p>Найбільш базовою інструкцією є блокова, що об'єднує кілька інструкцій в одну. Блок обмежується парою фігурних дужок:</p> - -<pre class="syntaxbox notranslate">{ - інструкція_1; - інструкція_2; - . - . - . - інструкція_n; -} -</pre> - -<h3 id="Приклад"><strong>Приклад</strong></h3> - -<p>Блокова інструкція зазвичай використовується поряд з інструкціями для управління потоком виконання (наприклад, <code>if</code>, <code>for</code>, <code>while</code>).</p> - -<pre class="brush: js notranslate">while (x < 10) { - x++; -} -</pre> - -<p>У даному випадку, <code>{ x++; }</code> є блоковою інструкцією.</p> - -<div class="blockIndicator note"> -<p><strong>Важливо</strong>: JavaScript до ECMAScript2015 не мав блокової області видимості. Змінні, об'явлені всередині блоку, були видимі в області меж зовнішньої функції або ж усього скрипта. І ефект від їхнього зміни поширювався за межі блоку. Інакше кажучи, блокові інструкції не створювали області видимості.</p> - -<p>"Поодинокі" блоки у JavaScript можуть мати зовсім інші наслідки, ніж у мовах C чи Java. Наприклад:</p> - -<pre class="brush: js notranslate">var x = 1; -{ - var x = 2; -} -console.log(x); // в результаті - 2 -</pre> - -<p>В результаті отримуємо 2, тому що інструкція <code>var x</code> всередині блоку перебуває в одній області видимості з інструкцією <code>var x</code> перед блоком. У C чи Java подібний код поверне 1.</p> - -<p>Починаючи з ECMAScript2015, декларації змінних <code>let</code> і <code>const</code> мають блокову область видимості. Докладніше на довідкових сторінках {{jsxref("Statements/let", "let")}} і {{jsxref("Statements/const", "const")}}.</p> -</div> - -<h2 id="Умовні_інструкції">Умовні інструкції</h2> - -<p>Умовною інструкцією називається набір команд, що виконаються, якщо певна умова буде істинною. JavaScript підтримує два види умовних інструкцій: <code>if...else</code> та <code>switch</code>.</p> - -<h3 id="Інструкція_if...else">Інструкція <code>if...else</code></h3> - -<p>Використовуйте <code>if</code>, щоб виконати інструкцію, якщо логічна умова являється істинною. Використовуйте необов'яковий <code>else</code>, щоб виконати інструкцію, якщо умова являється хибною. Інструкція <code>if</code> виглядає так:</p> - -<pre class="syntaxbox notranslate">if (умова) { - інструкція_1; -} else { - інструкція_2; -}</pre> - -<p>Тут <code>умова</code> може бути будь-яким виразом, що зводиться до <code>true</code> чи <code>false</code> (дивіться розділ <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> для роз'яснення, що і як обчислюється до <code>true</code> чи <code>false</code>). Якщо <code>умова</code> обчислюється до <code>true</code>, виконується <code>інструкція_1</code>; інакше виконується <code>інструкція_2</code>. <code>інструкція_1</code> та <code>інструкція_2</code> можуть бути будь-якими, включаючи вкладені інструкції <code>if</code>.</p> - -<p>Можна також суміщувати інструкції у вигляді <code>else if</code>, щоб послідовно перевірити кілька умов, як-от, наприклад:</p> - -<pre class="syntaxbox notranslate">if (умова_1) { - інструкція_1; -} else if (умова_2) { - інструкція_2; -} else if (умова_n) { - інструкція_n; -} else { - інструкція_остання; -} -</pre> - -<p>У випадку наявності кількох таких умов буде виконано лише найперший обчислений до <code>true</code>. Щоб виконати кілька інструкцій, слід об'єднати їх у блок (<code>{ ... }</code>) .</p> - -<h4 id="Найкращі_практики">Найкращі практики</h4> - -<p>Загалом, хорошою практикою вважається завжди використовувати блоки інструкцій, особливо при вкладенні інструкцій <code>if</code>:</p> - -<pre class="syntaxbox notranslate">if (умова) { - інструкція_1_виконується_якщо_умова_правильна; - інструкція_2_виконується_якщо_умова_правильна; -} else { - інструкція_3_виконується_якщо_умова_хибна; - інструкція_4_виконується_якщо_умова_хибна; -} -</pre> - -<div>Не рекомендується використовувати звичайні присвоєння в умовних виразах, бо присвоєння можна сплутати з порівнянням при перегляді коду.</div> - -<div></div> - -<div>Наприклад, не слід писати ось так:</div> - -<pre class="example-bad brush: js notranslate">// Ймовірно, буде прочитано як "x == y" -if (x = y) { - /* statements here */ -} -</pre> - -<p>Якщо все ж таки потрібно використати присвоєння всередині умовного виразу, загальною практикою є додавання зайвих дужок навколо присвоєння, як-от:</p> - -<pre class="example-good brush: js notranslate">if ((x = y)) { - /* інструкції тут */ -} -</pre> - -<h4 id="Хибні_значення">Хибні значення</h4> - -<p>Наступні значення обчислюються до <code>false</code> (також знані як {{Glossary("Falsy")}} значення):</p> - -<ul> - <li><code>false</code></li> - <li><code>undefined</code></li> - <li><code>null</code></li> - <li><code>0</code></li> - <li><code>NaN</code></li> - <li>порожня стрічка (<code>""</code>)</li> -</ul> - -<p>Всі інші значення (включно з усіма об'єктами), обчислюються до <code>true</code> при передачі в умовний вираз.</p> - -<div class="blockIndicator note"> -<p><strong>Увага:</strong> не плутайте примітивні булеві значення <code>true</code> та <code>false</code> із істинними і хибними значеннями об'єкту {{jsxref("Boolean")}}. Наприклад:</p> - -<pre class="brush: js notranslate">var b = new Boolean(false); -if (b) // цей умовний вираз буде істинним -if (b == true) // цей умовний вираз буде хибним -</pre> -</div> - -<h4 id="Приклад_2"><strong>Приклад</strong></h4> - -<p>У наведеному далі прикладі функція <code>checkData</code> повертає <code>true</code>, якщо в об'єкті <code>Text</code> три символи, а інакше вона показує сповіщення та повертає <code>false</code>.</p> - -<pre class="brush: js notranslate">function checkData() { - if (document.form1.threeChar.value.length == 3) { - return true; - } else { - alert('Enter exactly three characters. ' + - document.form1.threeChar.value + ' is not valid.'); - return false; - } -}<code> -</code></pre> - -<h3 id="Інструкція_switch">Інструкція <code>switch</code></h3> - -<p>Інструкція <code>switch</code> дозволяє програмі оцінити вираз і спробувати співставити значення виразу з міткою <code>case</code>. Якщо відповідність знайдено , програма виконує пов'язану з цим інструкцію.</p> - -<p>Інструкція <code>switch</code> виглядає наступним чином:</p> - -<pre class="brush: js notranslate">switch (expression) { - case label_1: - statements_1 - [break;] - case label_2: - statements_2 - [break;] - ... - default: - statements_def - [break;] -}</pre> - -<p>JavaScript розуміє <code>switch</code> інструкцію наступним чином:</p> - -<ul> - <li>Програма спочатку шукає пункт <code>case</code> із міткою, що відповідає значенню виразу, а потім передає керування цьому пунктові, у якому виконуються відповідні інструкції.</li> - <li>Якщо відповідної мітки не знайдено, програма шукає необов'язковий пункт <code>default</code>: - <ul> - <li>Якщо пунт <code>default</code> знайдено, програма передає керування йому, виконуючи відповідні інструкції.</li> - <li>Якщо пункту <code>default</code> не знайдено, програма продовжує виконання інструкцій після закінчення <code>switch</code>.</li> - <li>(Традиційно, пункт <code>default</code> записується останнім, але це не обов'язково.)</li> - </ul> - </li> -</ul> - -<h4 id="Інструкція_break">Інструкція <code>break</code></h4> - -<p>Необов'язкова інструкція <code>break</code>, пов’язана із кожним пунктом <code>case</code>, забезпечує те, що програма виходить з конструкції <code>switch</code>, якщо виконується відповідна умова, і продовжує виконання інструкцій після конструкції <code>switch</code>. Якщо <code>break</code> не використовується, програма продовжує виконання інструкції наступних пунктів всередині <code>switch</code>, не перевіряючи умови.</p> - -<h5 id="Приклад_3"><strong>Приклад</strong></h5> - -<p>У наступному прикладі, якщо <code>fruittype</code> дорівнює "Bananas", програма виконує пов'язану з пукнтом "Bananas" інструкцію. Коли виникає <code>break</code>, програма припиняє <code>switch</code> та виконує наступну після <code>switch</code> інструкцію. Якщо <code>break</code> б була опущена, інструкції для пункту "Cherries" також би виконалися.</p> - -<pre class="brush: js notranslate">switch (fruittype) { - case 'Oranges': - console.log('Oranges are $0.59 a pound.'); - break; - case 'Apples': - console.log('Apples are $0.32 a pound.'); - break; - case 'Bananas': - console.log('Bananas are $0.48 a pound.'); - break; - case 'Cherries': - console.log('Cherries are $3.00 a pound.'); - break; - case 'Mangoes': - console.log('Mangoes are $0.56 a pound.'); - break; - case 'Papayas': - console.log('Mangoes and papayas are $2.79 a pound.'); - break; - default: - console.log('Sorry, we are out of ' + fruittype + '.'); -} -console.log("Is there anything else you'd like?");</pre> - -<h2 id="Інструкції_для_обробки_винятків">Інструкції для обробки винятків</h2> - -<p>Використовуючи інструкцію <code>throw</code> , можна викидати виключення і обробляти їх за допомогою інструкцій <code>try...catch</code>.</p> - -<ul> - <li><a href="#throw_statement">Інструкція <code>throw</code></a></li> - <li><a href="#try...catch_statement">Інструкція <code>try...catch</code></a></li> -</ul> - -<h3 id="Типи_винятків">Типи винятків</h3> - -<p>В якості виключення у JavaScript можна викинути практично будь-який об'єкт. Тим не менш, не всі викинуті об'єкти створено однаковими. Позаяк доволі звичною практикою є викидати числа чи стрічки в якості помилок, часто краще використовувати якийсь із типів винятків, спеціально створених для цих потреб:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">Винятки ECMAScript</a></li> - <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li> -</ul> - -<h3 id="Оператор_throw">Оператор <code>throw</code></h3> - -<p>Скористайтеся оператором <code>throw</code>, щоб викинути виняток. Коли викидаєте виняток, ви вказуєте вираз, що містить значення, яке викидається:</p> - -<pre class="syntaxbox notranslate">throw expression; -</pre> - -<p>Ви можете викинути будь-який вираз, не тільки вирази окремих типів. Наступний код викидає кілька винятків різних типів:</p> - -<pre class="brush: js notranslate">throw 'Error2'; // тип String -throw 42; // тип Number -throw true; // тип Boolean -throw {toString: function() { return "Я об'єкт!"; } }; -</pre> - -<div class="note"><strong>Примітка:</strong> Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці <code>catch</code>.</div> - -<pre class="brush: js notranslate">// Створити об'єкт UserException -function UserException(message) { - this.message = message; - this.name = 'UserException'; -} - -// Гарненько оформити виняток у разі використання в якості рядка -// (наприклад, у консолі помилок) -UserException.prototype.toString = function() { - return this.name + ': "' + this.message + '"'; -} - -// Створити екземпляр об'єкта та викинути його -throw new UserException('Значення завелике');</pre> - -<h3 id="Інструкція_try...catch">Інструкція <code>try...catch</code></h3> - -<p>Інструкція <code>try...catch</code> позначає блок інструкцій, які програма спробує виконати, і вказує одну чи більше реакцій на викинутий виняток. Коли викидається виняток, інструкція <code>try...catch</code> його ловить.</p> - -<p>Інструкція <code>try...catch</code> складається з блока <code>try</code>, що містить одну чи більше інструкцій, і блоку <code>catch</code>, що містить інструкції до виконання у разі, якщо у блоці <code>try</code> буде викинуто виняток.</p> - -<p>Інакше кажучи, ми хочемо, щоб блок <code>try</code> успішно виконався. Але якщо так не станеться, ми хочемо, щоб управління перейшло до блоку <code>catch</code>. Практично, якщо будь-яка з інструкцій всередині блоку <code>try</code> (або всередині функції, викликаної зсередини блоку <code>try</code>) викидає виняток, управління <em>одразу</em> передається до блоку <code>catch</code>. У разі, якщо блок <code>try</code> не викинув жодного винятку, блок <code>catch</code> пропускається. А блок <code>finally</code> виконується після виконання <code>try</code> та <code>catch</code> і до інструкцій, що слідують після Інструкції <code>try...catch</code>.</p> - -<p>Наступний приклад містить інструкцію <code>try...catch</code>. У прикладі викликається функція, що повертає назву місяця з масиву, керуючись номером, переданим у функцію. Якщо число не відповідає номерові місяця (<code>1</code>–<code>12</code>), викидається виняток зі стрічкою <code>"InvalidMonthNo"</code> в якості значення, а інструкції, описані у блоці <code>catch</code>, встановлюють значення змінної <code><var>monthName</var></code> у <code>'unknown'</code>.</p> - -<pre class="brush: js notranslate">function getMonthName(mo) { - mo = mo - 1; // Коригуємо порядковий номер місяця для використання в якості - // індекса масиву (1 = Jan, 12 = Dec) - var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - if (months[mo]) { - return months[mo]; - } else { - throw 'InvalidMonthNo'; // тут застосуємо ключове слово throw - } -} - -try { // інструкції, які ми намагаємося виконати - monthName = getMonthName(myMonth); // функція може викинути виняток -} -catch (e) { - monthName = 'unknown'; - logMyErrors(e); // передаємо значення винятку в обробник помилок (наприклад, вашу власну функцію) -} -</pre> - -<h4 id="Блок_catch">Блок <code>catch</code></h4> - -<p>Блок <code>catch</code> можна використовувати для обробки всіх винятків, що можуть виникнути при виконання блоку <code>try</code>.</p> - -<pre class="syntaxbox notranslate">catch (<var>catchID</var>) { - <var>інструкції</var> -}</pre> - -<p>Блок <code>catch</code> задає ідентифікатор (<code><var>catchID</var></code> у прикладі вище), що містить значення, вказане оператором <code>throw</code>. За допомогою цього ідентифікатора можна отримати інформацію про виняток, який було викинуто.</p> - -<p>JavaScript створює цей ідентифікатор, як тільки управління переходить до блоку <code>catch</code>. Ідентифікатор існує доти, доки виконується <code>catch</code>. Як тільки блок <code>catch</code> завершує роботу, ідентифікатор знищується.</p> - -<p>Наприклад, наступний код викидає виняток. Коли це відбувається, управління передається до блоку <code>catch</code>.</p> - -<pre class="brush: js notranslate">try { - throw 'myException'; // створює виняток -} -catch (e) { - // інструкції для обробки якихось винятків - logMyErrors(e); // передає об'єкт винятку до обробника помилок -} -</pre> - -<div class="blockIndicator note"> -<p><strong>Найкращі практики:</strong> Під час запису помилок до консолі всередині блоку <code>catch</code> для потреб зневадження рекомендується використовувати <code>console.error()</code> замість <code>console.log()</code>. Це одразу форматує повідомлення як помилку, і також додає його до загального списку помилок, що трапилися на сторінці. </p> -</div> - -<h4 id="Блок_finally">Блок <code>finally</code></h4> - -<p>Блок <code>finally</code> містить інструкції для виконання <em>після</em> завершення роботи блоку <code>try...catch</code>. Блок <code>finally</code> також виконається <em>перед</em> кодом, що слідує безпосередньо за оператором <code>try…catch…finally</code>.</p> - -<p>Також важливо зауважити, що блок <code>finally</code> буде виконано <em>незалежно від того,</em> чи було викинуто виняток. Однак, якщо виняток таки було викинуто, інструкції блоку <code>finally</code> буде виконано, навіть якщо жоден блок <code>catch</code> не обробив викинутий виняток.</p> - -<p>Блок <code>finally</code> можна використовувати, щоб заставити скрипт "м'яко впасти", коли трапляється виняток. Наприклад - для того, щоб звільнити ресурс, взятий скриптом.</p> - -<p>Приклад, наведений далі, відкриває файл і виконує певні дії з ним. (JavaScript на сервері дозволяє отримувати доступ до файлів.) Якщо викидається виняток, поки файл було відкрито, блок <code>finally</code> закриває файл перед тим, як скрипт впаде. Застосування <code>finally</code> тут <em>гарантує</em>, що файл ні в якому разі не залишиться відкритим, навіть якщо трапиться помилка.</p> - -<pre class="brush: js notranslate">openMyFile(); -try { - writeMyFile(theData); // Це може викинути помилку -} catch(e) { - handleError(e); // Обробити помилку, якщо вона трапиться -} finally { - closeMyFile(); // Завжди закривати ресурс -} -</pre> - -<p>Якщо блок <code>finally</code> повертає якесь значення, це значення стає результатом роботи всього блоку <code>try-catch-finally</code>, незалежно від будь-яких інструкцій <code>return</code> всередині <code>try</code> чи <code>catch</code>:</p> - -<pre class="brush: js notranslate">function f() { - try { - console.log(0); - throw 'bogus'; - } catch(e) { - console.log(1); - return true; // ця інструкція чекатиме - // допоки не виконається блок finally - console.log(2); // недосяжний код - } finally { - console.log(3); - return false; // переписує попередній "return" - console.log(4); // недосяжний код - } - // тепер виконується "return false" - console.log(5); // недосяжний код -} -f(); // console 0, 1, 3; returns false -</pre> - -<p>Переписування значень "return" блоком <code>finally</code> також стосується винятків, викинутих (можливо, повторно) всередині блоку <code>catch</code> :</p> - -<pre class="brush: js notranslate">function f() { - try { - throw 'bogus'; - } catch(e) { - console.log('упіймано внутрішній "bogus"'); - throw e; // ця інструкція чекатиме, - // допоки не виконається бльок finally - } finally { - return false; // переписує попередній "throw" - } - // тепер виконується "return false" -} - -try { - f(); -} catch(e) { - // цей код ніколи не виконається, бо "throw" - // усередині "catch" переписано - // "return"ом у "finally" - console.log('упіймано зовнішній "bogus"'); -} - -// ВИВІД: -// упіймано внутрішній "bogus"</pre> - -<h4 id="Вкладені_інструкції_try...catch">Вкладені інструкції try...catch</h4> - -<p>Можна вкладати одну чи більше інструкцій <code>try...catch</code>. Якщо внутрішня інструкція <code>try...catch</code> не має блоку <code>catch</code>, мусить бути блок <code>finally</code>, і блок <code>catch</code> зовнішної інструкції <code>try...catch</code> буде перевірено на збіг. За детальнішою інфорацією див. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a> на сторінці <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p> - -<h3 id="Обробка_обєктів_Error">Обробка об'єктів <code>Error</code></h3> - -<p>Залежно від типу помилки, ви зможете використати властивості 'name' і 'message' для покращеного повідомлення. 'name' переважно називає клас, похідний від класу Error (напр., 'DOMException' або 'Error'), а 'message' традиційно дає стисліше повідомлення, ніж те, що виходить після конвертування об'єкта помилки у string.</p> - -<p>Якщо ви викидаєте влавні винятки, то для користі з цих властивостей (напр., щоб ваш блок catch відрізняв ваші винятки від системних) сожете скористатися конструктором Error. Наприклад:</p> - -<pre class="brush: js notranslate">function doSomethingErrorProne() { - if (ourCodeMakesAMistake()) { - throw (new Error('Повідомлення')); - } else { - doSomethingToGetAJavascriptError(); - } -} -.... -try { - doSomethingErrorProne(); -} catch (e) { - console.log(e.name); // logs 'Error' - console.log(e.message); // logs 'Повідомлення' або JavaScript error message) -}</pre> - -<h2 id="Обіцянки_Promises">Обіцянки (Promises)</h2> - -<p>Починаючи з ECMAScript2015, JavaScript дістав підтримку об'єктів {{jsxref("Promise")}}, що дає змогу контролювати плин відкладених і асинхронних операцій.</p> - -<p><code>Обіцянка (Promise)</code> має один зі станів:</p> - -<ul> - <li><em>очікування (pending)</em>: початковий стан, не виконаний ані відхилений.</li> - <li><em>виконано (fulfilled)</em>: успішна операція</li> - <li><em>відхилено (rejected)</em>: операція провалилася.</li> - <li><em>вирішено (settled)</em>: виконано або відхилено, але не очікування.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> - -<h3 id="Завантаження_образу_з_допомогою_XHR">Завантаження образу з допомогою XHR</h3> - -<p>Простий приклад використання Обіцянки (<code>Promise)</code> і <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для завантаження образу міститься в репозиторії MDN GitHub<a href="https://github.com/mdn/js-examples/tree/master/promises-test"> js-examples</a> repository. Ви також можете бачити її в дії: <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Кожен крок прокоментовано, що дає змогу зблизька побачити архітектуру Обіцянок (Promises) і XHR. Тут наведено розкоментовану версію, що показує плин Обіцянки (<code>Promise)</code> , тож ви можете схопити ідею:</p> - -<pre class="brush: js notranslate">function imgLoad(url) { - return new Promise(function(resolve, reject) { - var request = new XMLHttpRequest(); - request.open('GET', url); - request.responseType = 'blob'; - request.onload = function() { - if (request.status === 200) { - resolve(request.response); - } else { - reject(Error('Image didn\'t load successfully; error code:' - + request.statusText)); - } - }; - request.onerror = function() { - reject(Error('There was a network error.')); - }; - request.send(); - }); -}</pre> - -<p>За деталями звертайтеся до сторінки {{jsxref("Promise")}} і посібника <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using Promises</a>.</p> - -<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/uk/web/javascript/guide/details_of_the_object_model/index.html b/files/uk/web/javascript/guide/details_of_the_object_model/index.html deleted file mode 100644 index 47faf7b6ef..0000000000 --- a/files/uk/web/javascript/guide/details_of_the_object_model/index.html +++ /dev/null @@ -1,761 +0,0 @@ ---- -title: Докладно про об'єктну модель -slug: Web/JavaScript/Guide/Details_of_the_Object_Model -tags: - - Guide - - Intermediate - - JavaScript - - Object -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model -original_slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> - -<p class="summary">JavaScript - це об'єктна мова, що заснована на прототипах, а не на класах. У зв'язку з цим може бути менш очевидно, як саме JavaScript дозволяє створювати ієрархії об'єктів із наслідуванням їх властивостей та значень. Цей розділ є спробою дещо прояснити цей механізм.</p> - -<p>Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.</p> - -<h2 id="Мови_з_класовою_та_прототипною_моделлю">Мови з класовою та прототипною моделлю</h2> - -<p>Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.</p> - -<ul> - <li><em>Клас</em> визначає всі властивості (включаючи поля та методи у Java, чи фукнції-члени у C++, як властивості), що характеризують певний набір об'єктів. Класс - це абстрактна річ, на відміну від будь-якого окремого об'єкту із набору, який він описує. Наприклад, клас <code>Employee</code> може представляти групу всіх робітників.</li> - <li><em>Екземпляр</em>, з іншого боку, є реалізацією класу. Наприклад, <code>Victoria</code> може бути екземпляром класу <code>Employee</code>, представляючи окрему особу в якості працівника. Екземпляр має точно ті самі властивості, що і батьківський клас (не більше, не менше).</li> -</ul> - -<p>Мови з прототипною моделлю наслідування, такі як JavaScript, не розділяють ці сутності: у них просто є об'єкти. Такі мови реалізовують поняття <em>об'єкту-прототипу</em> — об'єкту, що використовується як зразок, з якого вибираються початкові властивості для нового об'єкту. Будь-який об'єкт може вказати власні властивості, як в момент створення, так і під час виконання. Ну і на додачу, будь-який об'єкт можна задати в якості прототипу з іншого об'єкту — таким чином перший об'єкт розділить свої властивості з другим.</p> - -<h3 id="Задання_і_визначення_класу">Задання і визначення класу</h3> - -<p>У мовах із класовою моделлю, класс задається у окремому <em>визначенні класу</em>. У цому визначенні можна вказати особливі методи, що називаються <em>конструкторами</em>, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор <code>new</code> у комбінації із методом-конструктором.</p> - -<p>JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор <code>new</code> із фукнцією-конструктором.</p> - -<p> </p> - -<div class="blockIndicator note"> -<p>Зауважте, що ECMAScript 2015 вводить <a href="/uk/docs/Web/JavaScript/Reference/Classes">визначення класу</a>:</p> - -<blockquote> -<p>Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи <em>не вводять</em> у JavaScript нової моделі наслідуваня.</p> -</blockquote> -</div> - -<p> </p> - -<h3 id="Дочірні_класи_і_наслідування">Дочірні класи і наслідування</h3> - -<p>У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється <em>дочірнім</em> стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас <code>Employee</code> включає в себе лише поля <code>name</code> та <code>dept</code>, і <code>Manager</code> - це дочірній клас <code>Employee</code>, що додає властивість <code>reports</code>. У цьому випадку, екземпляр класу <code>Manager</code> матиме три властивості: <code>name</code>, <code>dept</code>, та <code>reports</code>.</p> - -<p>JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад <code>Employee</code> — <code>Manager</code>, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор <code>Employee</code>, задаючи властивості <code>name</code> та <code>dept</code>. Далі ви визначаєте фукнцію-конструктор <code>Manager</code>, що викликає конструктор <code>Employee</code> та задає властивість <code>reports</code>. Насамкінець, призначаєте новий об'єкт, отриманий з <code>Employee.prototype</code> в якості прототипу конструктора <code>Manager</code>. Надалі, при створенні екземпляра <code>Manager</code> він наслідує властивості <code>name</code> і <code>dept</code> з об'єкту <code>Employee</code>.</p> - -<h3 id="Додавання_і_видалення_властивостей">Додавання і видалення властивостей</h3> - -<p>Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.</p> - -<h3 id="Підсумок_відмінностей_класової_і_прототипної_моделей">Підсумок відмінностей класової і прототипної моделей</h3> - -<p>Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.</p> - -<table class="standard-table"> - <caption>Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)</caption> - <thead> - <tr> - <th scope="col">Класова модель (Java)</th> - <th scope="col">Прототипна модель (JavaScript)</th> - </tr> - </thead> - <tbody> - <tr> - <td>Клас та його екземпляр - окремі сутності.</td> - <td>Всі об'єкти можуть наслідувати інші об'єкти.</td> - </tr> - <tr> - <td>Визначення класу описує його; екземпляри створюються методами-конструкторами.</td> - <td>Функції-конструктори і описують, і створюють набори об'єктів.</td> - </tr> - <tr> - <td>Окремий об'єкт створюється оператором <code>new</code>.</td> - <td>Так само.</td> - </tr> - <tr> - <td>Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.</td> - <td>Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.</td> - </tr> - <tr> - <td>Властивості наслідуються згідно ланцюжка класів.</td> - <td>Властивості наслідуються згідно ланцюжка прототипів.</td> - </tr> - <tr> - <td>Визначення класу задає <em>всі</em> властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.</td> - <td>Функція-конструктор чи прототип задають лише <em>початковий набір</em> властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.</td> - </tr> - </tbody> -</table> - -<h2 id="Приклад_із_робітником_Employee">Приклад із робітником "Employee"</h2> - -<p>Надалі у розділі ієрархія робітників, що показана на наступному зображенні.</p> - -<div style="display: table-row;"> -<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;"> -<p>Проста ієрархія об'єктів, сформована із наступних елементів:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p> -</div> - -<div style="display: table-cell; vertical-align: middle; padding: 10px;"> -<ul> - <li><code>Employee</code> має поля <code>name</code> (із порожнім рядком в якості значення за замовчуванням) та <code>dept</code> (у якого значення за замовчуванням — "general").</li> - <li><code>Manager</code> заснований на <code>Employee</code>. Він додає властивість <code>reports</code> (за замовчуванням містить порожній масив для об'єктів <code>Employee</code>).</li> - <li><code>WorkerBee</code> також заснований на <code>Employee</code>. Він додає властивість <code>projects</code> (за замовчуванням містить порожній масив, призначений для рядків).</li> - <li><code>SalesPerson</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>quota</code> (за замовчуванням — число 100). Він також перевизначае властивість <code>dept</code>, надаючи їй нове значенням "sales" (що означає, що всі <code>SalesPerson</code> відносяться до одного відділу).</li> - <li><code>Engineer</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>machine</code> (значення за замовчуванням — порожній рядок) і перевизначає властивість <code>dept</code>, задаючи їй значення "engineering".</li> -</ul> -</div> -</div> - -<h2 id="Створення_ієрархії">Створення ієрархії</h2> - -<p>Існує декілька способів задати відповідні функції-конструктори, щоб реалізувати ієрархію робітників. Який спосіб обрати — значною мірою залежить від того, які можливості ви хочете отримати від вашого додатку.</p> - -<p>Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.</p> - -<p>У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у <a href="#Більш_гнучкі_конструктори">Більш гнучкі конструктори</a>). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.</p> - -<p>Наступні визначення <code>Employee</code> у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">мова із сильною типізацією</a>, а JavaScript — із слабкою).</p> - -<div class="twocolumns"> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">function Employee() { - this.name = ''; - this.dept = 'general'; -} -</pre> - -<h4 id="Java"><br> - Java</h4> - -<pre class="brush: java">public class Employee { - public String name = ""; - public String dept = "general"; -} -</pre> -</div> - -<p>Визначення <code>Manager</code> і <code>WorkerBee</code> показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля <code>prototype</code> функції-конструктора, а потім перевизначаєте <code>prototype.constructor</code>, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="brush: js">function Manager() { - Employee.call(this); - this.reports = []; -} -Manager.prototype = - Object.create(Employee.prototype); -<span class="diff_add">Manager.prototype.constructor = Manager;</span> - -function WorkerBee() { - Employee.call(this); - this.projects = []; -} -WorkerBee.prototype = - Object.create(Employee.prototype); -<span class="diff_add">WorkerBee.prototype.constructor = WorkerBee;</span> -</pre> - -<h4 id="Java_2"><br> - Java</h4> - -<pre class="brush: java">public class Manager extends Employee { - public Employee[] reports = - new Employee[0]; -} - - - -public class WorkerBee extends Employee { - public String[] projects = new String[0]; -} - - -</pre> -</div> - -<p> </p> - -<p>Визначення <code>Engineer</code> та <code>SalesPerson</code> створюють об'єкти, що наслідуються вже від <code>WorkerBee</code>, а, отже, і від <code>Employee</code>. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля <code>dept</code>, змінюючи їх відповідно до нового типу.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">function SalesPerson() { - WorkerBee.call(this); - this.dept = 'sales'; - this.quota = 100; -} -SalesPerson.prototype = - Object.create(WorkerBee.prototype); -<span class="diff_add">SalesPerson.prototype.constructor = SalesPerson;</span> - -function Engineer() { - WorkerBee.call(this); - this.dept = 'engineering'; - this.machine = ''; -} -Engineer.prototype = - Object.create(WorkerBee.prototype); -<span class="diff_add">Engineer.prototype.constructor = Engineer;</span> -</pre> - -<h4 id="Java_3"><br> - Java</h4> - -<pre class="brush: java">public class SalesPerson extends WorkerBee { - public String dept = "sales"; - public double quota = 100.0; -} - - -public class Engineer extends WorkerBee { - public String dept = "engineering"; - public String machine = ""; -} - -</pre> -</div> - -<p>Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.</p> - -<div class="note"> -<p><strong>Зауважте, що:</strong> термін <em><em>екземпляр</em></em> має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що <code><code>jane</code></code> є екземпляром класу <code><code>Engineer</code></code>. Так само, хоча терміни <em><em>предок</em>, <em>нащадок</em>, дочірній і батьківський класи</em> не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.</p> -</div> - -<h3 id="Створення_об'єктів_за_допомогою_простих_визначень">Створення об'єктів за допомогою простих визначень</h3> - -<div class="twocolumns"> -<h4 id="Ієрархія_об'єктів">Ієрархія об'єктів</h4> - -<p>Наступна ієрархія створена за допомогою коду у правій частині.</p> - -<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p> - -<h4 id="Окремі_об'єкти_Jim_Sally_Mark_Fred_Jane_etc._Екземпляри_створені_конструктором">Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.<br> - "Екземпляри", створені конструктором</h4> - -<pre class="brush: js">var jim = new Employee; -// Дужки можна опустити, якщо -// конструктор не приймає аргументів. -// jim.name має значення '' -// jim.dept має значення 'general' - -var sally = new Manager; -// sally.name має значення '' -// sally.dept має значення 'general' -// sally.reports має значення [] - -var mark = new WorkerBee; -// mark.name має значення '' -// mark.dept має значення 'general' -// mark.projects має значення [] - -var fred = new SalesPerson; -// fred.name має значення '' -// fred.dept має значення 'sales' -// fred.projects має значення [] -// fred.quota має значення 100 - -var jane = new Engineer; -// jane.name має значення '' -// jane.dept має значення 'engineering' -// jane.projects має значення [] -// jane.machine має значення '' -</pre> -</div> - -<h2 id="Властивості_(поля)_об'єкту">Властивості (поля) об'єкту</h2> - -<p>Ця секція описує, як об'єкти наслідують властивості інших об'єктів у ланцюжку прототипів, і що відбувається, якщо додати властивість під час виконання програми.</p> - -<h3 id="Наслідування_властивостей">Наслідування властивостей</h3> - -<p>Припустимо, такою інструкцією ви створили екземпляр <code>WorkerBee</code> — об'єкт <code>mark</code>:</p> - -<pre class="brush: js">var mark = new WorkerBee; -</pre> - -<p>Коли JavaScript бачить оператор <code>new</code>, він створює загальний об'єкт і неявно встановлює <code>WorkerBee.prototype</code> значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення <em><code>this</code></em> до фукнції-конструктора <code>WorkerBee</code>. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної <code>mark</code>.</p> - -<p>Описаний процес явно не встановлює значення об'єкту <code>mark</code> для властивостей (<em>локальні</em> значення), які <code>mark</code> наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт <code>mark</code> має наступні властивості і значення:</p> - -<pre class="brush: js">mark.name = ''; -mark.dept = 'general'; -mark.projects = []; -</pre> - -<p>З конструктора Employee об'єкту <code>mark</code> призначено локальні значення для властивостей <code>name</code> та <code>dept</code>, а з конструктора <code>WorkerBee</code> — значення властивості <code>projects</code>. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у <a href="#Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</a>.</p> - -<p>Так як ці конструктори не дозволяють задати специфічні для екземпляру значення, це являється загальним прикладом. В якості значень властивостей взяті значення за замовчуванням, що розповсюджуються на всі об'єкти, створені на основі <code>WorkerBee</code>. Звісно, значення цих властивостей можна змінити. Наприклад, так можна встановити їх значення для об'єкту <code>mark</code>:</p> - -<pre class="brush: js">mark.name = 'Doe, Mark'; -mark.dept = 'admin'; -mark.projects = ['navigator'];</pre> - -<h3 id="Додавання_властивостей">Додавання властивостей</h3> - -<p>У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:</p> - -<pre class="brush: js">mark.bonus = 3000; -</pre> - -<p>Тепер об'єкт <code>mark</code> містить властивість <code>bonus</code>, проте більше ніхто із <code>WorkerBee</code> її не має.</p> - -<p>Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість <code>specialty</code> всім робітникам:</p> - -<pre class="brush: js">Employee.prototype.specialty = 'none'; -</pre> - -<p>Як тільки JavaScript виконає інструкцію, об'єкт <code>mark</code> матиме властивість <code>specialty</code> із значенням <code>"none"</code>. Наступна схема ілюструє ефект від додавання цієї властивості до прототипу <code>Employee</code> і її перевизначення у прототипі <code>Engineer</code>.</p> - -<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> - <small><strong>Додавання властивостей</strong></small></p> - -<h2 id="Більш_гнучкі_конструктори">Більш гнучкі конструктори</h2> - -<p>Наведені раніше функції-конструктори не дозволяють задавати значення під час створенні екземпляру. Як і у Java, можна надати конструктору аргументи для ініціалізації значень властивостей у об'єктів. Наступна схема показує один із способів це зробити.</p> - -<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> - <small><strong>Задання властивостей у конструкторі, варіант 1</strong></small></p> - -<p>Таблиця далі показує визначення цих об'єктів у Java і JavaScript.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_4">JavaScript</h4> - -<h4 id="Java_4">Java</h4> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; -} -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class Employee { - public String name; - public String dept; - public Employee () { - this("", "general"); - } - public Employee (String name) { - this(name, "general"); - } - public Employee (String name, String dept) { - this.name = name; - this.dept = dept; - } -} -</pre> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function WorkerBee(projs) { - - this.projects = projs || []; -} -WorkerBee.prototype = new Employee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class WorkerBee extends Employee { - public String[] projects; - public WorkerBee () { - this(new String[0]); - } - public WorkerBee (String[] projs) { - projects = projs; - } -} -</pre> -</div> - -<div class="twocolumns"> -<pre class="brush: js"> -function Engineer(mach) { - this.dept = 'engineering'; - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class Engineer extends WorkerBee { - public String machine; - public Engineer () { - dept = "engineering"; - machine = ""; - } - public Engineer (String mach) { - dept = "engineering"; - machine = mach; - } -} -</pre> -</div> - -<p>Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:</p> - -<pre class="brush: js">this.name = name || ''; -</pre> - -<p>Логічний оператор АБО у JavaScript (<code>||</code>) обчислює перше значення. Якщо результат можна привести до <code>true</code>, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи <code>name</code> має якесь корисне значення для властивості <code>name</code>. Якщо так — <code>this.name</code> отримує її значення, а інакше значенням <code>this.name</code> стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.</p> - -<div class="note"> -<p><strong>Зауважте, що:</strong> це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до <code><code>false</code></code> (число <code>0</code> і порожній рядок (<code><code>""</code></code>). У цьому випадку буде обрано значення за замовчуванням.</p> -</div> - -<p>Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр <code>Engineer</code>:</p> - -<pre class="brush: js">var jane = new Engineer('belau'); -</pre> - -<p>Властивості <code>Jane</code> тепер виглядають так:</p> - -<pre class="brush: js">jane.name == ''; -jane.dept == 'engineering'; -jane.projects == []; -jane.machine == 'belau'; -</pre> - -<p>Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля <code>name</code>. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.</p> - -<p>Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.</p> - -<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> - <small><strong>Задання властивостей у конструкторі, варіант 2</strong></small></p> - -<p>Розгляньмо детальніше одне із цих визначень. Ось новий конструктор <code>Engineer</code>:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> - -<p>Припустимо, ви ось так створюєте новий об'єкт <code>Engineer</code>:</p> - -<pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -</pre> - -<p>Тут JavaScript виконує наступні кроки:</p> - -<ol> - <li>Оператор <code>new</code> створює загальний об'єкт і задає <code>Engineer.prototype</code> значенням його властивості <code>__proto__</code> .</li> - <li>Оператор <code>new</code> передає новий об'єкт у конструктор <code>Engineer</code> в якості значення <code>this</code>.</li> - <li>Конструктор створює нову властивість <code>base</code> для цього об'єкту і присвоює їй значення конструктора <code>WorkerBee</code>. Так конструктор <code>WorkerBee</code> стає методом об'єкту <code>Engineer</code>. Назва властивості <code>base</code> не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а <code>base</code> просто звучить змістовно для даного випадку.</li> - <li>Конструктор викликає метод <code>base</code>, передаючи в нього два своїх аргументи (<code>"Doe, Jane"</code> і <code>["navigator", "javascript"]</code>) і новий рядок <code>"engineering"</code>. Явно вказаний <code>"engineering"</code> у конструкторі означає, що всі об'єкти <code>Engineer</code> матимуть одне значення для наслідуваної властивості <code>dept</code>, і це значення заміщує успадковане від <code>Employee</code>.</li> - <li>Так як метод <code>base</code> належить <code>Engineer</code>, всередині виклику <code>base</code> JavaScript прив'язує значення <code>this</code> до об'єкту, створеного на першому етапі. Таким чином функція <code>WorkerBee</code>, в свою чергу, передає аргументи <code>"Doe, Jane"</code> та <code>"engineering"</code> до конструктора <code>Employee</code>. Після повернення з конструктора <code>Employee</code> функція <code>WorkerBee</code> задає останнім аргументом поле <code>projects</code>.</li> - <li>Після повернення з методу <code>base</code> конструктор <code>Engineer</code> ініціалізовує властивість <code>machine</code> об'єкту значенням <code>"belau"</code>.</li> - <li>Після повернення з конструктору JavaScript присвоює новий об'єкт змінній <code>jane</code>.</li> -</ol> - -<p>Може скластися враження, що, викликавши конструтктор <code>WorkerBee</code> зсередини конструктора <code>Engineer</code>, ви вкажете наслідування відповідно для об'єктів <code>Engineer</code>. Насправді виклик конструктора <code>WorkerBee</code> гарантує, що об'єкт <code>Engineer</code> матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів <code>Employee</code> чи <code>WorkerBee</code>, вони не будуть успадковані об'єктом <code>Engineer</code>. Припустимо, у нас є наступні інструкції:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -Employee.prototype.specialty = 'none'; -</pre> - -<p>Об'єкт <code>jane</code> не наслідує властивість <code>specialty</code>. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; -var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -Employee.prototype.specialty = 'none'; -</pre> - -<p>Тепер значенням властивості <code>specialty</code> об'єкту <code>jane</code> являється "none".</p> - -<p>Іншим способом наслідування являється використання методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> чи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Ось дві еквівалентні ділянки коду:</p> - -<div class="twocolumns"> -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> - -<pre class="brush: js">function Engineer(name, projs, mach) { - WorkerBee.call(this, name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> -</div> - -<p>Використання методу <code>call()</code> дає більш чисту реалізацію, так як <code>base</code> більше не потрібен.</p> - -<h2 id="Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</h2> - -<p>У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.</p> - -<h3 id="Локальні_і_успадковані_змінні">Локальні і успадковані змінні</h3> - -<p>Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):</p> - -<ol> - <li>Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.</li> - <li>Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість <code>__proto__</code>).</li> - <li>Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.</li> - <li>Якщо вказана властивість не знайдена — значить, об'єкт її не має.</li> -</ol> - -<p>Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти. Перший приклад мав такі визначення:</p> - -<pre class="brush: js">function Employee() { - this.name = ''; - this.dept = 'general'; -} - -function WorkerBee() { - this.projects = []; -} -WorkerBee.prototype = new Employee; -</pre> - -<p>Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр <code>WorkerBee</code> у змінній <code>amy</code>:</p> - -<pre class="brush: js">var amy = new WorkerBee; -</pre> - -<p>Об'єкт <code>amy</code> має одну локальну змінну — <code>projects</code>. Значення властивостей <code>name</code> та <code>dept</code> насправді не належать <code>amy</code>, і тому виводяться через поле її поле <code>__proto__</code>. Отже, <code>amy</code> має такі значення властивостей:</p> - -<pre class="brush: js">amy.name == ''; -amy.dept == 'general'; -amy.projects == []; -</pre> - -<p>Тепер припустимо, що ви змінили значення властивості <code>name</code> у прототипі, асоційованому з <code>Employee</code>:</p> - -<pre class="brush: js">Employee.prototype.name = 'Unknown'; -</pre> - -<p>На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри <code>Employee</code>. Однак, це не так.</p> - -<p>При створенні <em>будь-якого</em> екземпляру об'єкту <code>Employee</code>, цей екземпляр отримає <strong>локальне значення</strong> для властивості <code>name</code> (порожній рядок). Тобто, коли ми задаємо прототип <code>WorkerBee</code> шляхом створення нового об'єкту <code>Employee</code>, <code>WorkerBee.prototype</code> має локальне значення властивості <code>name</code>. Отже, коли JavaScript шукає властивість <code>name</code> об'єкту <code>amy</code> (екземпляр <code>WorkerBee</code>), він знаходить місцеве значення властивості у <code>WorkerBee.prototype</code>. І тому він не намагається шукати далі в ланцюжку прототипів до <code>Employee.prototype</code>.</p> - -<p>Якщо ви хочете змінити значення властивості під час виконання, та ще й так, щоб воно поширилось на всіх нащадків об'єкту, слід визначати це значення не у конструкторі об'єкту, а у прототипі конструктора. Припустимо, наприклад, що ви змінили попередній варіант реалізації на такий:</p> - -<pre class="brush: js">function Employee() { - this.dept = 'general'; // Зауважте, що тут немає this.name (локальної змінної) -} -Employee.prototype.name = ''; // Одна копія - -function WorkerBee() { - this.projects = []; -} -WorkerBee.prototype = new Employee; - -var amy = new WorkerBee; - -Employee.prototype.name = 'Unknown'; -</pre> - -<p>У цьому випадку, властивість <code>amy</code> <code>name</code> стане "Unknown".</p> - -<p>Як ілюструють ці приклади, якщо вам потрібно і мати значення за замовчуванням для властивостей об'єктів, і можливість змінювати ці значення за замовчуванням під час виконання, слід задавати властивості у прототипі конструктора, а не у самому конструкторі.</p> - -<h3 id="Визначення_відносин_екземпляру">Визначення відносин екземпляру</h3> - -<p>Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості <code>__proto__</code>. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".</p> - -<p>Властивість <code>__proto__</code> встановлюється у момент конструювання об'єкту; вказує вона на властивість <code>prototype</code> конструктора. Тобто вираз <code>new Foo()</code> створює об'єкт із<code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Відповідно, зміни у <code class="moz-txt-verticalline">Foo.prototype</code> впливають на пошук властивості всіх об'єктів, створених через <code>new Foo()</code>.</p> - -<p>Кожен об'єкт має властивість <code>__proto__</code> (за винятком <code>Object</code>); кожна функція має властивість <code>prototype</code>. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість <code>__proto__</code> об'єкту із об'єктом <code>prototype</code> функції. JavaScript надає скорочення: оператор <code>instanceof</code> порівнює об'єкт і функцію, і повертає <font face='consolas,"Liberation Mono",courier,monospace'>true</font>, якщо об'єкт є нащадком прототипу функції. Наприклад:</p> - -<pre class="brush: js">var f = new Foo(); -var isTrue = (f instanceof Foo);</pre> - -<p>Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у <a href="#Наслідування_властивостей">Наслідування властивостей</a>. Створімо об'єкт <code>Engineer</code>:</p> - -<pre class="brush: js">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji'); -</pre> - -<p>Наступні вирази стосовно цього об'єкту являються істинними:</p> - -<pre class="brush: js">chris.__proto__ == Engineer.prototype; -chris.__proto__.__proto__ == WorkerBee.prototype; -chris.__proto__.__proto__.__proto__ == Employee.prototype; -chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; -chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; -</pre> - -<p>Враховуючи це, ми можемо ось так написати функцію <code>instanceOf</code>:</p> - -<pre class="brush: js">function instanceOf(object, constructor) { - object = object.__proto__; - while (object != null) { - if (object == constructor.prototype) - return true; - if (typeof object == 'xml') { - return constructor.prototype == XML.prototype; - } - object = object.__proto__; - } - return false; -} -</pre> - -<div class="note"><strong>Зверніть увагу, що:</strong> ця реалізація додатково перевіряє відношення об'єкту до типу "xml", щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.</div> - -<p>Наступні вирази із визначеною вище функцією instanceOf являються істинними:</p> - -<pre class="brush: js">instanceOf(chris, Engineer) -instanceOf(chris, WorkerBee) -instanceOf(chris, Employee) -instanceOf(chris, Object) -</pre> - -<p>Проте такий приклад в результаті видасть <code>false</code>:</p> - -<pre class="brush: js">instanceOf(chris, SalesPerson) -</pre> - -<h3 id="Глобальна_інформація_у_конструкторах">Глобальна інформація у конструкторах</h3> - -<p>Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити <code>Employee</code> так:</p> - -<pre class="brush: js">var idCounter = 1; - -function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - this.id = idCounter++; -} -</pre> - -<p>Згідно цього визначення <code>Employee</code>, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, <code>victoria.id</code> буде 1, а <code>harry.id</code> — 2:</p> - -<pre class="brush: js">var victoria = new Employee('Pigbert, Victoria', 'pubs'); -var harry = new Employee('Tschopik, Harry', 'sales'); -</pre> - -<p>На перший погляд все чудово. Однак, <code>idCounter</code> змінюється кожного разу, коли створюється екземпляр <code>Employee</code>, байдуже для чого. Якщо створити всю ієрархію <code>Employee</code>, наведену у цьому розділі, конструктор <code>Employee</code> буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:</p> - -<pre class="brush: js">var idCounter = 1; - -function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - this.id = idCounter++; -} - -function Manager(name, dept, reports) {...} -Manager.prototype = new Employee; - -function WorkerBee(name, dept, projs) {...} -WorkerBee.prototype = new Employee; - -function Engineer(name, projs, mach) {...} -Engineer.prototype = new WorkerBee; - -function SalesPerson(name, projs, quota) {...} -SalesPerson.prototype = new WorkerBee; - -var mac = new Engineer('Wood, Mac'); -</pre> - -<p>Далі припустимо, що визначення, що опущені тут мають властивість <code>base</code> і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту <code>mac</code>, <code>mac.id</code> буде 5.</p> - -<p>Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:</p> - -<pre class="brush: js">function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - if (name) - this.id = idCounter++; -} -</pre> - -<p>При створенні екземпляру <code>Employee</code> для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення <code>id</code> та не оновлює лічильник. Таким чином, щоб отримати <code>Employee</code> із призначеним <code>id</code>, необхідно задати ім'я робітника. У цьому випадку <code>mac.id</code> буде дорівнювати 1.</p> - -<p>Інший варіант <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>—</span> створювати копію об'єкту-прототипу <span style='background-color: #eeeeee; color: #333333; direction: ltr; display: inline !important; float: none; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>Employee</span>, щоб потім присвоювати її WorkerBee:</p> - -<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype); -// instead of WorkerBee.prototype = new Employee -</pre> - -<h3 id="Відсутність_множинного_успадкування">Відсутність множинного успадкування</h3> - -<p>Деякі об'єктно-орієнтовані мови програмування дозволяють множинне успадкування. Це означає, що об'єкт може наслідувати поля і властивості від незалежних батьківських об'єктів. JavaScript не підтримує такий тип наслідування.</p> - -<p>Наслідування значення властивості відбувається в момент виконання програми, коли JavaScript шукає значення властивості у ланцюжку прототипів об'єкту. Так як об'єкт має лише один прототип, JavaScript не може виконувати наслідування від більш ніж одного прототипного ланцюжка.</p> - -<p>У JavaScript ми можемо мати функцію-конструктор, що викликає два чи більше інших конструкторів під час виконання. Це дає певну ілюзію множинного наслідування. Наприклад, припустимо, у нас є такі інструкції:</p> - -<pre class="brush: js">function Hobbyist(hobby) { - this.hobby = hobby || 'scuba'; -} - -function Engineer(name, projs, mach, hobby) { - this.base1 = WorkerBee; - this.base1(name, 'engineering', projs); - this.base2 = Hobbyist; - this.base2(hobby); - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; - -var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo'); -</pre> - -<p>Далі припустимо, що визначення <code>WorkerBee</code> відповідає вказаному вище у розділі. У цьому випадку об'ект <code>dennis</code> матиме такі значення властивостей:</p> - -<pre class="brush: js">dennis.name == 'Doe, Dennis'; -dennis.dept == 'engineering'; -dennis.projects == ['collabra']; -dennis.machine == 'hugo'; -dennis.hobby == 'scuba'; -</pre> - -<p>Тобто <code>dennis</code> отримує поле <code>hobby</code> з конструктора <code>Hobbyist</code>. Однак, якщо ми потім додамо нову властивість до прототипу конструктора <code>Hobbyist</code>:</p> - -<pre class="brush: js">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd']; -</pre> - -<p>Об'єкт <code>dennis</code> не успадковує цю нову властивість.</p> - -<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> diff --git a/files/uk/web/javascript/guide/expressions_and_operators/index.html b/files/uk/web/javascript/guide/expressions_and_operators/index.html deleted file mode 100644 index 2dfed208f1..0000000000 --- a/files/uk/web/javascript/guide/expressions_and_operators/index.html +++ /dev/null @@ -1,926 +0,0 @@ ---- -title: Вирази та оператори -slug: Web/JavaScript/Guide/Expressions_and_Operators -tags: - - JavaScript - - Оператори - - Посібник - - вирази -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -original_slug: Web/JavaScript/Guide/Вирази_та_оператори ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> - -<p class="summary">Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.</p> - -<p>Повний та детальний список операторів та виразів також доступний за <a href="/uk/docs/Web/JavaScript/Reference/Operators">посиланням</a>.</p> - -<h2 id="Оператори">Оператори</h2> - -<p>JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.</p> - -<ul> - <li>{{ web.link("#Оператори_присвоєння", "Оператори присвоєння") }}</li> - <li>{{ web.link("#Оператори_порівняння", "Оператори порівняння") }}</li> - <li>{{ web.link("#Арифметичні_оператори", "Арифметичні оператори") }}</li> - <li>{{ web.link("#Бітові_оператори", "Бiтові оператори") }}</li> - <li>{{ web.link("#Логічні_оператори", "Логічні оператори") }}</li> - <li>{{ web.link("#Рядкові_оператори", "Рядкові оператори") }}</li> - <li>{{ web.link("#Умовний_тернарний_оператор", "Умовний (тернарний) оператор")}}</li> - <li>{{ web.link("#Comma_operator", "Оператор кома")}}</li> - <li>{{ web.link("#Унарні_оператори", "Унарні оператори")}}</li> - <li>{{ web.link("#Оператори_відношення", "Оператори відношення")}}</li> -</ul> - -<p>JavaScript має як <em>бінарні</em>, так і <em>унарні</em> оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:</p> - -<pre class="syntaxbox"><em>операнд1 </em><em>оператор</em> <em>операнд2</em> -</pre> - -<p>Наприклад, <code>3+4</code> чи <code>x*y</code>.</p> - -<p>Унарний оператор потребує лише одного операнду до чи після оператора:</p> - -<pre class="syntaxbox"><em>оператор</em> <em>операнд</em> -</pre> - -<p>чи</p> - -<pre class="syntaxbox"><em>операнд оператор</em> -</pre> - -<p>Наприклад, <code>x++</code> чи <code>++x</code>.</p> - -<h3 id="Оператори_присвоєння">Оператори присвоєння</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператор присвоєння</a> присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює значення змінної <code>y</code> змінній <code>x</code>.</p> - -<p>Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:</p> - -<table class="standard-table"> - <caption>Складені оператори присвоювання</caption> - <thead> - <tr> - <th>Назва</th> - <th>Оператор скороченого запису</th> - <th>Значення</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Assignment">Присвоєння</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з додаванням</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з відніманням</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з множенням</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Division_assignment">Присвоєння з діленням</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння остачі</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з піднесенням до степеня</a>{{experimental_inline}}</td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Left_shift_assignment">Присвоєння з лівим зсувом</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Right_shift_assignment">Присвоєння з правим зсувом</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з беззнаковим правим зсувом</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим І</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим АБО</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h4 id="Деструктуризація">Деструктуризація</h4> - -<p>Для більш складних присвоювань використовується синтаксис <a href="/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктуризації</a>. Це вираз JavaScript, який надає можливість витягувати дані з масивів та об'єктів, використовуючи синтаксис, що віддзеркалює конструкцію масивів та об'єктних літералів. </p> - -<pre class="brush: js">var foo = ['один', 'два', 'три']; - -// без деструктуризації -var one = foo[0]; -var two = foo[1]; -var three = foo[2]; - -// із деструктуризацією -var [one, two, three] = foo; -</pre> - -<h3 id="Оператори_порівняння">Оператори порівняння</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператор порівняння</a> порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори <code>===</code> та <code>!==</code>, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:</p> - -<pre class="brush: js">var var1 = 3; -var var2 = 4; -</pre> - -<table class="standard-table"> - <caption>Оператори порівняння</caption> - <thead> - <tr> - <th scope="col">Оператор</th> - <th scope="col">Опис</th> - <th scope="col">Приклади, які повертають true</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність">Рівність</a> (<code>==</code>)</td> - <td>Повертає <code>true</code>, якщо оператори рівні.</td> - <td><code>3 == var1</code> - <p><code>"3" == var1</code></p> - <code>3 == '3'</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Нерівність_!">Нерівність</a> (<code>!=</code>)</td> - <td>Повертає <code>true</code>, якщо оператори нерівні.</td> - <td><code>var1 != 4<br> - var2 != "3"</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність">Строга рівність</a> (<code>===</code>)</td> - <td>Повертає <code>true</code> якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однаковість у JS</a>.</td> - <td><code>3 === var1</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Неідентичність_строга_нерівність_!">Строга нерівність</a> (<code>!==</code>)</td> - <td>Повертає <code>true</code>, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.</td> - <td><code>var1 !== "3"<br> - 3 !== '3'</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_ніж_>">Більше ніж</a> (<code>></code>)</td> - <td>Повертає <code>true</code>, якщо лівий операнд більший за правий.</td> - <td><code>var2 > var1<br> - "12" > 2</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_чи_дорівнює_>">Більше чи дорівнює</a> (<code>>=</code>)</td> - <td>Повертає <code>true</code>, якщо значення лівого операнда більше або дорівнює значенню правого операнда.</td> - <td><code>var2 >= var1<br> - var1 >= 3</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_ніж_<">Менше ніж</a> (<code><</code>)</td> - <td>Повертає <code>true</code>, якщо лівий операнд менший за правий.</td> - <td><code>var1 < var2<br> - "2" < 12</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_чи_дорівнює_<">Менше чи дорівнює</a> (<code><=</code>)</td> - <td>Повертає <code>true</code>, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</td> - <td><code>var1 <= var2<br> - var2 <= 5</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Заувага: </strong>(<strong>=></strong>) не оператор, а позначення для <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>.</p> -</div> - -<h3 id="Арифметичні_оператори">Арифметичні оператори</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичний оператор</a> приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (<code>+</code>), віднімання (<code>-</code>), множення (<code>*</code>) та ділення (<code>/</code>). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:</p> - -<pre class="brush: js">1 / 2; // 0.5 -1 / 2 == 1.0 / 2.0; // це дорівнює true -</pre> - -<p>На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:</p> - -<table class="fullwidth-table"> - <caption>Арифметичні оператори</caption> - <thead> - <tr> - <th scope="col">Оператор</th> - <th scope="col">Опис</th> - <th scope="col">Приклад</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остача</a> (<code>%</code>)</td> - <td>Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.</td> - <td>12 % 5 повертає 2.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Інкремент</a> (<code>++</code>)</td> - <td>Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (<code>++x</code>), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (<code>x++</code>), повертає значення операнда перед додаванням одиниці.</td> - <td>Якщо <code>x</code> дорівнює 3, тоді <code>++x</code> присвоює <code>x</code> значення 4 та повертає 4, в той час, як <code>x++</code> повертає 3 і лише тоді присвоює <code>x</code> значення 4.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Декремент</a> (<code>--</code>)</td> - <td>Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.</td> - <td>Якщо <code>x</code> дорівнює 3, тоді <code>--x</code> присвоює <code>x</code> значення 2 та повертає 2, в той час, як <code>x--</code> повертає 3 і тільки тоді присвоює <code>x</code> значення 2.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарний мінус</a> (<code>-</code>)</td> - <td>Унарний оператор. Повертає операнд з протилежним знаком.</td> - <td>Якщо <code>x</code> дорівнює 3, то <code>-x</code> повертає -3.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Унарний_плюс">Унарний плюс</a> (<code>+</code>)</td> - <td>Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.</td> - <td><code>+"3"</code> повертає <code>3</code>.<br> - <code>+true</code> повертає <code>1.</code></td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Піднесення до степеня</a> (<code>**</code>) {{experimental_inline}}</td> - <td>Підносить <code>основу степеня</code> до <code>показника</code> степеня, тобто, <code>основа<sup>показник</sup></code></td> - <td><code>2 ** 3</code> повертає <code>8</code>.<br> - <code>10 ** -1</code> повертає <code>0.1</code>.</td> - </tr> - </tbody> -</table> - -<h3 id="Бітові_оператори">Бітові оператори</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітовий оператор</a> опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p> - -<p>Наступна таблиця наводить перелік бітових операторів JavaScript.</p> - -<table class="standard-table"> - <caption>Бітові оператори</caption> - <thead> - <tr> - <th scope="col">Оператор</th> - <th scope="col">Застосування</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_І">Побітове І (AND)</a></td> - <td><code>a & b</code></td> - <td>Повертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_АБО">Побітове АБО (OR)</a></td> - <td><code>a | b</code></td> - <td>Повертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td> - <td><code>a ^ b</code></td> - <td>Повертає нуль на кожній позиції, де відповідні біти однакові.<br> - [Повертає один на кожній позиції, де відповідні біти мають різні значення.]</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_НЕ">Побітове НЕ (NOT)</a></td> - <td><code>~ a</code></td> - <td>Виконує інверсію бітів операнду.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#<<_Лівий_зсув">Лівий зсув</a></td> - <td><code>a << b</code></td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів ліворуч, заповнюючи позиції справа нулями.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td> - <td><code>a >> b</code></td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td> - <td><code>a >>> b</code></td> - <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td> - </tr> - </tbody> -</table> - -<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Побітові логічні оператори</h4> - -<p>Концептуально побітові логічні оператори працюють наступним чином:</p> - -<ul> - <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число: - <pre>До: 11100110111110100000000000000110000000000001 -Після: 10100000000000000110000000000001</pre> - </li> - <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li> - <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li> -</ul> - -<p>Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 1111. Отже, коли бітові оператори застосовуються до цих величин, результати будуть наступні:</p> - -<table class="standard-table"> - <caption>Приклади бітових операторів</caption> - <thead> - <tr> - <th scope="col">Вираз</th> - <th scope="col">Результат</th> - <th scope="col">Двійковий опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>15 & 9</code></td> - <td><code>9</code></td> - <td><code>1111 & 1001 = 1001</code></td> - </tr> - <tr> - <td><code>15 | 9</code></td> - <td><code>15</code></td> - <td><code>1111 | 1001 = 1111</code></td> - </tr> - <tr> - <td><code>15 ^ 9</code></td> - <td><code>6</code></td> - <td><code>1111 ^ 1001 = 0110</code></td> - </tr> - <tr> - <td><code>~15</code></td> - <td><code>-16</code></td> - <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td> - </tr> - <tr> - <td><code>~9</code></td> - <td><code>-10</code></td> - <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td> - </tr> - </tbody> -</table> - -<p>Зауважте, що усі 32 біти інвертуються побітовим оператором НЕ, і що значення, в яких найстарший (перший зліва) біт дорівнює 1, відображають від'ємні числа (формат доповняльного коду).</p> - -<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Оператори бітового зсуву</h4> - -<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p> - -<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.</p> - -<p>Оператори зсуву наведені у наступній таблиці.</p> - -<table class="fullwidth-table"> - <caption>Оператори бітового зсуву</caption> - <thead> - <tr> - <th scope="col">Оператор</th> - <th scope="col">Опис</th> - <th scope="col">Приклад</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#<<_Лівий_зсув">Лівий зсув</a><br> - (<code><<</code>)</td> - <td>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</td> - <td><code>9<<2</code> вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a> (<code>>></code>)</td> - <td> - <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.</p> - </td> - <td><code>9>>2</code> вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, <code>-9>>2</code> вертає -3, тому що знак зберігається.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a>(<code>>>></code>)</td> - <td> - <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.</p> - </td> - <td><code>19>>>2</code> вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.</td> - </tr> - </tbody> -</table> - -<h3 id="Логічні_оператори">Логічні оператори</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a> застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&&</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.</p> - -<table class="fullwidth-table"> - <caption>Логічні оператори</caption> - <thead> - <tr> - <th scope="col">Оператор</th> - <th scope="col">Застосування</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_І">Логічне І</a> (<code>&&</code>)</td> - <td><code>expr1 && expr2</code></td> - <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>false</code>; інакше, повертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>&&</code> вертає <code>true</code>, якщо обидва операнди дорівнюють true; інакше, вертає <code>false</code>.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_АБО">Логічне АБО </a>(<code>||</code>)</td> - <td><code>expr1 || expr2</code></td> - <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>true</code>; інакше, вертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>||</code> вертає <code>true</code>, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає <code>false</code>.</td> - </tr> - <tr> - <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_НЕ_!">Логічне НЕ </a>(<code>!</code>)</td> - <td><code>!expr</code></td> - <td>Вертає <code>false</code>, якщо його єдиний операнд може бути перетворений на <code>true</code>; інакше, вертає <code>true</code>.</td> - </tr> - </tbody> -</table> - -<p>Прикладами виразів, які можуть бути перетворені на <code>false</code>, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.</p> - -<p>Наступний код демонструє приклади оператора <code>&&</code> (логічне І).</p> - -<pre class="brush: js">var a1 = true && true; // t && t вертає true -var a2 = true && false; // t && f вертає false -var a3 = false && true; // f && t вертає false -var a4 = false && (3 == 4); // f && f вертає false -var a5 = 'Кіт' && 'Пес'; // t && t вертає Пес -var a6 = false && 'Кіт'; // f && t вертає false -var a7 = 'Кіт' && false; // t && f вертає false -</pre> - -<p>Наступний код демонструє приклади оператора <code>||</code> (логічне АБО).</p> - -<pre class="brush: js">var o1 = true || true; // t || t вертає true -var o2 = false || true; // f || t вертає true -var o3 = true || false; // t || f вертає true -var o4 = false || (3 == 4); // f || f вертає false -var o5 = 'Кіт' || 'Пес'; // t || t вертає Кіт -var o6 = false || 'Кіт'; // f || t вертає Кіт -var o7 = 'Кіт' || false; // t || f вертає Кіт -</pre> - -<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p> - -<pre class="brush: js">var n1 = !true; // !t вертає false -var n2 = !false; // !f вертає true -var n3 = !'Кіт'; // !t вертає false -</pre> - -<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Коротке замикання обчислення</h4> - -<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p> - -<ul> - <li><code>false</code> && <em>будь-що</em> обчислюється як false.</li> - <li><code>true</code> || <em>будь-що</em> обчислюється як true.</li> -</ul> - -<p>Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу <em>будь-що</em> не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.</p> - -<h3 id="Рядкові_оператори">Рядкові оператори</h3> - -<p>На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.</p> - -<p>Наприклад,</p> - -<pre class="brush: js">console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".</pre> - -<p>Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.</p> - -<p>Наприклад,</p> - -<pre class="brush: js">var mystring = 'алфа'; -mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.</pre> - -<h3 id="Умовний_тернарний_оператор">Умовний (тернарний) оператор</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a> - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:</p> - -<pre class="syntaxbox"><em>умова</em> ? значення<em>1</em> : значення<em>2</em> -</pre> - -<p>Якщо <code>умова</code> дорівнює true, оператор повертає <code>значення1</code>. В іншому випадку - <code>значення2</code>. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:</p> - -<pre class="brush: js">var status = (age >= 18) ? 'дорослий' : 'неповнолітній'; -</pre> - -<p>Ця інструкція присвоює значення "дорослий" змінній <code>status</code>, якщо значення <code>age</code> (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній <code>status</code> значення "неповнолітній".</p> - -<h3 id="Comma_operator" name="Comma_operator">Оператор кома</h3> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Оператор кома</a> (<code>,</code>) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу <code>for</code>, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.</p> - -<p>Наприклад, якщо <code>a</code> є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:</p> - -<pre class="brush: js">for (var i = 0, j = 9; i <= j; i++, j--) - console.log('a[' + i + '][' + j + ']= ' + a[i][j]); -</pre> - -<h3 id="Унарні_оператори">Унарні оператори</h3> - -<p>Унарна операція - це операція лише з одним операндом.</p> - -<h4 id="delete" name="delete"><code>delete</code></h4> - -<p>Оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:</p> - -<pre class="brush: js">delete objectName; -delete objectName.property; -delete objectName[index]; -delete property; // працює лише всередині конструкції with -</pre> - -<p>де <code>objectName</code> є іменем об'єкта, <code>property</code> - існуюча властивість, а <code>index</code> - ціле число, що вказує розташування елемента у масиві.</p> - -<p>Четверта форма працює лише всередині блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> для видалення властивості об'єкта.</p> - -<p>Ви можете використовувати оператор <code>delete</code> для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором <code>var</code>.</p> - -<p>Якщо оператор <code>delete</code> відпрацьовує успішно, значенням властивості чи елемента стає <code>undefined</code>. Оператор <code>delete</code> повертає <code>true</code>, якщо операція можлива; він повертає <code>false</code>, якщо операція неможлива.</p> - -<pre class="brush: js">x = 42; -var y = 43; -myobj = new Number(); -myobj.h = 4; // створює властивість h -delete x; // вертає true (можна видалити властивість, оголошену неявно) -delete y; // вертає false (не можна видалити властивість, оголошену через var) -delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості) -delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем) -delete myobj; // вертає true (можна видалити, якщо властивість оголошена неявно) -</pre> - -<h5 id="Видалення_елементів_масиву">Видалення елементів масиву</h5> - -<p>Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите <code>a[3]</code>, <code>a[4]</code> досі є <code>a[4]</code>, а <code>a[3]</code> дорівнює undefined.</p> - -<p>Коли оператор <code>delete</code> видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі <code>trees[3]</code> видаляється оператором <code>delete</code>. Однак, адреса <code>trees[3]</code> досі доступна та повертає <code>undefined</code>.</p> - -<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; -delete trees[3]; -if (3 in trees) { - // це не виконається -} -</pre> - -<p>Якщо вам потрібно, щоб елемент існував, але мав значення undefined, скористайтесь ключовим словом <code>undefined</code> замість оператора <code>delete</code>. У наступному прикладі <code>trees[3]</code> присвоюється значення <code>undefined</code>, але елемент масиву досі існує:</p> - -<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; -trees[3] = undefined; -if (3 in trees) { - // це виконається -} -</pre> - -<h4 id="typeof" name="typeof"><code>typeof</code></h4> - -<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> використовується наступним чином:</p> - -<pre class="syntaxbox">typeof операнд -typeof (операнд) -</pre> - -<p>Оператор <code>typeof</code> повертає рядок, що вказує тип необчисленого операнда. <code>Операнд</code> є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.</p> - -<p>Припустимо, ви визначили наступні змінні:</p> - -<pre class="brush: js">var myFun = new Function('5 + 2'); -var shape = 'коло'; -var size = 1; -var foo = ['Яблуко', 'Манго', 'Апельсин']; -var today = new Date(); -</pre> - -<p>Оператор <code>typeof</code> вертає наступні результати для цих змінних:</p> - -<pre class="brush: js">typeof myFun; // вертає "function" -typeof shape; // вертає "string" -typeof size; // вертає "number" -typeof foo; // вертає "object" -typeof today; // вертає "object" -typeof doesntExist; // вертає "undefined" -</pre> - -<p>Для ключових слів <code>true</code> та <code>null</code> оператор <code>typeof</code> вертає наступні результати:</p> - -<pre class="brush: js">typeof true; // вертає "boolean" -typeof null; // вертає "object" -</pre> - -<p>Для числа та рядка оператор <code>typeof</code> вертає наступні результати:</p> - -<pre class="brush: js">typeof 62; // вертає "number" -typeof 'Hello world'; // вертає "string" -</pre> - -<p>Для значень властивостей оператор <code>typeof</code> вертає тип значення, яке містить ця властивість:</p> - -<pre class="brush: js">typeof document.lastModified; // вертає "string" -typeof window.length; // вертає "number" -typeof Math.LN2; // вертає "number" -</pre> - -<p>Для методів та функцій оператор <code>typeof</code> вертає наступні результати:</p> - -<pre class="brush: js">typeof blur; // вертає "function" -typeof eval; // вертає "function" -typeof parseInt; // вертає "function" -typeof shape.split; // вертає "function" -</pre> - -<p>Для попередньо визначених об'єктів оператор <code>typeof</code> вертає наступні результати:</p> - -<pre class="brush: js">typeof Date; // вертає "function" -typeof Function; // вертає "function" -typeof Math; // вертає "object" -typeof Option; // вертає "function" -typeof String; // вертає "function" -</pre> - -<h4 id="void" name="void"><code>void</code></h4> - -<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/void"><code>void</code></a> використовується наступним чином:</p> - -<pre class="syntaxbox">void (вираз) -void вираз -</pre> - -<p>Оператор <code>void</code> вказує, що вираз має бути обчислений без повернення значення. <code>Вираз</code> є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.</p> - -<p>Ви можете скористатись оператором <code>void</code>, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.</p> - -<p>Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, <code>void(0)</code> обчислюється як <code>undefined</code>, що не має жодного ефекту у JavaScript.</p> - -<pre class="brush: html"><a href="javascript:void(0)">Натисніть сюди, щоб нічого не робити</a> -</pre> - -<p>Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.</p> - -<pre class="brush: html"><a href="javascript:void(document.form.submit())"> -Натисніть сюди, щоб відправити</a></pre> - -<h3 id="Оператори_відношення">Оператори відношення</h3> - -<p>Оператор відношення порівнює свої операнди та повертає значення <code>Boolean</code>, на підставі того, чи є порівняння істиною.</p> - -<h4 id="in"><code>in</code></h4> - -<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> повертає <code>true</code>, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:</p> - -<pre class="brush: js">propNameOrNumber in objectName -</pre> - -<p>де <code>propNameOrNumber</code> є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а <code>objectName</code> є ім'ям об'єкта.</p> - -<p>Наступний приклад демонструє варіанти використання оператора <code>in</code>.</p> - -<pre class="brush: js">// Масиви -var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; -0 in trees; // вертає true -3 in trees; // вертає true -6 in trees; // вертає false -'лавр' in trees; // вертає false (ви маєте вказати індекс, - // а не значення за цим індексом) -'length' in trees; // вертає true (length є властивістю масиву) - -// вбудовані об'єкти -'PI' in Math; // вертає true -var myString = new String('корал'); -'length' in myString; // вертає true - -// Користувацькі об'єкти -var mycar = { make: 'Honda', model: 'Accord', year: 1998 }; -'make' in mycar; // вертає true -'model' in mycar; // вертає true -</pre> - -<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4> - -<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a> повертає <code>true</code>, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:</p> - -<pre class="syntaxbox">objectName instanceof objectType -</pre> - -<p>де <code>objectName</code> є ім'ям об'єкта, який порівнюється з <code>objectType</code>, а <code>objectType</code> є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.</p> - -<p>Використовуйте <code>instanceof</code>, коли вам необхідно підтвердити тип об'єкта під час виконання. Наприклад, перехоплюючи винятки, ви можете зробити відгалуження до іншого коду обробки винятків, в залежності від типу викинутого винятку.</p> - -<p>Наприклад, наступний код використовує <code>instanceof</code> для визначення того, чи <code>theDay</code> є об'єктом <code>Date</code>. Оскільки <code>theDay</code> є об'єктом <code>Date</code>, інструкції у блоці <code>if</code> будуть виконані.</p> - -<pre class="brush: js">var theDay = new Date(1995, 12, 17); -if (theDay instanceof Date) { - // інструкції для виконання -} -</pre> - -<h3 id="Пріоритет_операторів">Пріоритет операторів</h3> - -<p><em>Пріоритет</em> операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.</p> - -<p>Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.</p> - -<table class="standard-table"> - <caption>Пріоритет операторів</caption> - <thead> - <tr> - <th scope="col">Тип оператора</th> - <th scope="col">Окремі оператори</th> - </tr> - </thead> - <tbody> - <tr> - <td>властивість</td> - <td><code>. []</code></td> - </tr> - <tr> - <td>виклик / створення екземпляра</td> - <td><code>() new</code></td> - </tr> - <tr> - <td>заперечення / інкремент</td> - <td><code>! ~ - + ++ -- typeof void delete</code></td> - </tr> - <tr> - <td>множення / ділення</td> - <td><code>* / %</code></td> - </tr> - <tr> - <td>додавання / віднімання</td> - <td><code>+ -</code></td> - </tr> - <tr> - <td>бітовий зсув</td> - <td><code><< >> >>></code></td> - </tr> - <tr> - <td>відношення</td> - <td><code>< <= > >= in instanceof</code></td> - </tr> - <tr> - <td>рівність</td> - <td><code>== != === !==</code></td> - </tr> - <tr> - <td>побітове-і</td> - <td><code>&</code></td> - </tr> - <tr> - <td>виключне-побітове-або</td> - <td><code>^</code></td> - </tr> - <tr> - <td>побітове-або</td> - <td><code>|</code></td> - </tr> - <tr> - <td>логічне-і</td> - <td><code>&&</code></td> - </tr> - <tr> - <td>логічне-або</td> - <td><code>||</code></td> - </tr> - <tr> - <td>умовний</td> - <td><code>?:</code></td> - </tr> - <tr> - <td>присвоєння</td> - <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |=</code></td> - </tr> - <tr> - <td>кома</td> - <td><code>,</code></td> - </tr> - </tbody> -</table> - -<p>Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">довіднику з JavaScript</a>.</p> - -<h2 id="Вирази">Вирази</h2> - -<p><em>Виразом</em> є будь-яка одиниця коду, яка вирішується з певним значенням.</p> - -<p>Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.</p> - -<p>Вираз <code>x = 7</code> є прикладом першого типу. Цей вираз використовує <em>оператор</em> = для присвоєння семи змінній<em> </em><code>x</code>. Сам вираз обчислюється з результатом сім.</p> - -<p>Код <code>3 + 4</code> є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.<br> - <br> - JavaScript має наступні категорії виразів:</p> - -<ul> - <li>Арифметичні: обчислюються як число, наприклад, 3.14159. (Загалом, використовують {{ web.link("#Арифметичні_оператори", "арифметичні оператори") }}.)</li> - <li>Рядкові: обчислюються як рядок, наприклад, "Фред" або "234". (Загалом, використовують {{ web.link("#Рядкові_оператори", "рядкові оператори") }}.)</li> - <li>Логічні: обчислюються як true або false. (Часто використовують {{ web.link("#Логічні_оператори", "логічні оператори") }}.)</li> - <li>Первинні вирази: Базові ключові слова та загальні вирази у JavaScript.</li> - <li>Лівосторонні вирази: значення зліва є призначенням присвоєння.</li> -</ul> - -<h3 id="Первинні_вирази">Первинні вирази</h3> - -<p>Базові ключові слова та загальні вирази у JavaScript.</p> - -<h4 id="this" name="this"><code>this</code></h4> - -<p>Використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">ключове слово <code>this</code></a> для посилання на поточний об'єкт. Загалом, <code>this</code> у методі посилається на об'єкт, що його викликав. Використовуйте <code>this</code> або з крапкою, або з дужковою нотацією:</p> - -<pre class="syntaxbox">this['propertyName'] -this.propertyName -</pre> - -<p>Припустимо, функція на ім'я <code>validate</code> перевіряє властивість об'єкта <code>value</code>, маючи найменше та найбільше значення:</p> - -<pre class="brush: js">function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - console.log('Некоректне значення!'); -} -</pre> - -<p>Ви можете викликати <code>validate</code> в кожному обробнику подій елементів форми <code>onChange</code>, використовуючи <code>this</code>, щоб передати йому елемент форми, як у наступному прикладі:</p> - -<pre class="brush: html"><p>Введіть число між 18 та 99:</p> -<input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);"> -</pre> - -<h4 id="Оператор_групування">Оператор групування</h4> - -<p>Оператор групування <code>( )</code> контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.</p> - -<pre class="brush:js">var a = 1; -var b = 2; -var c = 3; - -// пріоритет за замовчуванням -a + b * c // 7 -// обчислюється наступним чином -a + (b * c) // 7 - -// тепер змінюємо пріоритет -// додавання перед множенням -(a + b) * c // 9 - -// що є рівнозначним -a * c + b * c // 9 -</pre> - -<h3 id="Лівосторонні_вирази">Лівосторонні вирази</h3> - -<p>Значення зліва є призначенням присвоєння.</p> - -<h4 id="new" name="new"><code>new</code></h4> - -<p>Ви можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">оператором <code>new</code></a>, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте <code>new</code> наступним чином:</p> - -<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]); -</pre> - -<h4 id="super">super</h4> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">Ключове слово super</a> використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з <a href="/uk/docs/Web/JavaScript/Reference/Classes">класами</a>, для виклику батьківського конструктора, наприклад.</p> - -<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор. -super.functionOnParent([arguments]); -</pre> - -<h4 id="Оператор_розпакування">Оператор розпакування</h4> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Оператор розпакування</a> дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).</p> - -<p><strong>Приклад:</strong> Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з <code>push</code>, <code>splice</code>, <code>concat</code>, і т. д. З оператором розпакування все стає набагато лаконічнішим:</p> - -<pre class="brush: js">var parts = ['плечі', 'коліна']; -var lyrics = ['голова', ...parts, 'та', 'пальці'];</pre> - -<p>Схожим чином оператор розпакування працює з викликами функцій:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - -<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> diff --git a/files/uk/web/javascript/guide/functions/index.html b/files/uk/web/javascript/guide/functions/index.html deleted file mode 100644 index fcc14568b3..0000000000 --- a/files/uk/web/javascript/guide/functions/index.html +++ /dev/null @@ -1,655 +0,0 @@ ---- -title: Функції -slug: Web/JavaScript/Guide/Functions -translation_of: Web/JavaScript/Guide/Functions ---- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p> - -<p>Функції є одним з фундаментальних блоків у JavaScript. Функція є процедурою JavaScript, це набір команд, які виконують ту чи іншу задачу, або розраховують значення. Щоб використати функцію, ви маєте десь її визначити у тій області видимості, звідки ви бажаєте її викликати.</p> - -<p>Щоб дізнатись більше, дивіться <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a>.</p> - -<h2 id="Визначення_функції">Визначення функції</h2> - -<h3 id="Оголошення_функції">Оголошення функції</h3> - -<p><strong>Визначення функції</strong> (також називається <strong>оголошенням функції</strong>, або <strong>функціональним оператором</strong>) складається з ключового слова <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> , після чого слідує:</p> - -<ul> - <li>Ім'я функції.</li> - <li>В дужках йде список параметрів, які передаються функції.</li> - <li>Команди JavaScript, які визначають фунцію, поміщаються у фігурні дужки <code>{ }</code>.</li> -</ul> - -<p>Для прикладу, наступний код визначає просту функцію на ім'я <code>square</code>:</p> - -<pre class="brush: js">function square(number) { - return number * number; -}</pre> - -<p><font face="sans-serif, Arial, Verdana, Trebuchet MS">Функція </font><code>square</code> приймає один параметр <code>number</code>. Функція складається з однієї команди, що повертає результат множення агрумента (<code>number</code>) самого на себе. Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> визначає, яке значення повертає функція:</p> - -<pre class="brush: js">return number * number; -</pre> - -<p><span id="result_box" lang="uk"><span>Примітивні параметри (такі, як число) передаються функціям <strong>за</strong> <strong>значенням</strong>;</span> <span>значення передається до функції, але якщо функція змінює значення параметра, <strong>ця зміна не відображається глобально або у функції виклику.</strong></span></span></p> - -<p><span id="result_box" lang="uk"><span>Якщо ви передаєте об'єкт (тобто, непримітивне значення, наприклад, {{jsxref ("Array")}} або визначений користувачем об'єкт) у якості параметра, і функція змінює властивості об'єкта, ця зміна видима за межами функції</span><span>, як показано на наступному прикладі:</span></span></p> - -<pre class="brush: js">function myFunc(theObject) { - theObject.make = 'Toyota'; -} - -var mycar = {make: 'Honda', model: 'Accord', year: 1998}; -var x, y; - -x = mycar.make; // x отримує значення "Honda" - -myFunc(mycar); -y = mycar.make; // y отримує значення "Toyota" - // (властивість make була змінена функцією) -</pre> - -<h3 id="Функціональні_вирази"><span class="short_text" id="result_box" lang="uk"><span>Функціональні вирази</span></span></h3> - -<p><span id="result_box" lang="uk"><span>Хоча оголошення функцій вище синтаксично є виразом, функції також можуть бути створені за допомогою функціональних виразів.</span> <span>Така функція може бути <strong>анонімною</strong>;</span> їй не обов'язково мати ім'я<span>.</span> <span>Наприклад, </span></span><code>square</code><span lang="uk"><span> можна визначити як:</span></span></p> - -<pre class="brush: js">var square = function(number) { return number * number; }; -var x = square(4); // x gets the value 16</pre> - -<p><span id="result_box" lang="uk"><span class="alt-edited">Проте, ім'я може бути надане у функціональному виразі, і може бути використане всередині функції, щоб звернутися до самої себе, або в налагоджувач, щоб визначити функцію в трасуванні стеку:</span></span></p> - -<pre class="brush: js">var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); }; - -console.log(factorial(3)); -</pre> - -<p><span id="result_box" lang="uk"><span>Функціональні вирази зручні при передачі функції як аргументу до іншої функції.</span> <span>Наступний приклад показує функцію map, яка повинна отримати функцію як перший аргумент, а масив як другий аргумент.</span></span></p> - -<pre class="brush: js">function map(f, a) { - var result = [], // Створення нового масиву - i; - for (i = 0; i != a.length; i++) - result[i] = f(a[i]); - return result; -} -</pre> - -<p><span id="result_box" lang="uk"><span class="alt-edited">У наступному коді наша функція приймає функцію, визначену функціональним виразом, та виконує її для кожного елемента масиву, отриманого в якості другого аргументу.</span></span></p> - -<pre class="brush: js">function map(f, a) { - var result = []; // Створення нового масиву - var i; // <span class="short_text" id="result_box" lang="uk"><span>Оголошення змінної</span></span> - for (i = 0; i != a.length; i++) - result[i] = f(a[i]); - return result; -} -var f = function(x) { - return x * x * x; -} -var numbers = [0,1, 2, 5,10]; -var cube = map(f,numbers); -console.log(cube);</pre> - -<p>Функція повертає: [0, 1, 8, 125, 1000].</p> - -<p><span id="result_box" lang="uk"><span>У JavaScript функція може бути визначена на основі умови</span></span>. <span id="result_box" lang="uk"><span>Наприклад, наступне визначення функції визначає</span></span> <code>myFunc</code> тільки якщо <code>num</code> дорівнює 0:</p> - -<pre class="brush: js">var myFunc; -if (num === 0) { - myFunc = function(theObject) { - theObject.make = 'Toyota'; - } -}</pre> - -<p class="brush: js"><span lang="uk"><span>На додаток до визначення функцій, як описано тут, ви також можете використовувати конструктор {{jsxref ("Function")}} для створення функцій з текстового рядка під час виконання, як і </span></span>{{jsxref("eval", "eval()")}}<span lang="uk"><span>.</span></span></p> - -<p><span id="result_box" lang="uk"><span class="alt-edited"><strong>Метод</strong> - це функція, яка є властивістю об'єкта.</span> <span>Докладніше про об'єкти та методи у</span></span> <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> - -<h2 id="Виклик_функцій">Виклик функцій</h2> - -<p><span id="result_box" lang="uk"><span>Визначення функції не виконує її.</span> <span>Визначення функції просто називає функцію і вказує, що робити, коли викликається функція.</span> <span><strong>Виклик</strong> функції, власне, виконує вказані дії з вказаними параметрами.</span> <span>Наприклад, якщо ви визначили функцію</span></span> <code>square</code>, <span class="short_text" id="result_box" lang="uk"><span>ви можете викликати її наступним чином:</span></span></p> - -<pre class="brush: js">square(5); -</pre> - -<p><span id="result_box" lang="uk"><span>Наведений вираз викликає функцію з аргументом 5. Функція виконує свої команди та повертає значення 25.</span></span></p> - -<p><span id="result_box" lang="uk"><span class="alt-edited">Функції повинні бути в області видимості під час виклику, але оголошення функції може підніматись (бути записаним нижче виклику), як у цьому прикладі:</span></span></p> - -<pre class="brush: js">console.log(square(5)); -/* ... */ -function square(n) { return n * n; } -</pre> - -<p><span id="result_box" lang="uk"><span class="alt-edited">Областю видимості функції є функція, в якій вона оголошена, або вся програма, якщо вона оголошена на верхньому рівні.</span></span></p> - -<div class="blockIndicator note"> -<p><strong>Примітка:</strong> <span id="result_box" lang="uk"><span>Це працює тільки при визначенні функції за допомогою наведеного вище синтаксису</span></span> (тобто <code>function funcName(){}</code>). <span id="result_box" lang="uk"><span>Наведений нижче код не буде працювати.</span> <span>Це означає, що підняття функції працює тільки для оголошення функції, а не для функціонального виразу.</span></span></p> -</div> - -<pre class="brush: js">console.log(square); // square піднімається з початковим значенням undefined. -console.log(square(5)); // TypeError: square is not a function -var square = function(n) { - return n * n; -} -</pre> - -<p><span id="result_box" lang="uk"><span>Аргументи функції не обмежені рядками та числами.</span> <span>Ви можете передавати цілі об'єкти у функцію.</span></span> Функція <code>show_props()</code> (визначена у <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) <span id="result_box" lang="uk"><span>є прикладом функції, яка приймає об'єкт у якості аргумента.</span></span></p> - -<p><span id="result_box" lang="uk"><span class="alt-edited">Функція може викликати сама себе.</span> <span class="alt-edited">Наприклад, ось функція, яка обчислює факторіал рекурсивно:</span></span></p> - -<pre class="brush: js">function factorial(n) { - if ((n === 0) || (n === 1)) - return 1; - else - return (n * factorial(n - 1)); -} -</pre> - -<p><span id="result_box" lang="uk"><span>Далі ви можете обчислити факторіали від одного до п'яти наступним чином:</span></span></p> - -<pre class="brush: js">var a, b, c, d, e; -a = factorial(1); // a отримує значення 1 -b = factorial(2); // b отримує значення 2 -c = factorial(3); // c отримує значення 6 -d = factorial(4); // d отримує значення 24 -e = factorial(5); // e отримує значення 120 -</pre> - -<p><span id="result_box" lang="uk"><span>Є й інші способи виклику функцій.</span> <span>Часто бувають випадки, коли функцію потрібно назвати динамічно, або кількість аргументів функції може змінюватись, або контекстом виклику функції повинен бути заданий певний об'єкт, визначений під час виконання.</span> <span class="alt-edited">Виявляється, що функції самі є об'єктами, і ці об'єкти, у свою чергу, мають методи</span></span> (див. об'єкт {{jsxref("Function")}}). Один з них, метод {{jsxref("Function.apply", "apply()")}} , <span class="short_text" id="result_box" lang="uk"><span>може бути використаний для досягнення цієї мети.</span></span></p> - -<h2 id="Область_видимості_функції">Область видимості функції</h2> - -<p>Змінні, визначені всередині функції, недоступні ззовні цієї функції, бо змінна визначається тільки у області видимості функції. Проте, функція може звертатись до усіх змінних та функцій, визначених у області видимості, де вона оголошена. Іншими словами, функція, оголошена у глобальній області видимості, може звертатись до усіх змінних, оголошених у глобальній області видимості. Функція, оголошена всередині іншої функції, має доступ до усіх змінних, оголошених у батьківській функції, а також до будь-якої змінної, до якої має доступ батьківська функція.</p> - -<pre class="brush: js">// Ці змінні визначені у глобальній області видимості -var num1 = 20, - num2 = 3, - name = 'Chamahk'; - -// Ця функція визначена у глобальній області видимості -function multiply() { - return num1 * num2; -} - -multiply(); // Повертає 60 - -// Приклад вкладеної функції -function getScore() { - var num1 = 2, - num2 = 3; - - function add() { - return name + ' scored ' + (num1 + num2); - } - - return add(); -} - -getScore(); // Повертає "Chamahk scored 5" -</pre> - -<h2 id="Область_видимості_та_стек_функції">Область видимості та стек функції</h2> - -<h3 id="Рекурсія">Рекурсія</h3> - -<p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p> - -<ol> - <li>the function's name</li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> - <li>an in-scope variable that refers to the function</li> -</ol> - -<p>For example, consider the following function definition:</p> - -<pre class="brush: js">var foo = function bar() { - // statements go here -}; -</pre> - -<p>Within the function body, the following are all equivalent:</p> - -<ol> - <li><code>bar()</code></li> - <li><code>arguments.callee()</code></li> - <li><code>foo()</code></li> -</ol> - -<p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:</p> - -<pre class="brush: js">var x = 0; -while (x < 10) { // "x < 10" is the loop condition - // do stuff - x++; -} -</pre> - -<p>can be converted into a recursive function and a call to that function:</p> - -<pre class="brush: js">function loop(x) { - if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") - return; - // do stuff - loop(x + 1); // the recursive call -} -loop(0); -</pre> - -<p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the <a href="/en-US/docs/DOM">DOM</a>) is more easily done using recursion:</p> - -<pre class="brush: js">function walkTree(node) { - if (node == null) // - return; - // do something with node - for (var i = 0; i < node.childNodes.length; i++) { - walkTree(node.childNodes[i]); - } -} -</pre> - -<p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p> - -<p>It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.</p> - -<p>The stack-like behavior can be seen in the following example:</p> - -<pre class="brush: js">function foo(i) { - if (i < 0) - return; - console.log('begin: ' + i); - foo(i - 1); - console.log('end: ' + i); -} -foo(3); - -// Output: - -// begin: 3 -// begin: 2 -// begin: 1 -// begin: 0 -// end: 0 -// end: 1 -// end: 2 -// end: 3</pre> - -<h3 id="Nested_functions_and_closures">Nested functions and closures</h3> - -<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a <em>closure</em>. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p> - -<p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p> - -<p>To summarize:</p> - -<ul> - <li>The inner function can be accessed only from statements in the outer function.</li> -</ul> - -<ul> - <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li> -</ul> - -<p>The following example shows nested functions:</p> - -<pre class="brush: js">function addSquares(a, b) { - function square(x) { - return x * x; - } - return square(a) + square(b); -} -a = addSquares(2, 3); // returns 13 -b = addSquares(3, 4); // returns 25 -c = addSquares(4, 5); // returns 41 -</pre> - -<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p> - -<pre class="brush: js">function outside(x) { - function inside(y) { - return x + y; - } - return inside; -} -fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it -result = fn_inside(5); // returns 8 - -result1 = outside(3)(5); // returns 8 -</pre> - -<h3 id="Preservation_of_variables">Preservation of variables</h3> - -<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p> - -<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p> - -<h3 id="Multiply-nested_functions">Multiply-nested functions</h3> - -<p>Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (Why it is called "chaining" will be explained later.)</p> - -<p>Consider the following example:</p> - -<pre class="brush: js">function A(x) { - function B(y) { - function C(z) { - console.log(x + y + z); - } - C(3); - } - B(2); -} -A(1); // logs 6 (1 + 2 + 3) -</pre> - -<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>. This can be done because:</p> - -<ol> - <li><code>B</code> forms a closure including <code>A</code>, i.e. <code>B</code> can access <code>A</code>'s arguments and variables.</li> - <li><code>C</code> forms a closure including <code>B</code>.</li> - <li>Because <code>B</code>'s closure includes <code>A</code>, <code>C</code>'s closure includes <code>A</code>, <code>C</code> can access both <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code> in that order.</li> -</ol> - -<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p> - -<h3 id="Name_conflicts">Name conflicts</h3> - -<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:</p> - -<pre class="brush: js">function outside() { - var x = 5; - function inside(x) { - return x * 2; - } - return inside; -} - -outside()(10); // returns 20 instead of 10 -</pre> - -<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> - -<h2 id="Closures">Closures</h2> - -<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the inner function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> - -<pre class="brush: js">var pet = function(name) { // The outer function defines a variable called "name" - var getName = function() { - return name; // The inner function has access to the "name" variable of the outer function - } - return getName; // Return the inner function, thereby exposing it to outer scopes -} -myPet = pet('Vivie'); - -myPet(); // Returns "Vivie" -</pre> - -<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> - -<pre class="brush: js">var createPet = function(name) { - var sex; - - return { - setName: function(newName) { - name = newName; - }, - - getName: function() { - return name; - }, - - getSex: function() { - return sex; - }, - - setSex: function(newSex) { - if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) { - sex = newSex; - } - } - } -} - -var pet = createPet('Vivie'); -pet.getName(); // Vivie - -pet.setName('Oliver'); -pet.setSex('male'); -pet.getSex(); // male -pet.getName(); // Oliver -</pre> - -<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> - -<pre class="brush: js">var getCode = (function() { - var apiCode = '0]Eal(eh&2'; // A code we do not want outsiders to be able to modify... - - return function() { - return apiCode; - }; -}()); - -getCode(); // Returns the apiCode -</pre> - -<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p> - -<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" - return { - setName: function(name) { // Enclosed function also defines a variable called "name" - name = name; // ??? How do we access the "name" defined by the outer function ??? - } - } -} -</pre> - -<h2 id="Using_the_arguments_object">Using the arguments object</h2> - -<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> - -<pre class="brush: js">arguments[i] -</pre> - -<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> - -<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> - -<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> - -<pre class="brush: js">function myConcat(separator) { - var result = ''; // initialize list - var i; - // iterate through arguments - for (i = 1; i < arguments.length; i++) { - result += arguments[i] + separator; - } - return result; -} -</pre> - -<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> - -<pre class="brush: js">// returns "red, orange, blue, " -myConcat(', ', 'red', 'orange', 'blue'); - -// returns "elephant; giraffe; lion; cheetah; " -myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); - -// returns "sage. basil. oregano. pepper. parsley. " -myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); -</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p> -</div> - -<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p> - -<h2 id="Function_parameters">Function parameters</h2> - -<p>Starting with ECMAScript 2015, there are two new kinds of parameters: default parameters and rest parameters.</p> - -<h3 id="Default_parameters">Default parameters</h3> - -<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p> - -<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiply</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p> - -<pre class="brush: js">function multiply(a, b) { - b = typeof b !== 'undefined' ? b : 1; - - return a * b; -} - -multiply(5); // 5 -</pre> - -<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p> - -<pre class="brush: js">function multiply(a, b = 1) { - return a * b; -} - -multiply(5); // 5</pre> - -<p>For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p> - -<h3 id="Rest_parameters">Rest parameters</h3> - -<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p> - -<pre class="brush: js">function multiply(multiplier, ...theArgs) { - return theArgs.map(x => multiplier * x); -} - -var arr = multiply(2, 1, 2, 3); -console.log(arr); // [2, 4, 6]</pre> - -<h2 id="Arrow_functions">Arrow functions</h2> - -<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (previously, and now incorrectly known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> - -<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p> - -<h3 id="Shorter_functions">Shorter functions</h3> - -<p>In some functional patterns, shorter functions are welcome. Compare:</p> - -<pre class="brush: js">var a = [ - 'Hydrogen', - 'Helium', - 'Lithium', - 'Beryllium' -]; - -var a2 = a.map(function(s) { return s.length; }); - -console.log(a2); // logs [8, 6, 7, 9] - -var a3 = a.map(s => s.length); - -console.log(a3); // logs [8, 6, 7, 9] -</pre> - -<h3 id="Lexical_this">Lexical <code>this</code></h3> - -<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> - -<pre class="brush: js">function Person() { - // The Person() constructor defines `this` as itself. - this.age = 0; - - setInterval(function growUp() { - // In nonstrict mode, the growUp() function defines `this` - // as the global object, which is different from the `this` - // defined by the Person() constructor. - this.age++; - }, 1000); -} - -var p = new Person();</pre> - -<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> - -<pre class="brush: js">function Person() { - var self = this; // Some choose `that` instead of `self`. - // Choose one and be consistent. - self.age = 0; - - setInterval(function growUp() { - // The callback refers to the `self` variable of which - // the value is the expected object. - self.age++; - }, 1000); -}</pre> - -<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> - -<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> - -<pre class="brush: js">function Person() { - this.age = 0; - - setInterval(() => { - this.age++; // |this| properly refers to the person object - }, 1000); -} - -var p = new Person();</pre> - -<h2 id="Predefined_functions">Predefined functions</h2> - -<p>JavaScript has several top-level, built-in functions:</p> - -<dl> - <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> - <dd> - <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> - </dd> - <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> - <dd> - <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> - </dd> - <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> - <dd> - <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> - </dd> - <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> - <dd> - <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> - </dd> - <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> - <dd> - <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> - </dd> - <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> - <dd> - <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> - </dd> - <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> - <dd> - <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> - </dd> - <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> - <dd> - <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> - </dd> - <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> - <dd> - <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> - </dd> - <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> - <dd> - <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> - </dd> - <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> - <dd> - <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> - </dd> - <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> - <dd> - <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> - </dd> -</dl> - -<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p> diff --git a/files/uk/web/javascript/guide/grammar_and_types/index.html b/files/uk/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index 415aaaff62..0000000000 --- a/files/uk/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,716 +0,0 @@ ---- -title: Граматика та типи -slug: Web/JavaScript/Guide/Grammar_and_types -tags: - - JavaScript - - 'l10n:priority' - - Посібник -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> - -<p class="summary">В цьому розділі розглядаються основи граматики JavaScript, оголошення змінних, типи даних і літерали.</p> - -<h2 id="Основи">Основи</h2> - -<p>Більшість свого синтаксису JavaScript запозичає у Java, C та C++, але на нього вплинули також Awk, Perl і Python.</p> - -<p>Мова JavaScript <strong>чутлива до регістру</strong> і використовує <span class="short_text" id="result_box" lang="uk"><span>набір</span> <span>символів</span></span> <strong>Unicode</strong>. Наприклад, слово Früh (що німецькою означає "рано") може використовуватись як ім'я змінної.</p> - -<pre class="brush: js notranslate">let Früh = "foobar"</pre> - -<p>Проте, змінна <code>früh</code> не одне й те саме, що <code>Früh</code>, тому що мова JavaScript чутлива до регістру.</p> - -<p>У JavaScript команди називаються <a href="/uk/docs/Glossary/Інструкція">інструкціями</a> і розділяються крапкою з комою (;).</p> - -<p>Немає необхідності ставити крапку з комою після інструкції, якщо вона написана на своєму власному рядку. Проте, якщо ви бажаєте мати більш, ніж одну інструкцію в рядку, тоді потрібно їх відділяти крапкою з комою.</p> - -<div class="blockIndicator note"> -<p>ECMAScript також має правила для автоматичної вставки крапки з комою (<a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Автоматична_вставка_крапки_з_комою">ASI</a>, Automatic semicolon insertion) в кінці інструкцій. (Щоб отримати більше інформації, перегляньте детальну довідку щодо <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">лексичної граматики</a> JavaScript.)</p> -</div> - -<p>Однак, вважається найкращою практикою завжди ставити крапку з комою після інструкції, навіть якщо вона не вимагається. Ця практика зменшує шанси отримати помилки у коді.</p> - -<p>Текст скрипта у JavaScript сканується зліва направо та конвертується у послідовність вхідних елементів, якими є <em>токени</em>, <em>керівні символи, символи розриву рядка, коментарі,</em> або <a href="/uk/docs/Glossary/Whitespace">пробільні символи</a>. (Символи пробілів, табуляції та символи нового рядка вважаються пробільними символами).</p> - -<h2 id="Коментарі">Коментарі</h2> - -<p>Синтаксис <strong>коментарів</strong> такий самий, як у C++ та багатьох інших мовах програмування:</p> - -<pre class="brush: js notranslate">// однорядковий коментар - -/* а це довший, -* багаторядковий коментар -*/ - -/* Однак, не можна, /* вкладати коментарі */ SyntaxError */</pre> - -<p>Коментарі поводяться як пробіли та відкидаються під час виконання скрипта.</p> - -<div class="blockIndicator note"> -<p><strong>Заувага</strong>: Ви можете також побачити третій тип синтаксису коментарів на початку деяких файлів JavaScript, який виглядає приблизно так: <code>#!/usr/bin/env node.</code></p> - -<p>Цей синтаксис називається <strong>шебанг</strong>, це спеціальний коментар, який використовується, щоб вказати шлях до певного рушія JavaScript, який має виконати скрипт. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Коментарі_шебанг">коментарі шебанг</a> для більш детальної інформації.</p> -</div> - -<h2 id="Оголошення">Оголошення</h2> - -<p>Існують три види оголошення змінних у JavaScript.</p> - -<dl> - <dt>{{jsxref("Statements/var", "var")}}</dt> - <dd>Оголошує змінну та необов'язково ініціалізує її значенням.</dd> - <dt>{{jsxref("Statements/let", "let")}}</dt> - <dd>Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.</dd> - <dt>{{jsxref("Statements/const","const")}}</dt> - <dd>Оголошує константу блочної області видимості, доступну тільки для читання.</dd> -</dl> - -<h3 id="Змінні">Змінні</h3> - -<p><span id="result_box" lang="uk"><span>Ви використовуєте змінні, як символічні імена для значень у вашій програмі.</span></span> Назви змінних, <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатори</a>, відповідають певним правилам.</p> - -<p>Ідентифікатори JavaScript повинні починатися з літери, знаку підкреслення (<code>_</code>) або знаку долара (<code>$</code>). Н<span class="short_text" id="result_box" lang="uk"><span>аступні символи можуть також бути цифрами</span></span> (<code>0</code>-<code>9</code>).</p> - -<p>Оскільки мова JavaScript чутлива до регістру, літери включають у себе символи від "<code>A</code>" до "<code>Z</code>" (у верхньому регістрі) та символи від "<code>a</code>" до "<code>z</code>" (у нижньому регістрі).</p> - -<p>Ви можете використовувати більшу частину літер ISO 8859-1 або Юнікоду, такі як <code>å</code> та <code>ü</code> у ідентифікаторах. (Для більш детальної інформації дивіться <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">цю статтю</a>.) Ви також можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду </a>в якості символів у ідентифікаторах.</p> - -<p>Деякі приклади допустимих назв: <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code> та <code>_name</code>.</p> - -<h3 id="Оголошення_змінних">Оголошення змінних</h3> - -<p>Ви можете оголосити змінну двома шляхами:</p> - -<ul> - <li>За допомогою ключого слова {{jsxref("Statements/var", "var")}}. Наприклад,<code>var x = 42</code>. <span id="result_box" lang="uk"><span>Цей синтаксис може використовуватись для оголошення як <strong>локальних</strong>, так і <strong>глобальних </strong>змінних, в залежності від <em>контексту виконання</em>.</span></span></li> - <li><span class="short_text" id="result_box" lang="uk"><span>За допомогою ключового слова {{jsxref("Statements/const", "const")}} або {{jsxref("Statements/let", "let")}}.Наприклад, <code>let y = 13</code>. Цей синтаксис може бути використаний для оголошення локальної змінної блочної області видимості. (Дивіться <a href="#Область_видимості_змінної">Область видимості змінної</a> нижче).</span></span></li> -</ul> - -<p>Ви також можете просто присвоїти змінній значення. Наприклад, <code>x = 42</code>. Ця форма створює <strong><a href="/uk/docs/Web/JavaScript/Reference/Statements/var#Опис">неоголошену глобальну</a> </strong>змінну. Вона також генерує попередження у JavaScript. Неоголошені глобальні змінні можуть привести до неочікуваної поведінки. Тому не рекомендується використовувати неоголошені глобальні змінні.</p> - -<h3 id="Обчислення_змінних">Обчислення змінних</h3> - -<p>Змінна, оголошена за допомогою <code>var</code> або <code>let</code>, без початкового значення, має значення {{jsxref("undefined")}}.</p> - -<p>Спроба звернення до неоголошеної змінної призведе до викидання винятку {{jsxref("ReferenceError")}}:</p> - -<pre class="brush: js notranslate">var a; -console.log('Значення a дорівнює ' + a); // Значення a дорівнює undefined - -console.log('Значення b дорівнює ' + b); // Значення b дорівнює undefined -var b; -// Це може спантеличити, доки ви не прочитаєте 'Підняття змінних' нижче - -console.log('Значення c дорівнює ' + c); // Uncaught ReferenceError: c is not defined - -let x; -console.log('Значення x дорівнює ' + x); // Значення x дорівнює undefined - -console.log('Значення y дорівнює ' + y); // Uncaught ReferenceError: y is not defined -let y; </pre> - -<p><span id="result_box" lang="uk"><span>Можна використати <code>undefined</code>, щоб з'ясувати, чи має змінна значення.</span> <span>У наступному коді змінній <code>input</code> не присвоюється значення, і умова в операторі </span></span><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else" title="uk/docs/JavaScript/Reference/Statements/if...else">if</a></code> набуває значення<span lang="uk"><span> <code>true</code>.</span></span></p> - -<pre class="brush: js notranslate">var input; -if (input === undefined) { - doThis(); -} else { - doThat(); -}</pre> - -<p>Значення <code>undefined</code> поводить себе як <code>false</code>, коли використовується в булевому контексті. Наприклад, <span id="result_box" lang="uk"><span>наступний код виконує функцію <code>myFunction</code>, оскільки елемент <code>myArray</code> дорівнює <code>undefined</code></span></span>:</p> - -<pre class="brush: js notranslate">var myArray = []; -if (!myArray[0]) myFunction(); </pre> - -<p>Значення <code>undefined</code> перетворюється на <code>NaN</code>, коли використовується у числовому контексті.</p> - -<pre class="brush: js notranslate">var a; -a + 2; // Обчислюється як NaN</pre> - -<p>Коли ви обчислюєте змінну {{jsxref("null")}}, значення null поводить себе як 0 у числовому контексті, та як false - у булевому. Наприклад:</p> - -<pre class="brush: js notranslate">var n = null; -console.log(n * 32); // Виведе 0 у консоль</pre> - -<h3 id="Область_видимості_змінної"> Область видимості змінної</h3> - -<p><span id="result_box" lang="uk">Коли ви оголошуєте змінну за межами будь-яких функцій, вона називається <em>глобальною</em> змінною, позаяк доступна для будь-якого іншого коду у поточному документі. Коли ви оголошуєте змінну всередині функції, вона називається <em>локальною </em>змінною, позаяк доступна лише в межах цієї функції.</span></p> - -<p>JavaScript до ECMAScript 2015 не має <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Блокова_інструкція">блочної</a> області видимості. Точніше, змінна, оголошена всередині блоку, є локальною для <em>функції</em> <em>(або глобальної області видимості)</em>, в якій розміщено цей блок.</p> - -<p>Наприклад, наступний код виведе <code>5</code>, тому що областю видимості <code>x</code> є глобальний контекст (або контекст функції, якщо код є частиною функції). Область видимості <code>x</code> не обмежується найближчим блоком конструкції <code>if</code>.</p> - -<pre class="brush: js notranslate">if (true) { - var x = 5; -} -console.log(x); // x дорівнює 5</pre> - -<p><span id="result_box" lang="uk"><span>Ця поведінка змінюється при використанні ключового слова <code>let</code>, (представленого в ECMAScript 2015).</span></span></p> - -<pre class="brush: js notranslate">if (true) { - let y = 5; -} -console.log(y); // ReferenceError: y is not defined</pre> - -<h3 id="Підняття_змінних">Підняття змінних</h3> - -<p><span id="result_box" lang="uk"><span>Ще однією особливістю змінних у JavaScript є те, що ви можете посилатися на змінну, оголошену пізніше, і це не призведе до винятку.</span></span></p> - -<p>Ця концепція має назву <strong>підняття (hoisting)</strong>. Змінні у JavaScript, <span id="result_box" lang="uk"><span>в певному сенсі, "піднімаються" на вершину функції або інструкції у коді.</span></span> <span id="result_box" lang="uk"><span>Однак, підняті змінні повертають значення</span></span> <code>undefined</code>. <span id="result_box" lang="uk"><span>Тому, навіть якщо ви оголосите та ініціалізуєте змінну після використання або посилання на цю змінну, вона все одно поверне <code>undefined</code>.</span></span></p> - -<pre class="brush: js notranslate">/** -* Приклад 1 -*/ -console.log(x === undefined); // true -var x = 3; - -/** -* Приклад 2 -*/ -// поверне значення undefined -var myvar = 'моє значення'; - -(function() { - console.log(myvar); // undefined - var myvar = 'локальна змінна'; -})();</pre> - -<p><span id="result_box" lang="uk"><span>Наведені вище приклади будуть тлумачитися так само, як</span></span>:</p> - -<pre class="brush: js notranslate">/** -* Приклад 1 -*/ -var x; -console.log(x === undefined); // true -x = 3; - -/** -* Приклад 2 -*/ -var myvar = 'моє значення'; - -(function() { - var myvar; - console.log(myvar); // undefined - myvar = 'локальна змінна'; -})();</pre> - -<p>Враховуючи підняття, всі оголошення через <code>var</code> всередині функції мають знаходитись якомога ближче до вершини функції. Така практика покращує зрозумілість коду.</p> - -<p>В ECMAScript 2015 <code>let</code> та <code>const</code> <strong>підіймаються, але не ініціалізуються. </strong>Результатом посилання на змінну в блоці до оголошення цієї змінної буде {{jsxref("ReferenceError")}}, тому що змінна перебуває у "тимчасовій мертвій зоні" від початку блоку до обробки її оголошення.</p> - -<pre class="brush: js notranslate">console.log(x); // ReferenceError -let x = 3;</pre> - -<h3 id="Підняття_функції">Підняття функції</h3> - -<p>У випадку з функціями, лише <em>оголошення</em> функцій піднімаються, але <em>не</em> <em>функціональні вирази</em>.</p> - -<pre class="brush: js notranslate">/* Оголошення функції */ - -foo(); // "ква" - -function foo() { - console.log('ква'); -} - -/* Функціональний вираз */ - -baz(); // TypeError: baz is not a function - -var baz = function() { - console.log('кря'); -};</pre> - -<h3 id="Глобальні_змінні">Глобальні змінні</h3> - -<p>Глобальні змінні насправді є властивостями <em>глобального об'єкта</em>.</p> - -<p>На веб-сторінках глобальним об'єктом є <code><a href="/uk/docs/Web/API/Window">window</a></code>, тому ви можете присвоювати значення та звертатись до глобальних змінних за допомогою синтаксису <code>window.<em>змінна</em></code>.</p> - -<p>Відповідно, ви можете звертатись до глобальних змінних, оголошених в одному вікні або фреймі, з іншого вікна або фрейму, вказавши при цьому ім'я цього вікна чи фрейму. Наприклад, якщо в документі оголошена змінна під назвою <code>phoneNumber</code>, ви можете звернутися до неї з <code>iframe</code> так: <code>parent.phoneNumber</code>.</p> - -<h3 id="Константи">Константи</h3> - -<p>Ви можете створити іменовану константу, призначену лише для читання, за допомогою ключового слова {{jsxref("Statements/const", "const")}}.</p> - -<p>Синтаксис ідентифікатора константи такий самий, як і синтаксис будь-якого ідентифікатора змінної: він повинен починатися з літери, підкреслення або знака долара (<code>$</code>) та може містити букви, цифри або символи підкреслення.</p> - -<pre class="brush: js notranslate">const PI = 3.14;</pre> - -<p>Константа не може змінювати значення за допомогою присвоювання або повторно оголошуватися протягом виконання скрипта. Вона повинна бути ініціалізована початковим значенням.</p> - -<p>Правила області видимості для констант такі ж, як для <code>let</code>-змінних блочної області видимості. Якщо ключове слово <code>const</code> не вказане, ідентифікатор вважається ідентифікатором змінної.</p> - -<p>Не можна оголошувати константу з таким самим ім'ям, як функція або змінна в тій самій області видимості. Наприклад:</p> - -<pre class="brush: js notranslate">// ЦЕ СПРИЧИНИТЬ ПОМИЛКУ -function f() {}; -const f = 5; - -// ЦЕ ТАКОЖ СПРИЧИНИТЬ ПОМИЛКУ -function f() { - const g = 5; - var g; - - //інструкції -}</pre> - -<p>Однак, властивості об'єктів, присвоєних константам, не захищені, тому наступна інструкція виконується без проблем.</p> - -<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'значення'}; -MY_OBJECT.key = 'іншезначення';</pre> - -<p>Вміст будь-якого масиву також не захищений, тому наступна інструкція виконується без проблем.</p> - -<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS']; -MY_ARRAY.push('JAVASCRIPT'); -console.log(MY_ARRAY); //виведе ['HTML','CSS','JAVASCRIPT']; -</pre> - -<h2 id="Структури_та_типи_даних">Структури та типи даних</h2> - -<h3 id="Типи_даних">Типи даних</h3> - -<p>Останній стандарт ECMAScript визначає вісім типів даних:</p> - -<ul> - <li>Сім типів даних, які є <a href="/uk/docs/Glossary/Primitive">простими типами</a>: - - <ol> - <li><a href="/uk/docs/Glossary/Boolean">Boolean</a>. <code>true</code> та <code>false</code>.</li> - <li><a href="/uk/docs/Glossary/null">null</a>. Спеціальне ключове слово, що позначає нульове значення. (Оскільки мова JavaScript чутлива до регістру, <code>null</code> це <em>не </em>одне й те саме, що <code>Null</code>, <code>NULL</code> чи будь-який інший варіант).</li> - <li><a href="/uk/docs/Glossary/undefined">undefined</a>. Властивість верхнього рівня, чиє значення не визначене.</li> - <li><a href="/uk/docs/Glossary/Number">Number</a>. Число, ціле або з плаваючою комою. Наприклад: <code>42</code> або <code>3.14159</code>.</li> - <li><a href="/uk/docs/Glossary/BigInt">BigInt</a>. Ціле число з довільною точністю. Наприклад: <code>9007199254740992n</code>.</li> - <li><a href="/uk/docs/Glossary/String">String</a>. Послідовність символів, що представляють текстове значення. Наприклад: "Привіт".</li> - <li><a href="/uk/docs/Glossary/Символ">Symbol</a> (новий в ECMAScript 2015). Тип даних, екземпляри якого унікальні та незмінні.</li> - </ol> - </li> - <li>та <a href="/uk/docs/Glossary/Object">Object</a></li> -</ul> - -<p>Хоча цих типів даних відносно мало, вони дозволяють виконувати корисні функції у ваших застосунках. {{jsxref("Object", "Об'єкти")}} та {{jsxref("Function", "функції")}} - це інші фундаментальні елементи мови. Об'єкти можна розглядати, як іменовані контейнери для значень, а функції - як процедури, які може виконувати скрипт. </p> - -<h3 id="Перетворення_типів_даних">Перетворення типів даних</h3> - -<p>JavaScript - це мова з <em>динамічною типізацією</em>. Це означає, що при оголошенні змінної не потрібно вказувати, якого вона типу. Це також означає, що типи даних автоматично перетворюються за необхідності під час виконання скрипта. </p> - -<p>Наприклад, ви можете визначити змінну таким чином:</p> - -<pre class="brush: js notranslate">var answer = 42;</pre> - -<p>А пізніше цій же змінній можна присвоїти значення рядкового типу даних, наприклад:</p> - -<pre class="brush: js notranslate">answer = 'Дякуємо за рибу...';</pre> - -<p>Оскільки JavaScript динамічно типізована мова, таке присвоєння не спричиняє повідомлення про помилку.</p> - -<h3 id="Числа_та_оператор">Числа та оператор '+'</h3> - -<p>У виразах, що включають числові й рядкові значення з оператором <code>+</code>, JavaScript перетворює числові значення на рядки. Наприклад:</p> - -<pre class="brush: js notranslate">x = 'Відповідь - ' + 42 // "Відповідь - 42" -y = 42 + ' - це відповідь' // "42 - це відповідь"</pre> - -<p>З усіма іншими операторами JavaScript <em>не</em> перетворює числові значення на рядки. Наприклад:</p> - -<pre class="brush: js notranslate">'37' - 7 // 30 -'37' + 7 // "377"</pre> - -<h3 id="Перетворення_рядків_на_числа">Перетворення рядків на числа</h3> - -<p>У випадку, коли значення, що представляє число, є в пам'яті у вигляді рядка, існують методи для перетворення.</p> - -<ul> - <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> - <li>{{jsxref("parseFloat", "parseFloat()")}}</li> -</ul> - -<p><code>parseInt</code> повертає тільки цілі числа, тому його використання для десяткових чисел обмежене.</p> - -<div class="blockIndicator note"> -<p>Крім того, найкращою практикою для <code>parseInt</code> є завжди включати параметр <em>radix</em> (основа). Параметр radix вказує, яка система числення має використовуватись.</p> -</div> - -<pre class="brush: js notranslate">parseInt('101', 2) // 5</pre> - -<p>Альтернативним методом отримання числа з рядка є використання оператора <code>+</code> (унарний плюс):</p> - -<pre class="brush: js notranslate">'1.1' + '1.1' // '1.11.1' -(+'1.1') + (+'1.1') // 2.2 -// Зауважте: дужки не обов'язкові, вони додаються для ясності</pre> - -<h2 id="Літерали">Літерали</h2> - -<p><em>Літерали</em> (<em>англ.</em> literal - "буквальний") відображають значення у JavaScript. Це фіксовані значення, не змінні, які ви буквально вказуєте у сценарії. У цьому розділі описані наступні типи літералів:</p> - -<ul> - <li><a href="#Масивні_літерали">Масивні літерали</a></li> - <li><a href="#Булеві_літерали">Булеві літерали</a></li> - <li><a href="#Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</a></li> - <li><a href="#Числові_літерали">Числові літерали</a></li> - <li><a href="#Обєктні_літерали">Об'єктні літерали</a></li> - <li><a href="#Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів</a></li> - <li><a href="#Рядкові_літерали">Рядкові літерали</a></li> -</ul> - -<h3 id="Масивові_літерали">Масивові літерали</h3> - -<p>Масивовий літерал - це список з нуля чи більше виразів, які представляють елементи масиву, вкладений у квадратні дужки (<code>[]</code>). Коли ви створюєте масив, використовуючи масивовий літерал, він ініціалізується вказаними значеннями в якості своїх елементів, а його довжина дорівнює кількості вказаних аргументів.</p> - -<p>Наступний приклад створює масив <code>coffees</code> (кава) з трьома елементами та довжиною, що дорівнює три:</p> - -<pre class="brush: js notranslate">let coffees = ['Французька', 'Колумбійська', 'Кона'];</pre> - -<div class="note"> -<p><strong>Заувага:</strong> Літерал масиву - це тип <em>об'єктного ініціалізатора</em>. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Використання_обєктних_ініціалізаторів" title="uk/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Використання об'єктних ініціалізаторів</a>.</p> -</div> - -<p>Якщо масив створюється за допомогою літералів у скрипті верхнього рівня, JavaScript інтерпретує масив кожного разу, коли обчислює вираз, що містить літерал масиву. На додачу, літерал, що використовується у функції, створюється кожного разу, коли викликається функція.</p> - -<div class="blockIndicator note"> -<p><strong>Заувага:</strong> Літерали масиву також є об'єктами <code>Array</code>. Більш детальну інформацію щодо об'єктів <code>Array</code> дивіться у статтях {{jsxref("Array")}} та <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a>.</p> -</div> - -<h4 id="Додаткові_коми_у_масивних_літералах">Додаткові коми у масивних літералах</h4> - -<p>Вам не обов'язково вказувати всі елементи у масивному літералі. Якщо помістити дві коми поспіль, масив заповнить невказані елементи значеннями <code>undefined</code>. Наступний приклад створює масив <code>fish</code> (риба):</p> - -<pre class="brush: js notranslate">let fish = ['Крилатка', , 'Лящ'];</pre> - -<p>Цей масив має два елементи зі значеннями та один порожній елемент:</p> - -<ul> - <li><code>fish[0]</code> дорівнює "Крилатка",</li> - <li><code>fish[1]</code> дорівнює <code>undefined</code></li> - <li><code>fish[2]</code> дорівнює "Лящ"</li> -</ul> - -<p>Якщо в кінці списку елементів ви додаєте кінцеву кому, вона ігнорується.</p> - -<p>У наступному прикладі довжина масиву дорівнює трьом. Не існує елемента <code>myList[3]</code>. Усі інші коми у списку позначають новий елемент.</p> - -<div class="note"> -<p><strong>Заувага:</strong> коми в кінці можуть створювати помилки у старих версіях веб-переглядачів, тому краще їх видаляти.</p> -</div> - -<pre class="brush: js notranslate">let myList = ['дім', , 'школа', ];</pre> - -<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[0]</code> та <code>myList[2]</code> відсутні.</p> - -<pre class="brush: js notranslate">let myList = [ ,'дім', , 'школа'];</pre> - -<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[1]</code> та <code>myList[3]</code> відсутні. <strong>Ігнорується лише остання кома</strong>.</p> - -<pre class="brush: js notranslate">let myList = ['дім', , 'школа', , ];</pre> - -<p>Розуміння поведінки додаткових ком важливе для розуміння JavaScript як мови. </p> - -<p>Однак, при написанні власного коду, варто однозначно оголошувати відсутні елементи як <code>undefined</code>. Це підвищить зрозумілість та надійність вашого коду.</p> - -<h3 id="Булеві_літерали">Булеві літерали</h3> - -<p>Тип Boolean має два значення літералів: <code>true</code> та <code>false</code>.</p> - -<div class="blockIndicator note"> -<p><strong>Будьте обережні:</strong> Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> зі значеннями true та false об'єкта {{jsxref("Boolean")}}.</p> -Об'єкт Boolean - це обгортка навколо примітивного булевого типу даних. Дивіться {{jsxref("Boolean")}} для отримання додаткової інформації.</div> - -<h3 id="Числові_літерали">Числові літерали</h3> - -<p>Типи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a> можна виразити у десятковій (основа 10), шістнадцятковій (основа 16), вісімковій (основа 8) та двійковій (основа 2) формі.</p> - -<ul> - <li><em>Десятковий</em> числовий літерал - це послідовність цифр без <code>0</code> (нуля) на початку.</li> - <li>Початковий <code>0</code> (нуль) або <code>0o</code> (або <code>0O</code>) у числовому літералі вказує, що він заданий у <em>вісімковій </em>системі числення. Вісімкове число може включати лише цифри <code><em>0</em></code>–<code><em>7</em></code>.</li> - <li>Символи <code><em>0x</em></code> (або <code>0X</code>) на початку вказують на <em>шістнадцяткове </em>представлення числа. Шістнадцяткове число може включати цифри (<code>0</code>–<code>9</code>) та літери <code>a</code> – <code>f</code> та <code>A</code> – <code>F</code>. (Регістр символу не має значення. Тому: <code>0xa</code> = <code>0xA</code> = <code>10</code> і <code>0xf</code> = <code>0xF</code> = <code>15</code>.)</li> - <li>Символи <code>0b</code> (або <code>0B</code>) на початку вказують на <em>двійкове </em>представлення. Двійкові числа можуть включати лише цифри <code>0</code> і <code>1</code>.</li> -</ul> - -<p>Деякі приклади числових літералів:</p> - -<pre class="brush: js notranslate">0, 117, -345, 123456789123456789n (десятковий, основа 10) -015, 0001, -0o77, 0o777777777777n (вісімковий, основа 8) -0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (шістнадцятковий, "hex" чи основа 16) -0b11, 0b0011, -0b11, 0b11101001010101010101n (двійковий, основа 2)</pre> - -<p>Для отримання додаткової інформації дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_літерали">Числові літерали в довідці про лексичну граматику.</a></p> - -<h3 id="Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</h3> - -<p>Літерал з рухомою крапкою може мати такі частини:</p> - -<ul> - <li>Десяткове ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним),</li> - <li>Десяткову крапку ("<code>.</code>"),</li> - <li>Дробову частину (інше десяткове число),</li> - <li>Порядок.</li> -</ul> - -<p>Порядок позначається через "<code>e</code>" або "<code>E</code>", за яким іде ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним). Літерал з рухомою крапкою повинен мати принаймні одну цифру, а також або десяткову крапку, або "<code>e</code>" (чи "<code>E</code>").</p> - -<p>Якщо стисло, синтаксис наступний:</p> - -<pre class="brush: js notranslate">[(+|-)][цифри].[цифри][(E|e)[(+|-)]цифри]</pre> - -<p>Наприклад:</p> - -<pre class="brush: js notranslate">3.1415926 --.123456789 --3.1E+12 -.1e-23</pre> - -<h3 id="Обєктні_літерали">Об'єктні літерали</h3> - -<p>Об'єктні літерали - це список з нуля або більше пар імен властивостей та асоційованих з ними значень об'єкта, взятих у фігурні дужки (<code>{}</code>).</p> - -<div class="blockIndicator warning"> -<p><strong>Не використовуйте об'єктні літерали на початку інструкції! </strong>Це призведе до помилки (або не поводитиметься так, як ви очікували), оскільки <code>{</code> буде інтерпретуватися як початок блоку.</p> -</div> - -<p>Нижче наведений приклад об’єктного літералу. Перший елемент об'єкта <code>car</code> (автомобіль) визначає властивість <code>myCar</code> та присвоює йому новий рядок "<code>Saturn</code>"; другому елементу, властивості <code>getCar</code>, негайно присвоюється результат виклику функції <code>(carTypes("Honda"))</code>; третій елемент, властивість <code>special</code>, використовує існуючу змінну (<code>sales</code>).</p> - -<pre class="brush: js notranslate">var sales = 'Toyota'; - -function carTypes(name) { - if (name === 'Honda') { - return name; - } else { - return "Вибачте, ми не продаємо автомобілі " + name + "."; - } -} - -var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; - -console.log(car.myCar); // Saturn -console.log(car.getCar); // Honda -console.log(car.special); // Toyota </pre> - -<p>Крім того, ви можете використовувати числовий або рядковий літерал в якості імені властивості, чи вкладати один об'єкт у інший. У наступному прикладі використовуються ці можливості.</p> - -<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' }; - -console.log(car.manyCars.b); // Jeep -console.log(car[7]); // Mazda</pre> - -<p><span>Іменем властивості об'єкта може бути будь-який рядок, в тому числі порожній. Якщо ім'я властивості не є дозволеним <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатором</a> JavaScript або числом, воно має бути записане в лапках.</span></p> - -<p>До імен властивостей, які не є дозволеними ідентифікаторами, не можна звертатись через крапку (<code>.</code>), але <em>можна </em>звертатись та присвоювати значення за допомогою подібної до масиву нотації ("<code>[]</code>").</p> - -<pre class="brush: js notranslate">var unusualPropertyNames = { - '': 'Порожній рядок', - '!': 'Бум!' -} -console.log(unusualPropertyNames.''); // SyntaxError: Unexpected string -console.log(unusualPropertyNames['']); // Порожній рядок -console.log(unusualPropertyNames.!); // SyntaxError: Unexpected token ! -console.log(unusualPropertyNames['!']); // Бум!</pre> - -<h4 id="Покращені_обєктні_літерали">Покращені об'єктні літерали</h4> - -<p>У ES2015 об'єктні літерали розширюються для підтримки встановлення прототипу при конструюванні, скороченого запису присвоєнь типу <code>foo: foo</code>, визначення методів, здійснення викликів <code>super</code> та обчислення імен властивостей з виразами.</p> - -<p>Разом вони також зближують об'єктні літерали та оголошення класів (<code>class</code>) і дозволяють об'єктно-орієнтованому дизайну користуватися деякими з тих самих зручностей.</p> - -<pre class="brush: js notranslate">var obj = { - // __proto__ - __proto__: theProtoObj, - // Скорочений запис для ‘handler: handler’ - handler, - // Методи - toString() { - // Виклики super - return 'd ' + super.toString(); - }, - // Обчислювані (динамічні) імена властивостей - [ 'prop_' + (() => 42)() ]: 42 -};</pre> - -<h3 id="Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів (RegExp)</h3> - -<p>Літерал регулярного виразу (який докладно визначається <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">пізніше</a>) - це шаблон, записаний між слешами. Нижче наведено приклад літерала регулярного виразу:</p> - -<pre class="brush: js notranslate">var re = /ab+c/;</pre> - -<h3 id="Рядкові_літерали">Рядкові літерали</h3> - -<p>Рядковий літерал - це нуль або більше символів всередині подвійних (<code>"</code>) або одинарних (<code>'</code>) лапок. Рядок повинен бути позначений лапками одного типу (тобто, або двома одинарними лапками, або двома подвійними лапками).</p> - -<p>Нижче наведено приклади рядкових літералів:</p> - -<pre class="brush: js notranslate">'раз' -"два" -'1234' -'один рядок \n другий рядок' -"Мар'яна має кота"</pre> - -<p>Ви можете викликати будь-який з методів об'єкта {{jsxref("String")}} на рядковому літералі. JavaScript автоматично перетворює рядковий літерал на тимчасовий об'єкт String, викликає метод, а потім прибирає тимчасовий об'єкт String. Ви також можете використовувати властивість <code>String.length</code> з рядковим літералом:</p> - -<pre class="brush: js notranslate">// Надрукує кількість символів у рядку, враховуючи пробіли. -console.log("Мар'яна має кота".length) // В цьому випадку, 16.</pre> - -<p>У ES2015 також доступні <em>шаблонні літерали</em>. Шаблонні літерали пишуться у зворотніх лапках (<code>`</code>) (<a class="external external-icon" href="https://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D0%B2%D1%96%D1%81_(%D0%B4%D1%96%D0%B0%D0%BA%D1%80%D0%B8%D1%82%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%B0%D0%BA)" rel="noopener">гравіс</a>) замість одинарних або подвйних лапок.</p> - -<p>Шаблонні рядки надають синтаксичний цукор для конструювання рядків. (Це схоже на функції інтерполяції рядків у Perl, Python та інших).</p> - -<p>За бажанням може бути додано тег, що дозволить налаштовувати побудову рядка, уникаючи атак типу впровадження або конструюючи структури даних більш високого рівня з вмісту рядка.</p> - -<pre class="brush: js notranslate">// Створення базового рядкового літералу -`У JavaScript '\n' - це символ переводу рядка.` - -// Багаторядковий запис -`У JavaScript шаблонні рядки можуть бути записані -у кількох рядках, а текст в одинарних -чи подвійних лапках не може.` - -// Інтерполяція рядків -var name = 'Боб', time = 'сьогодні'; -`Привіт, ${name}, як ти ${time}?` - -// Створення префіксу HTTP-запиту, який інтерпретує заміни та конструювання -POST`http://foo.org/bar?a=${a}&b=${b} - Content-Type: application/json - X-Credentials: ${credentials} - { "foo": ${foo}, - "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> - -<p>Вам варто використовувати рядкові літерали, якщо немає потреби використовувати конкретно об'єкт String. Дивіться {{jsxref("String")}} для більш детальної інформації про об'єкти <code>String</code>.</p> - -<h4 id="Використання_спеціальних_символів_у_рядках">Використання спеціальних символів у рядках</h4> - -<p>Окрім звичайних символів, ви можете також включати до рядків спеціальні символи, як показано в наступному прикладі.</p> - -<pre class="brush: js notranslate">'один рядок \n другий рядок'</pre> - -<p>Наступна таблиця наводить спеціальні символи, які можна використовувати у рядках JavaScript.</p> - -<table class="standard-table"> - <caption>Таблиця: спеціальні символи JavaScript</caption> - <thead> - <tr> - <th scope="col">Символ</th> - <th scope="col">Значення</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>Нуль-символ</td> - </tr> - <tr> - <td><code>\b</code></td> - <td>Повернення на крок</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Зміна сторінки</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Новий рядок</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Повернення каретки</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Горизонтальна табуляція</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Вертикальна табуляція</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>Апостроф або одинарні лапки</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Подвійні лапки</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Зворотній слеш</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td>Символ у кодуванні Latin-1, який містить до трьох цифр у вісімковій системі числення <em>XXX</em> між <code>0</code> та <code>377</code>. Наприклад, <code>\251</code> - це вісімкова послідовність для знаку охорони авторського права.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td>Символ у кодуванні Latin-1, вказаний двома цифрами у шістнадцятковій системі числення <em>XX</em> між <code>00</code> та <code>FF</code>. Наприклад, <code>\xA9</code> - це шістнадцяткова послідовність для знаку охорони авторського права.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td>Символ Юнікоду, вказаний чотирма цифрами у шістнадцятковій системі числення <em>XXXX</em>. Наприклад, <code>\u00A9</code> - це Юнікодова послідовність для знаку охорони авторського права. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду</a>.</td> - </tr> - <tr> - <td><code>\u<em>{XXXXX}</em></code></td> - <td>Екранування кодів символів Юнікоду. Наприклад, <code>\u{2F804}</code> - це те саме, що й прості екранування Юнікоду <code>\uD87E\uDC04</code>.</td> - </tr> - </tbody> -</table> - -<h4 id="Екранування_символів">Екранування символів</h4> - -<p>Для символів, не перелічених у таблиці, зворотній слеш перед символом ігнорується, але таке використання не рекомендоване, і його слід уникати.</p> - -<p>Ви можете вставити лапки у рядок, поcтавивши перед ними зворотній слеш. Це називається <em>екрануванням</em> лапок. Наприклад:</p> - -<pre class="brush: js notranslate">var quote = "Він читав \"Кремацію Сема Маꥳ\" Р.Дж. Сервіса."; -console.log(quote);</pre> - -<p>Результатом цього буде:</p> - -<pre class="brush: js notranslate">Він читав "Кремацію Сема Маꥳ" Р.Дж. Сервіса.</pre> - -<p>Щоб включити у рядок сам зворотний слеш, ви маєте його екранувати. Наприклад, щоб присвоїти рядкові шлях до файлу <code>c:\temp</code>, використовуйте наступне:</p> - -<pre class="brush: js notranslate">var home = 'c:\\temp';</pre> - -<p>Ви також можете екранувати розрив рядка, поставивши перед ним зворотній слеш. І зворотній слеш, і розрив рядка видаляються зі значення рядка.</p> - -<pre class="brush: js notranslate">var str = 'цей текст \ -розбито \ -на кілька \ -рядків.' -console.log(str); // цей текст розбито на кілька рядків.</pre> - -<p>Хоча у JavaScript немає синтаксису "heredoc", ви можете наблизитися до нього, додавши в кінці кожного рядка екранування розриву рядка та екранування символа нового рядка:</p> - -<pre class="brush: js notranslate">var poem = -'Roses are red,\n\ -Violets are blue.\n\ -Sugar is sweet,\n\ -and so is foo.'</pre> - -<p>ECMAScript 2015 вводить новий тип літералів, а саме <a href="/uk/docs/Web/JavaScript/Reference/Template_literals"><strong>шаблонні літерали</strong></a>. Це додає багато нових функцій, в тому числі багаторядковий запис!</p> - -<pre class="brush: js notranslate" dir="rtl">var poem = -`Roses are red, -Violets are blue. -Sugar is sweet, -and so is foo.` </pre> - -<h2 id="Більше_інформації">Більше інформації</h2> - -<p>Цей розділ фокусується на базовому синтаксисі оголошень та типів. Щоб дізнатися більше про мовні конструкції JavaScript, дивіться також наступні розділи цього посібника:</p> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Потік керування та обробка помилок</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></li> - <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">Вирази та оператори</a></li> -</ul> - -<p>У наступному розділі ми розглянемо конструкції потоку керування та обробку помилок.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/uk/web/javascript/guide/index.html b/files/uk/web/javascript/guide/index.html deleted file mode 100644 index 868d0b7864..0000000000 --- a/files/uk/web/javascript/guide/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Посібник JavaScript -slug: Web/JavaScript/Guide -tags: - - Guide - - JavaScript - - 'l10n:priority' - - Посібник -translation_of: Web/JavaScript/Guide ---- -<div>{{jsSidebar("JavaScript Guide")}}</div> - -<p class="summary">Посібник з JavaScript показує, як використовувати мову <a href="/uk/docs/Web/JavaScript">JavaScript</a>, і надає її попередній огляд. Та якщо ви шукаєте детальну інформацію щодо особливостей мови, зазирніть у <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a>.</p> - -<h2 id="Розділи">Розділи</h2> - -<p>Цей посібник поділено на декілька розділів:</p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Introduction">Вступ</a></span> - - <p><a href="/uk/docs/Web/JavaScript/Guide/Introduction#Де_знайти_інформацію_з_JavaScrip">Про посібник</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Що_таке_JavaScript">Що таке JavaScript</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript та Java</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Початок_роботи_із_JavaScript">Початок роботи із JavaScript</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Hello_World">Hello World</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types">Граматика і типи</a></span> - <p><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Базовий синтаксис та коментарі</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Оголошення</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Область видимості змінної</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Підняття зміних</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Структури даних і типи</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Літерали</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Керування потоком та обробка помилок</a></span> - <p><code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> - <code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> - <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Об'єкти помилок</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Проміси</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></span> - <p><code><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> - <a href="/ukdocs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></span> - - <p><a href="/uk/docs/Web/JavaScript/Guide/Functions#Defining_functions">Визначення функцій</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Functions#Calling_functions">Виклик функцій</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Functions#Function_scope">Сфера досяжності функції</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Functions#Closures">Закритість</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Аргументи</a> та <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Functions#Function_parameters">параметри</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Стрілкові функції</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a></span> - <p><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Призначення</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">порівняння</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Арифметичні оператори</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Побітові</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">логічні оператори</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Умовний (тернарний) оператор</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа і дати</a></span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Числові літерали</a> - <p><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Об'єкт <code>Number</code></a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Об'єкт <code>Math</code></a><br> - <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Об'єкт <code>Date</code></a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту</a></span> - <p><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Рядкові літерали</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Об'єкт <code>String</code></a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Літерали шаблонних рядків</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Інтернаціоналізація</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярні вирази</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a></span> - - <p><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Масиви</a><br> - <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Типізовані масиви</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Keyed_collections">Класифіковані колекції</a></span> - <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> - <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> - <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> - <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects">Робота з об'єктами</a></span> - <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Об'єкти та властивості</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Створення об'єктів</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Визначення методів</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> - </li> - <li><span><a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Деталі об'єктної моделі</a></span> - <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">ООП, засноване на прототипах</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Створення ієрархії об'єктів</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Успадкування</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Проміси</a></span> - - <p><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Гарантії</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Chaining">Ланцюгування</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Поширення помилок</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Composition">Композиція</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Timing">Координація</a></p> - </li> - <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></span> - <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Ітератори</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Ітеровані</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Генератори</a></p> - </li> - <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Метапрограмування</a></span> - <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Обробники та пастки</a><br> - <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Відкликаний проксі</a><br> - <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> - </li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/uk/web/javascript/guide/indexed_collections/index.html b/files/uk/web/javascript/guide/indexed_collections/index.html deleted file mode 100644 index 0c4dfaef25..0000000000 --- a/files/uk/web/javascript/guide/indexed_collections/index.html +++ /dev/null @@ -1,578 +0,0 @@ ---- -title: Indexed collections -slug: Web/JavaScript/Guide/Indexed_collections -translation_of: Web/JavaScript/Guide/Indexed_collections ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div> - -<p class="summary">У цьому розділ представлено набір даних, упорядкованих за значенням індексу. Це включає масиви та подібні до масиву конструкції, такі як об'єкти {{jsxref("Array")}} та {{jsxref("TypedArray")}} .</p> - -<h2 id="Обєкт_Array"><code>Об'єкт Array</code></h2> - -<p><em>Масив </em>- це упорядкований набір значень, на який ви посилаєтесь з ім'ям та індексом.</p> - -<p>Наприклад, розглянемо масив під назвою <code>emp</code>, який містить імена працівників, індексовані їх числовим номером співробітника. Так <code>emp[1] </code>буде працівником номер один, <code>emp[2] </code>працівником номером два, тощо.</p> - -<p>У JavaScript немає явного типу даних масиву. Однак ви можете використовувати заздалегідь заданий об’єкт <code>Array</code> та його методи для роботи з масивами у ваших програмах. Об'єкт <code>Array</code> має методи маніпулювання масивами різними способами, такими як з'єднання(joining), реверсування(reversing) та сортування. Він має властивість визначати довжину масиву та інші властивості для використання з регулярними виразами.</p> - -<h3 id="Створення_масиву">Створення масиву</h3> - -<p>Наступні операції створюють еквівалентні масиви:</p> - -<pre class="brush: js">let arr = new Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) -let arr = Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) -let arr = [<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] -</pre> - -<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> - це список значень елементів масиву. Коли ці значення задані, масив ініціалізується з ними як елементами масиву. Властивість довжина (<code>length)</code> масиву встановлюється рівною кількості аргументів.</p> - -<p>Синтаксис дужки називається "літералом масиву" або "ініціалізатором масиву". Він коротший, ніж інші форми створення масиву, і тому загалом кращий. Докладніше див. <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Літерали_масивів">Літерали масиву</a>.</p> - -<p>Для створення масиву з ненульовою довжиною, але без будь-яких елементів, може бути використане будь-яке з наведеного нижче:</p> - -<pre class="brush: js">// This... -let arr = new Array(<var>arrayLength</var>) - -// ...буде такий саме масив як цей -let arr = Array(<var>arrayLength</var>) - -// Це має точно такий же ефект -let arr = [] -arr.length = <var>arrayLength</var> -</pre> - -<div class="note"> -<p><strong>Примітка:</strong> У наведеному вище коді, <code><var>arrayLength</var></code> повинен бути типу <code>Number</code>. У іншому випадку, буде створений масив з єдиним елементом (з наданим значенням). Виклик <code>arr.length</code> поверне <code><var>arrayLength</var></code>, але масив у дійсності убде містити порожні (undefined) елементи. Запуск циклу {{jsxref("Statements/for...in","for...in")}} для масиву не поверне жодного з елементів масиву.</p> -</div> - -<p>Крім нещодавно означеної змінної, як показано вище, масиви також можуть бути призначені як властивість для нового або існуючого об'єкта:</p> - -<pre class="brush: js">let obj = {} -// ... -obj.prop = [element0, element1, ..., elementN] - -// або -let obj = {prop: [element0, element1, ...., elementN]} -</pre> - -<p>Якщо Ви хочете ініціалізувати масив з єдиним елементом, а цей елемент є <code>Number</code>, ви повинні використовувати синтаксис квадратних дужок. Коли одне значення <code>Number</code> передається конструктору або функції <code>Array()</code>, воно інтерпретується як <code>arrayLength</code>, а не як окремий елемент.</p> - -<pre class="brush: js">let arr = [42] // Створює масив тільки з одним елементом: - // числом 42. - -let arr = Array(42) // Створює масив без жодного елементу - // і довжина масиву arr.length встановлена в 42. - // - // Це еквівалентно наступному: -let arr = [] -arr.length = 42 -</pre> - -<p>Виклик <code>Array(<var>N</var>)</code> призводить до <code>RangeError</code>, якщо <code><var>N</var></code> - це не ціле число, тобто дробова частина якого не дорівнює нулю. Наступний приклад ілюструє таку поведінку.</p> - -<pre class="brush: js">let arr = Array(9.3) // RangeError: Invalid array length -</pre> - -<p>Якщо ваш код потребує створення масивів з окремими елементами довільного типу даних, безпечніше використовувати літерали масиву. Крім того, спершу створіть порожній масив, перш ніж додати до нього один елемент.</p> - -<p>У ES2015 ви можете використовувати статичний метод {{jsxref("Array.of")}} для створення масивів з одним елементом.</p> - -<pre class="brush: js">let wisenArray = Array.of(9.3) // wisenArray містить тільки один елемент 9.3</pre> - -<h3 id="Заповнення_масиву">Заповнення масиву</h3> - -<p>Ви можете заповнити масив, призначивши значення його елементам. Наприклад:</p> - -<pre class="brush: js">let emp = [] -emp[0] = 'Casey Jones' -emp[1] = 'Phil Lesh' -emp[2] = 'August West' -</pre> - -<div class="note"> -<p><strong>Примітка:</strong> Якщо ви подасте неціле значення для оператора масиву в наведеному вище коді, буде створено властивість в об'єкті, що представляє масив, замість елемента масиву.</p> - -<pre class="brush: js">let arr = [] -arr[3.4] = 'Oranges' -console.log(arr.length) // 0 -console.log(arr.hasOwnProperty(3.4)) // true -</pre> -</div> - -<p>Ви також можете заповнити масив під час його створення:</p> - -<pre class="brush: js">let myArray = new Array('Hello', myVar, 3.14159) -// або -let myArray = ['Mango', 'Apple', 'Orange'] -</pre> - -<h3 id="Звернення_до_елементів_масиву">Звернення до елементів масиву</h3> - -<p>Ви звертаєтеся на елементи масиву, використовуючи порядковий номер елемента. Наприклад, припустимо, Ви означуєте такий масив:</p> - -<pre class="brush: js">let myArray = ['Wind', 'Rain', 'Fire'] -</pre> - -<p>Потім Ви звертаєтеся до першого елементу масиву як до <code>myArray[0]</code>, а до другого елементу масиву як до <code>myArray[1]</code>. Індекс елементів починається з нуля.</p> - -<div class="note"> -<p><strong>Примітка:</strong> Оператор масиву (квадратні дужки) також використовуються для доступу до властивостей масиву. (Масиви також є об'єктами в JavaScript). Наприклад:</p> - -<pre class="brush: js">let arr = ['one', 'two', 'three'] -arr[2] // three -arr['length'] // 3 -</pre> -</div> - -<h3 id="Довжина_масиву">Довжина масиву</h3> - -<p>На рівні реалізації масиви JavaScript фактично зберігають свої елементи як стандартні властивості об'єкта, використовуючи індекс масиву як ім'я властивості.</p> - -<p>Властивість <code>length</code> особлива. Вона завжди повертає індекс останнього елемента плюс один. (У наведеному нижче прикладі <code>'Dusty' </code>індексується на рівні 30, тому <code>cats.length</code> повертає <code>30 + 1</code>).</p> - -<p>Пам'ятайте, що індекси масиву JavaScript базуються на 0: вони починаються з <code>0</code>, а не <code>1</code>. Це означає, що властивість <code>length</code> буде на один більше, ніж найвищий індекс, що зберігається в масиві:</p> - -<pre class="brush: js">let cats = [] -cats[30] = ['Dusty'] -console.log(cats.length) // 31 -</pre> - -<p>Ви також можете записати значення у властивість <code>length</code> .</p> - -<p>Введення значення, коротшого за кількість збережених елементів, скорочує масив. Написання <code>0</code> спустошує масив повністю:</p> - -<pre class="brush: js">let cats = ['Dusty', 'Misty', 'Twiggy'] -console.log(cats.length) // 3 - -cats.length = 2 -console.log(cats) // logs "Dusty, Misty" - Twiggy видалено - -cats.length = 0 -console.log(cats) // logs []; масив cats array - порожній - -cats.length = 3 -console.log(cats) // logs [ <3 пустих елементи> ] -</pre> - -<h3 id="Ітерація_з_масивами">Ітерація з масивами</h3> - -<p>Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:</p> - -<pre class="brush: js">let colors = ['red', 'green', 'blue'] -for (let i = 0; i < colors.length; i++) { - console.log(colors[i]) -} -</pre> - -<p>Якщо ви знаєте, що жоден з елементів вашого масиву не повертає <code>false</code> в булевому контексті, наприклад, якщо ваш масив складається з вузлів <a href="/uk/docs/DOM" title="en-US/docs/DOM">DOM</a>, Ви можете використовувати більш ефективну ідіому:</p> - -<pre class="brush: js">let divs = document.getElementsByTagName('div') -for (let i = 0, div; div = divs[i]; i++) { - /* Process div in some way */ -} -</pre> - -<p>Це дозволяє уникнути накладних перевірок довжини масиву та гарантує, що змінна <code><var>div</var></code> для додаткової зручності переназначається поточному елементу на кожній ітерації .</p> - -<p>Метод {{jsxref("Array.forEach", "forEach()")}} забезпечує інший спосіб ітерації з масивом:</p> - -<pre class="brush: js">let colors = ['red', 'green', 'blue'] -colors.forEach(function(color) { - console.log(color) -}) -// red -// green -// blue -</pre> - -<p>Крім того, ви можете скоротити код для параметра forEach за допомогою функції стрілок ES2015:</p> - -<pre class="brush: js">let colors = ['red', 'green', 'blue'] -colors.forEach(color => console.log(color)) -// red -// green -// blue -</pre> - -<p>Функція, передана <code>forEach</code> , виконується один раз для кожного елемента масиву, при цьому елемент масиву передається як аргумент функції. Не присвоєні значення не перебираються в циклі <code>forEach</code>.</p> - -<p>Зауважте, що елементи масиву, опущені при означенні масиву, не перебираються під час ітерації <code>forEach</code>, але пеербираються, коли вручну елемнту було присвоєно <code>undefined</code>:</p> - -<pre class="brush: js">let array = ['first', 'second', , 'fourth'] - -array.forEach(function(element) { - console.log(element) -}) -// first -// second -// fourth - -if (array[2] === undefined) { - console.log('array[2] is undefined') // true -} - -array = ['first', 'second', undefined, 'fourth'] - -array.forEach(function(element) { - console.log(element) -}) -// first -// second -// undefined -// fourth -</pre> - -<p>Оскільки елементи JavaScript зберігаються як стандартні властивості об'єкта, не рекомендується проводити повторення через масиви JavaScript, використовуючи цикли {{jsxref("Statements/for...in","for...in")}} , оскільки будуть перебрані як нормальні елементи так і всі властивості масиву.</p> - -<h3 id="Методи_масивів">Методи масивів</h3> - -<p>Об'єкт {{jsxref("Array")}} має наступні методи:</p> - -<p>{{jsxref("Array.concat", "concat()")}} з'єднує два або більше масива і повертає новий масив.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3') -myArray = myArray.concat('a', 'b', 'c') -// myArray тепер такий ["1", "2", "3", "a", "b", "c"] -</pre> - -<p>{{jsxref("Array.join", "join(delimiter = ',')")}} об'єднує всі елементи масиву в рядок.</p> - -<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire') -let list = myArray.join(' - ') // list є "Wind - Rain - Fire" -</pre> - -<p>{{jsxref("Array.push", "push()")}} додає один або більше елементів в кінець масиву і повертає отриману довжину <code>length</code> масиву.</p> - -<pre class="brush: js">let myArray = new Array('1', '2') -myArray.push('3') // myArray тепер ["1", "2", "3"] -</pre> - -<p>{{jsxref("Array.pop", "pop()")}} видаляє останній елемент з масиву і повертає цей елемент.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3') -let last = myArray.pop() -// myArray тепер ["1", "2"], last = "3" -</pre> - -<p>{{jsxref("Array.shift", "shift()")}} видаляє перший елемент з масиву і повертає цей елемент.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3') -let first = myArray.shift() -// myArray тепер ["2", "3"], first є "1" -</pre> - -<p>{{jsxref("Array.unshift", "unshift()")}} додає один або більше елементів до передньої частини масиву і повертає нову довжину масиву.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3') -myArray.unshift('4', '5') -// myArray став ["4", "5", "1", "2", "3"] -</pre> - -<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} виймає частину масиву і повертає новий масив.</p> - -<pre class="brush: js">let myArray = new Array('a', 'b', 'c', 'd', 'e') -myArray = myArray.slice(1, 4) // починаючи з 1-го вимйає елементи до 4-го - // повертає [ "b", "c", "d"] -</pre> - -<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} видаляє елементи з масиву та (необов'язково) замінює їх. Він повертає елементи, вилучені з масиву.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3', '4', '5') -myArray.splice(1, 3, 'a', 'b', 'c', 'd') -// myArray тепер ["1", "a", "b", "c", "d", "5"] -// Цей код стартує з першого індексу (or where the "2" was), -// видаляє 3 елементи, а тоді вставляє всі підряд -// на це місце. -</pre> - -<p>{{jsxref("Array.reverse", "reverse()")}} транспонує масив: перший елемент масиву стає останнім, а останній стає першим. Він повертає посилання на масив.</p> - -<pre class="brush: js">let myArray = new Array('1', '2', '3') -myArray.reverse() -// транспонований масив myArray = ["3", "2", "1"] -</pre> - -<p>{{jsxref("Array.sort", "sort()")}} сортує елементи масиву на місці та повертає посилання на масив.</p> - -<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire') -myArray.sort() -// відсортований масив myArray = ["Fire", "Rain", "Wind"] -</pre> - -<p><code>sort()</code> також може скористатися функцією зворотного виклику для визначення порівняння елементів масиву.</p> - -<p>Метод <code>sort</code> (та інші нижче), які приймають функцію зворотного виклику, відомі як ітераційні методи, оскільки певним чином вони перебирають весь масив. Кожен з них бере необов'язковий другий аргумент під назвою <code><var>thisObject</var></code>. Якщо <code><var>thisObject</var></code> передається, він стає значенням ключового слова <code>this</code> всередині тіла функції зворотного виклику. Якщо це не передбачено, як і в інших випадках, коли функція викликається поза явним контекстом об'єкта, <code>this</code> стосуватиметься глобального об'єкта (<a href="/uk/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a>) при використанні функції вказівника зворотного виклику, або <code>undefined</code> при використанні нормальної функції зворотного виклику.</p> - -<p>Функція зворотного виклику викликається двома аргументами, які є елементами масиву.</p> - -<p>Функція нижче порівнює два значення і повертає одне з трьох значень:</p> - -<p>Наприклад, наступне буде сортувати за останньою літерою рядка:</p> - -<pre class="brush: js">let sortFn = function(a, b) { - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; -} -myArray.sort(sortFn) -// відсортований масив myArray = ["Wind","Fire","Rain"]</pre> - -<ul> - <li>якщо <code><var>a</var></code> за системою сортування менше <code><var>b</var></code> , поверне <code>-1</code> (або будь-яке від’ємне число)</li> - <li>якщо <code><var>a</var></code> за системою сортування більше, ніж <code><var>b</var></code> , поверне <code>1</code> (або будь-яке додатне число)</li> - <li>якщо <code><var>a</var></code> і <code><var>b</var></code> вважати еквівалентними, поверне <code>0</code>.</li> -</ul> - -<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} шукає масив для <code><var>searchElement</var></code> та повертає індекс першого збігу.</p> - -<pre class="brush: js">let a = ['a', 'b', 'a', 'b', 'a'] -console.log(a.indexOf('b')) // пише 1 - -// Тепер спробуйте ще раз, починаючи з останнього співпадіння -console.log(a.indexOf('b', 2)) // пише 3 -console.log(a.indexOf('z')) // пише -1, оскільки 'z' не було знайдено -</pre> - -<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} працює як <code>indexOf</code>, але починає з кінця і шукає у зворотному порядку.</p> - -<pre class="brush: js">let a = ['a', 'b', 'c', 'd', 'a', 'b'] -console.log(a.lastIndexOf('b')) // пише 5 - -// Тепер спробуйте ще раз, починаючи з останнього співпадіння -console.log(a.lastIndexOf('b', 4)) // пише 1 -console.log(a.lastIndexOf('z')) // пише -1 -</pre> - -<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} виконує <code><var>callback</var></code> на кожному елементі масиву і повертає <code>undefined</code>.</p> - -<pre class="brush: js">let a = ['a', 'b', 'c'] -a.forEach(function(element) { console.log(element) }) -// logs each item in turn -</pre> - -<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} повертає новий масив повернутого значення при виконанні зворотного виклику <code><var>callback</var></code> на кожному елементі масиву.</p> - -<pre class="brush: js">let a1 = ['a', 'b', 'c'] -let a2 = a1.map(function(item) { return item.toUpperCase() }) -console.log(a2) // logs ['A', 'B', 'C'] -</pre> - -<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} повертає новий масив, що містить елементи, для яких <code><var>callback</var></code> повернув <code>true</code>.</p> - -<pre class="brush: js">let a1 = ['a', 10, 'b', 20, 'c', 30] -let a2 = a1.filter(function(item) { return typeof item === 'number'; }) -console.log(a2) // logs [10, 20, 30] -</pre> - -<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} повертає <code>true</code>, якщо <code><var>callback</var></code> повертає <code>true</code> для кожного елемента масиву.</p> - -<pre class="brush: js">function isNumber(value) { - return typeof value === 'number' -} -let a1 = [1, 2, 3] -console.log(a1.every(isNumber)) // logs true -let a2 = [1, '2', 3] -console.log(a2.every(isNumber)) // logs false -</pre> - -<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} повертає <code>true</code> , якщо <code><var>callback</var></code> повертає <code>true </code>для принаймні одного елемента в масиві.</p> - -<pre class="brush: js">function isNumber(value) { - return typeof value === 'number' -} -let a1 = [1, 2, 3] -console.log(a1.some(isNumber)) // logs true -let a2 = [1, '2', 3] -console.log(a2.some(isNumber)) // logs true -let a3 = ['1', '2', '3'] -console.log(a3.some(isNumber)) // logs false -</pre> - -<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} застосовує <code><var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>currentIndex</var>[, <var>array</var>]])</code> для кожного значення масиву з метою зменшення списку елементів до одного значення. Функція зменшення повертає кінцеве значення, повернене функцією <code><var>callback</var></code> .</p> - -<p>Якщо вказано <code><var>initialValue</var></code> , тоді <code><var>callback</var></code> викликається <code><var>initialValue</var></code> як значення першого параметра, а значення першого елемента в масиві - як значення другого параметра.</p> - -<p>Якщо <code><var>initialValue</var></code> не вказана, першими двома параметрами <code><var>callback</var></code> будуть перший і другий елементи масиву. При кожному наступному виклику значенням першого параметра буде будь-який <code><var>callback</var></code> , повернутий при попередньому виклику, а значення другого параметра буде наступним значенням масиву.</p> - -<p>Якщо для <code><var>callback</var></code> потрібен доступ до індексу оброблюваного елемента, для доступу до всього масиву вони доступні як необов'язкові параметри.</p> - -<pre class="brush: js">let a = [10, 20, 30] -let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0) -console.log(total) // Prints 60 -</pre> - -<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} працює подібно <code>reduce()</code>, але починається з останнього елемента.</p> - -<p><code>reduce</code> та <code>reduceRight</code> - найменш очевидний із ітеративних методів масиву. Їх слід використовувати для алгоритмів, що поєднують два значення рекурсивно, щоб зменшити послідовність до одного значення.</p> - -<h3 id="Багатовимірні_масиви">Багатовимірні масиви</h3> - -<p>Масиви можуть бути вкладені, тобто масив може містити інший масив як елемент. Використовуючи цю характеристику масивів JavaScript, можна створити багатовимірні масиви.</p> - -<p>Наступний код створює багатовимірний масив.</p> - -<pre class="brush: js">let a = new Array(4) -for (let i = 0; i < 4; i++) { - a[i] = new Array(4) - for (let j = 0; j < 4; j++) { - a[i][j] = '[' + i + ', ' + j + ']' - } -} -</pre> - -<p>Цей приклад створює масив із таких рядків:</p> - -<pre>Row 0: [0, 0] [0, 1] [0, 2] [0, 3] -Row 1: [1, 0] [1, 1] [1, 2] [1, 3] -Row 2: [2, 0] [2, 1] [2, 2] [2, 3] -Row 3: [3, 0] [3, 1] [3, 2] [3, 3] -</pre> - -<h3 id="Масиви_та_регулярні_вирази">Масиви та регулярні вирази</h3> - -<p>Коли масив є результатом збігу між регулярним виразом і рядком, масив повертає властивості та елементи, які надають інформацію про збіг. Масив - це повернене значення {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, і {{jsxref("Global_Objects/String/split","String.split()")}}. Інформацію про використання масивів з регулярними виразами див <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p> - -<h3 id="Робота_з_масиво-подібними_обєктами">Робота з масиво-подібними об'єктами</h3> - -<p>Деякі об`єкти JavaScript, такі як <a href="/uk/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a> повертають <a href="/uk/docs/Web/API/Document/getElementsByTagName" title="returns an HTMLCollection of elements with the given tag name."><code>document.getElementsByTagName()</code></a> або об'єкт {{jsxref("Functions/arguments","arguments")}}, доступний в тілі функції, який виглядає і поводиться як масиви на поверхні, але не ділиться всіма їх методами. Наприклад, об'єкт <code>arguments</code> забезпечує атрибут {{jsxref("Global_Objects/Function/length","length")}} але не реалізує метод {{jsxref("Array.forEach", "forEach()")}}.</p> - -<p>Методи прототипу масиву можна викликати для інших об’єктів, подібних до масиву. наприклад:</p> - -<pre class="brush: js">function printArguments() { - Array.prototype.forEach.call(arguments, function(item) { - console.log(item) - }) -} -</pre> - -<p>Методи прототипу масиву також можна використовувати і для рядків, оскільки вони забезпечують послідовний доступ до своїх символів аналогічно масивам:</p> - -<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) { - console.log(chr) -}) -</pre> - -<h2 id="Типізовані_масиви">Типізовані масиви</h2> - -<p><a href="/uk/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> є схожими на масив об'єктів і забезпечують механізм доступу до необроблених бінарних даних. Як ви вже знаєте, об'єкт {{jsxref("Array")}} динамічно росте і скорочується і може мати будь-яке значення JavaScript. Рушії JavaScript виконують оптимізацію, щоб ці масиви були швидкими. Однак, оскільки веб-застосунки стають все більш потужними, додаючи такі функції, як маніпулювання аудіо та відео, доступ до необроблених даних за допомогою <a href="/uk/docs/WebSockets">WebSockets</a> тощо, стало зрозуміло, що є випадки, коли корисним буде код JavaScript для швидкого та легкого маніпулювати необробленими бінарними даними в типізованих масивах.</p> - -<h3 id="Буфери_та_представлення_типізовані_архітектури_масивів">Буфери та представлення: типізовані архітектури масивів</h3> - -<p>Щоб досягти максимальної гнучкості та ефективності, JavaScript типізовані масиви розділили реалізацію на буфери (<strong>buffers</strong>) та представлення(<strong>views</strong>). Буфер (реалізований об'єктом {{jsxref ("ArrayBuffer")}}) - це об'єкт, що представляє фрагмент даних; він не має формату, про який можна говорити, і не пропонує механізму доступу до його вмісту. Для доступу до пам'яті, що міститься в буфері, вам потрібно скористатися представленням. Представлення забезпечує контекст - тобто тип даних, початкове зміщення та кількість елементів - який перетворює дані у фактично набраний масив.</p> - -<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> - -<h3 id="ArrayBuffer">ArrayBuffer</h3> - -<p>{{jsxref("ArrayBuffer")}} - це тип даних, який використовується для репрезентації загального буфера даних бінарних даних фіксованої довжини. Ви не можете безпосередньо маніпулювати вмістом <code>ArrayBuffer</code>; натомість ви створюєте типізоване представлення масиву або {{jsxref("DataView")}} який представляє буфер у певному форматі, і використовують його для читання та запису вмісту буфера.</p> - -<h3 id="Типізоване_представлення_масиву">Типізоване представлення масиву</h3> - -<p>Типізовані представлення масивів мають самостійно описові назви та надають представлення для всіх звичайних числових типів, таких як <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> і так далі. Існує один спеціальний вид типізованого представлення масиву <code>Uint8ClampedArray</code>. Він фіксує значення між <code>0</code> та <code>255</code>. Це корисно, наприклад, для обробки даних <a href="/uk/docs/Web/API/ImageData">Canvas</a>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">Type</th> - <th class="header" scope="col">Value Range</th> - <th class="header" scope="col">Size in bytes</th> - <th class="header" scope="col">Description</th> - <th class="header" scope="col">Web IDL type</th> - <th class="header" scope="col">Equivalent C type</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Int8Array")}}</td> - <td><code>-128</code> to <code>127</code></td> - <td>1</td> - <td>8-bit two's complement signed integer</td> - <td><code>byte</code></td> - <td><code>int8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8Array")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint8ClampedArray")}}</td> - <td><code>0</code> to <code>255</code></td> - <td>1</td> - <td>8-bit unsigned integer (clamped)</td> - <td><code>octet</code></td> - <td><code>uint8_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int16Array")}}</td> - <td><code>-32768</code> to <code>32767</code></td> - <td>2</td> - <td>16-bit two's complement signed integer</td> - <td><code>short</code></td> - <td><code>int16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint16Array")}}</td> - <td><code>0</code> to <code>65535</code></td> - <td>2</td> - <td>16-bit unsigned integer</td> - <td><code>unsigned short</code></td> - <td><code>uint16_t</code></td> - </tr> - <tr> - <td>{{jsxref("Int32Array")}}</td> - <td><code>-2147483648</code> to <code>2147483647</code></td> - <td>4</td> - <td>32-bit two's complement signed integer</td> - <td><code>long</code></td> - <td><code>int32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Uint32Array")}}</td> - <td><code>0</code> to <code>4294967295</code></td> - <td>4</td> - <td>32-bit unsigned integer</td> - <td><code>unsigned long</code></td> - <td><code>uint32_t</code></td> - </tr> - <tr> - <td>{{jsxref("Float32Array")}}</td> - <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> - <td>4</td> - <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> - <td><code>unrestricted float</code></td> - <td><code>float</code></td> - </tr> - <tr> - <td>{{jsxref("Float64Array")}}</td> - <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> - <td>8</td> - <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> - <td><code>unrestricted double</code></td> - <td><code>double</code></td> - </tr> - <tr> - <td>{{jsxref("BigInt64Array")}}</td> - <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> - <td>8</td> - <td>64-bit two's complement signed integer</td> - <td><code>bigint</code></td> - <td><code>int64_t (signed long long)</code></td> - </tr> - <tr> - <td>{{jsxref("BigUint64Array")}}</td> - <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> - <td>8</td> - <td>64-bit unsigned integer</td> - <td><code>bigint</code></td> - <td><code>uint64_t (unsigned long long)</code></td> - </tr> - </tbody> -</table> - -<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> and the reference documentation for the different {{jsxref("TypedArray")}} objects.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p> diff --git a/files/uk/web/javascript/guide/introduction/index.html b/files/uk/web/javascript/guide/introduction/index.html deleted file mode 100644 index 8f1d97d352..0000000000 --- a/files/uk/web/javascript/guide/introduction/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Вступ -slug: Web/JavaScript/Guide/Introduction -tags: - - JavaScript - - Вступ - - Початківець - - Путівник -translation_of: Web/JavaScript/Guide/Introduction ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> - -<p class="summary">Цей розділ розповідає про мову JavaScript та деякі засадничі її поняття.</p> - -<h2 id="Необхідний_рівень_підготовки">Необхідний рівень підготовки</h2> - -<p>Цей навчальний посібник передбачає, що ви маєте деякі початкові знання:</p> - -<ul> - <li>Загальне уявлення про {{Glossary("Internet", "Інтернет")}} та ({{Glossary("World_Wide_Web", "Всесвітнє павутиння")}});</li> - <li>Практичний досвід використання мови розмітки гіпертексту ({{Glossary("HTML")}});</li> - <li>Певний досвід программування. Якщо ви у цьому новачок, то спробуйте один з посібників із <a href="/uk/docs/Web/JavaScript">JavaScript</a> на головній сторінці.</li> -</ul> - -<h2 id="Де_знайти_інформацію_з_JavaScript">Де знайти інформацію з JavaScript</h2> - -<p>Документація з JavaScript на ресурсі MDN містить таке:</p> - -<ul> - <li><a href="/uk/Learn">Вивчення Web</a> містить інформацію для початківців, а також ознайомлює з основними концепціями програмування та Інтернету;</li> - <li><a href="/uk/docs/Web/JavaScript/Guide">Навчальний посібник з JavaScript</a> (цей посібник) містить огляд мови JavaScript та її об'єктів;</li> - <li><a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> містить докладні довідкові матеріали з JavaScript.</li> -</ul> - -<p>Якщо ви новачок у JavaScript, почніть із вивчення статей, розміщених у <a href="/uk/Learn">навчальній секції</a> (learning area) та <a href="/uk/docs/Web/JavaScript/Guide">Посібника з JavaScript</a>. Опанувавши основи, можете використовувати <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> для отримання більш детальної інформації про конкретні об'єкти та вирази (конструкції мови).</p> - -<h2 id="Що_таке_JavaScript">Що таке JavaScript?</h2> - -<p>JavaScript — кроссплатформна об'єктно-зорієнтована мова сценаріїв (скриптів). Рушій JavaScript підключається до об'єктів свого середовища виконання (зазвичай, веб-переглядача) та надає можливість керування ними.</p> - -<p>Мова JavaScript має стандартну бібліотеку об'єктів (таких як <code>Array</code>, <code>Date</code> та <code>Math</code>) і основний набір елементів мови програмування, таких як оператори, керівні структури та вирази.</p> - -<p>Ядро JavaScript може бути розширене для різних потреб шляхом доповнення його додатковими об'єктами. Наприклад:</p> - -<ul> - <li><em>На стороні клієнта JavaScript</em> розширює ядро мови, додаючи об'єкти керування переглядачем і його об'єктною моделлю документа — Document Object Model (DOM). Наприклад, клієнтські розширення дозволяють застосункам розміщувати елементи на HTML-формі та реагувати на дії користувача, такі як клацання миші, введення даних у форму і пересування сторінками.</li> - <li><em>На стороні сервера JavaScript</em> розширює ядро мови шляхом додавання об'єктів, що стосуються роботи JavaScript на сервері. Наприклад, серверні розширення дозволяють застосункам взаємодіяти з базою даних, забезпечувати безперервність потоку інформації від одного запущеного застосунку до іншого, або виконувати маніпуляції з файлами на сервері.</li> -</ul> - -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript та Java</h2> - -<p>Мови програмування JavaScript та Java у окремих рисах схожі між собою, але все одно докорінно відрізняються одна від одної. Мова JavaScript чимось нагадує Java, але, на відміну від останньої, не має чіткої типізації даних та строгого контролю за типами.</p> - -<p>JavaScript наслідує синтаксис більшості виразів Java, також наслідуються угоди про іменування та основні конструкції керування перебігом виконання сценарію. Це і стало причиною того, що свого часу назву мови змінили з LiveScript на JavаScript.</p> - -<p>На відміну від системи часу коміляції декларативно побудованих класів у Java, мова JavaScript підтримує систему часу виконання, що ґрунтується на невеликій кількості типів даних, представлених числовим типом, логічними, та рядковими значеннями. JavaScript має об'єктну модель, що спирається на прототипи, замість більш поширеної, побудованої на класах, об'єктної моделі, властивої мові Java. Модель на базі прототипів надає можливість динамічного спадкування; тобто успадковане може бути різним для різних об'єктів. Також у JavaScript реалізована підтримка функцій без будь-яких особливих декларативних вимог. Функції можуть бути властивостями об'єктів, функціями, що виконуються, та слабко типізованими методами.</p> - -<p>Для JavaScript властива вільніша форма мови, ніж для Java. Вас не зобов'язують оголошувати всі змінні, класи та методи. JavaScript-програміста не турбує питання, є метод відкритим (public), закритим (private), чи захищеним (protected). Для змінних, параметрів, та типів, що повертаються функціями, не вказується явним чином їх тип.</p> - -<p>Java — це мова програмування, яка базується на класах, розроблена для швидкого виконання та забезпечення захищеності типів. Захищеність типів означає, що не можна, наприклад, привести тип integer до типу object reference, або отримати доступ до закритої пам'яті, маніпулюючи з байткодом Java. Базована на класах об'єктна модель означає, що програма повністю складається із класів та їх методів. Успадкування класів у Java та строга типізація взагалі вимагають існування тісно пов'язаних між собою ієрархій об'єктів. Ці вимоги роблять програмування на Java більш складним, ніж JavaScript-програмування.</p> - -<p>На противагу цьому, JavaScript, за своїм духом, близька до невеликих мов із динамічною типізацією, таких, як HyperTalk та dBASE. Ці скриптові мови надають інструменти програмування для більш широкого загалу користувачів, завдяки простоті синтаксису, вбудованим функціональним можливостям зі спеціалізації, та мінімальним вимогам до створення об'єктів.</p> - -<table class="standard-table"> - <caption>JavaScript у порівнянні з Java</caption> - <thead> - <tr> - <th scope="col">Мова JavaScript</th> - <th scope="col">Мова Java</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>Об'єктно орієнтована. Не має відмінностей між типами об'єктів. Спадкування здійснюється через механізм прототипів, а властивості та методи можуть бути динамічно додані до будь-якого об'єкту.</p> - </td> - <td> - <p>Базується на класах. Об'єкти поділяються на класи та екземпляри. Спадкування реалізоване через ієрархію класів. До класів та екземплярів не можна динамічно додавати властивості та методи.</p> - </td> - </tr> - <tr> - <td>Для змінних не декларуються типи даних (динамічна типізація).</td> - <td>Для змінних необхідне декларування типів даних (статична типізація)</td> - </tr> - <tr> - <td>Не може автоматично вести запис до жорсткого диску.</td> - <td>Може автоматично вести запис до жорсткого диску.</td> - </tr> - </tbody> -</table> - -<p>Щоб отримати більше інформації щодо відмінностей між JavaScript та Java, відвідайте цей розділ: <a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Докладно про об'єктну модель</a>.</p> - -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</h2> - -<p>JavaScript стандартизований Європейською асоціаіцєю з стандартизації інформаційних та комунікаційних систем — <a class="external" href="http://www.ecma-international.org/">Ecma International</a> (спершу складноскорот ECMA позначав European Computer Manufacturers Association). Ця стандартизована версія JavaScript, що має назву ECMAScript, однаково працює у всіх застосунках, що підтримують стандарт. Різні компанії можуть використовувати цей відкритий стандарт для розробки своїх реалізацій JavaScript. ECMAScript стандарт задокументований у специфікації ECMA-262. Див. <a href="/uk/docs/Web/JavaScript/New_in_JavaScript">Нове у JavaScript</a>, щоб довідатись більше про різні версії JavaScript та про редакції специфікації ECMAScript.</p> - -<p>Стандарт ECMA-262 також затверджений <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization), як ISO-16262. Ви можете знайти специфікацію на сайті <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a>. Специфікація ECMAScript не описує об'єктну модель документа Document Object Model (DOM), яка стандартизована <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM визначає спосіб, у який об'єкти HTML-документа стають доступними із вашого скрипта. Для отримання більш повного уявлення про технології, що використовуються при програмуванні на JavaScript, зверніться до статті <a href="/uk/docs/Web/JavaScript/JavaScript_technologies_overview">Огляд технологій JavaScript</a>.</p> - -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Документація з JavaScript та специфікація ECMAScript</h3> - -<p>Специфікація ECMAScript є низкою вимог до реалізації ECMAScript. Цих вимог слід дотримуватись, щоб запровадити відповідні стандартам можливості мови у реалізації ECMAScript, або, щоб створити рушій (наприклад, SpiderMonkey у Firefox або v8 у Chrome).</p> - -<p>Документ ECMAScript не призначений для того, щоб надавати допомогу у програмуванні скриптів. Для отримання інформації про написання скриптів слід використовувати документацію JavaScript.</p> - -<p>У специфікації ECMAScript використовується термінологія і синтаксис, з якими JavaScript-програмісти можуть бути і не знайомі. Не зважаючи на те, що опис мови у ECMAScript може бути дещо іншим, сама мова залишається такою самою. JavaScript підтримує весь функціонал, закладений у специфікації ECMAScript.</p> - -<p>Документація JavaScript описує аспекти мови, які використовує програміст JavaScript.</p> - -<h2 id="Початок_роботи_із_JavaScript">Початок роботи із JavaScript</h2> - -<p>Розпочати працювати з JavaScript дуже просто: все, що вам потрібно — сучасний переглядач. У даному посібнику розглядаються деякі можливості JavaScript, які, на даний час, реалізовані лише в останніх версіях Firefox, тому рекомендується використовувати саму останню версію Firefox.</p> - -<p>До Firefox вбудовано два інструменти, що роблять його використання дуже зручним для експериментів із JavaScript: Web Console та Scratchpad.</p> - -<h3 id="Веб-консоль_—_Web_Console">Веб-консоль — Web Console</h3> - -<p><a href="/uk/docs/Tools/Web_Console">Web Console</a> надає інформацію про поточну завантажену веб-сторінку, а також містить вбудовану <a href="/uk/docs/Tools/Web_Console#The_command_line_interpreter">командну стрічку (command line)</a>, у якій ви маєте змогу виконувати інструкції JavaScript у поточній сторінці.</p> - -<p>Щоб відкрити Web Console (<kbd>Ctrl + Shift + K</kbd>), оберіть пункт "Веб-консоль" із меню "Розробник" у меню Firefox. Вона з'явиться у нижній частині вікна переглядача. Внизу консолі, по всій її довжині, розміщено командну стрічку, до якої ви можете вводити команди та вирази JavaScript. Результати їх виконання одразу з'являться у панелі, що знаходиться вище:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Чернетка_—_Scratchpad">Чернетка — Scratchpad</h3> - -<p>Веб-консоль чудово підходить для виконання окремих рядків JavaScript, і, хоча, ви й можете вводити й виконувати рядки по одному, це не дуже зручно, і ви не можете зберігати зразки свого коду з використанням Веб-консолі. Таким чином, для виконання більш складних прикладів, є кращий інструмент — <a href="/uk/docs/Tools/Scratchpad">Чернетка (Scratchpad)</a>.</p> - -<p>Щоб відкрити Scratchpad (<kbd>Shift + F4</kbd>), оберіть "Чернетка" ("Scracthpad") у меню "Розробник" із меню Firefox. Він відкривається у окремому вікні і є редактором, який можна використовувати для запису і виконання JavaScript у переглядачі. Ви також можете зберегти скрипти до диску і завантажувати їх з диска.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Hello_World">Hello World</h3> - -<p>Щоб розпочати роботу з JavaScript, відкрийте Scratchpad та напишіть свою першу програму "Hello world":</p> - -<pre class="brush: js">function greetMe(yourName) { - alert("Hello " + yourName); -} - -greetMe("World"); -</pre> - -<p>Натисніть <kbd>Ctrl + R</kbd>, щоб побачити, як цей код буде виконано у переглядачі!</p> - -<p>На наступних сторінках цього посібника буде розглянуто синтаксис та можливості мови JavaScript, що дозволить вам створювати більш складні застосунки.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/uk/web/javascript/guide/iterators_and_generators/index.html b/files/uk/web/javascript/guide/iterators_and_generators/index.html deleted file mode 100644 index 144a8c9ee0..0000000000 --- a/files/uk/web/javascript/guide/iterators_and_generators/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Ітератори та генератори -slug: Web/JavaScript/Guide/Iterators_and_Generators -tags: - - JavaScript - - Посібник -translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</div> - -<p class="summary">Обробка кожного елемента колекції є дуже розповсюдженою операцією. JavaScript надає численні способи перебору колекції, від простих циклів {{jsxref("Statements/for","for")}} до {{jsxref("Global_Objects/Array/map","map()")}} та {{jsxref("Global_Objects/Array/filter","filter()")}}. Ітератори та генератори додають концепцію перебору безпосередньо у базову мову та надають механізм налаштування поведінки циклів {{jsxref("Statements/for...of","for...of")}}.</p> - -<p>Більш детально дивіться у статтях:</p> - -<ul> - <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> - <li>{{jsxref("Statements/for...of","for...of")}}</li> - <li>{{jsxref("Statements/function*","function*")}} та {{jsxref("Generator")}}</li> - <li>{{jsxref("Operators/yield","yield")}} та {{jsxref("Operators/yield*","yield*")}}</li> -</ul> - -<h2 id="Ітератори">Ітератори</h2> - -<p>У JavaScript <strong>ітератор</strong> - це об'єкт, який визначає послідовність та, за бажанням, значення, що повертається по її завершенні. Якщо конкретніше, то ітератор - це будь-який об'єкт, що реалізує <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протокол ітератора</a>, маючи метод <code>next()</code>, який повертає об'єкт з двома властивостями: <code>value</code>, наступне значення послідовності; та <code>done</code>, що дорівнює <code>true</code>, якщо останнє значення послідовності вже було отримане. Якщо поруч з <code>done</code> присутнє значення <code>value</code>, воно є поверненим значенням ітератора.</p> - -<p>Як тільки ітератор був створений, його можна явно обходити, викликаючи метод <code>next()</code>. Перебір ітератора називають споживанням ітератора, бо, загалом, це можна зробити лише один раз. Після того, як завершувальне значення було видане, додаткові виклики <code>next()</code> мають просто вертати <code>{done: true}</code>.</p> - -<p>Найтиповішим ітератором у Javascript є ітератор масиву, який просто повертає по черзі кожне значення відповідного масиву. Хоча легко уявити, що усі ітератори можна виразити у вигляді масивів, це не так. Масиви мають бути розташовані у пам'яті цілком, але ітератори споживаються лише за необхідності і, таким чином, можуть виражати послідовності необмеженого розміру, такі як діапазон цілих чисел між 0 та Infinity (нескінченністю).</p> - -<p>Ось приклад, який може робити саме це. Він дозволяє створювати ітератор простого діапазону, який визначає послідовність цілих чисел від <code>start</code> (включно) до <code>end</code> (не включно) з проміжком <code>step</code>. Його кінцеве повернене значення є розміром створеної послідовності, що відслідковується змінною iterationCount.</p> - -<pre class="brush: js">function makeRangeIterator(start = 0, end = Infinity, step = 1) { - let nextIndex = start; - let iterationCount = 0; - - const rangeIterator = { - next: function() { - let result; - if (nextIndex < end) { - result = { value: nextIndex, done: false } - nextIndex += step; - iterationCount++; - return result; - } - return { value: iterationCount, done: true } - } - }; - return rangeIterator; -}</pre> - -<p>Далі використання ітератора виглядає наступним чином:</p> - -<pre class="brush: js">let it = makeRangeIterator(1, 10, 2); - -let result = it.next(); -while (!result.done) { - console.log(result.value); // 1 3 5 7 9 - result = it.next(); -} - -console.log("Перебрано послідовність розміром: ", result.value); // [повертає 5 чисел з інтервалу від 0 до 10] - -</pre> - -<div class="note"> -<p>Неможливо знати, чи певний об'єкт є ітератором. Якщо вам необхідно це зробити, використовуйте <a href="#Iterables">ітерабельні об'єкти</a>.</p> -</div> - -<h2 id="Функції-генератори">Функції-генератори</h2> - -<p>Хоча користувацькі ітератори є потужним інструментом, їхнє створення вимагає обережного програмування через необхідність явно підтримувати їхній внутрішній стан. Функції-генератори надають потужну альтернативу: вони дозволяють визначати алгоритм перебору написанням єдиної функції, виконання якої не є безперервним. Функції-генератори пишуться за допомогою синтаксису {{jsxref("Statements/function*","function*")}}. При першому виклику функції-генератори не виконують свій код, замість цього вони повертають ітератор під назвою Generator. Коли значення споживається викликом методу об'єкта Generator <strong>next</strong>, функція-генератор виконується до тих пір, поки не зустріне ключове слово <strong>yield</strong>.</p> - -<p>Функція може викликатись будь-яку бажану кількість раз та кожен раз вертатиме новий об'єкт Generator, однак, кожний об'єкт Generator може перебиратись лише один раз.<br> - <br> - Тепер ми можемо адаптувати наведений вище приклад. Поведінка коду ідентична, але ця реалізація набагато простіша у написанні та читанні.</p> - -<pre class="brush: js">function* makeRangeIterator(start = 0, end = 100, step = 1) { - let iterationCount = 0; - for (let i = start; i < end; i += step) { - iterationCount++; - yield i; - } - return iterationCount; -}</pre> - -<h2 id="Ітерабельні_обєкти">Ітерабельні об'єкти</h2> - -<p>Об'єкт є <strong>ітерабельним</strong>, якщо він визначає свою ітераційну поведінку, наприклад, через які значення проходитиме цикл {{jsxref("Statements/for...of", "for...of")}}. Деякі вбудовані типи, такі як {{jsxref("Array")}} або {{jsxref("Map")}}, мають визначену за замовчуванням ітераційну поведінку, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають.</p> - -<p>Для того, щоб бути <strong>ітерабельним</strong>, об'єкт повинен реалізувати метод <strong>@@iterator</strong>, тобто, цей об'єкт (або один з об'єктів у його <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ланцюжку прототипів</a>) повинен мати властивість з ключем {{jsxref("Symbol.iterator")}}.<br> - <br> - Може бути можливо перебрати ітерабельний об'єкт більше одного разу, або лише один раз. Який варіант обирати, вирішує програміст. Ітерабельні об'єкти, які можна перебрати лише один раз (наприклад, об'єкти Generator) традиційно повертають <strong>this</strong> зі свого методу <strong>@@iterator</strong>, тоді як ті, які можна перебирати багаторазово, повинні повертати новий ітератор на кожний виклик <strong>@@iterator</strong>.</p> - -<pre class="brush: js">function* makeIterator() { - yield 1; - yield 2; -} - -const it = makeIterator(); - -for(const itItem of it) { - console.log(itItem); -} - -console.log(it[Symbol.iterator]() === it) // true; - -// Це приклад показує, що генератор(ітератор) є ітерабельним об'єктом, метод якого @@iterator повертає сам об'єкт (it), -// і з цієї причини цей об'єкт (it) можна перебирати лише один раз - - -// Якщо ми змінимо метод @@iterator об'єкта "it" на функцію/генератор, що вертає новий ітератор/генератор, цей об'єкт (it) -// можна буде перебирати багато разів - -it[Symbol.iterator] = function* () { - yield 2; - yield 1; -}; -</pre> - -<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3> - -<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p> - -<pre class="brush: js">var myIterable = { - *[Symbol.iterator]() { - yield 1; - yield 2; - yield 3; - } -} - -for (let value of myIterable) { - console.log(value); -} -// 1 -// 2 -// 3 - -або - -[...myIterable]; // [1, 2, 3] -</pre> - -<h3 id="Вбудовані_ітерабельні_обєкти">Вбудовані ітерабельні об'єкти</h3> - -<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} усі є вбудованими ітерабельними об'єктами, тому що всі їхні прототипи мають метод {{jsxref("Symbol.iterator")}}.</p> - -<h3 id="Синтаксис_що_очікує_на_ітерабельний_обєкт">Синтаксис, що очікує на ітерабельний об'єкт</h3> - -<p>Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли {{jsxref("Statements/for...of","for-of")}}, {{jsxref("Operators/yield*","yield*")}}.</p> - -<pre class="brush: js">for (let value of ['а', 'б', 'в']) { - console.log(value); -} -// "а" -// "б" -// "в" - -[...'абв']; // ["а", "б", "в"] - -function* gen() { - yield* ['а', 'б', 'в']; -} - -gen().next(); // { value: "а", done: false } - -[a, b, c] = new Set(['а', 'б', 'в']); -a; // "а" - -</pre> - -<h2 id="Просунуті_генератори">Просунуті генератори</h2> - -<p>Генератори обчислюють значення, які видають, на вимогу, це дозволяє їм ефективно відображати послідовності, затратні для обчислення, чи навіть нескінченні послідовності, як було продемонстровано вище.</p> - -<p>Метод {{jsxref("Global_Objects/Generator/next","next()")}} також приймає значення, які можуть використовуватись для модифікації внутрішнього стану генератора. Значення, передане у метод <code>next()</code> буде отримане оператором <code>yield</code>. Зауважте, що значення, передане у перший метод <code>next()</code>, завжди ігнорується.</p> - -<p>Ось генератор Фібоначчі, який використовує <code>next(x)</code>, щоб перезапустити послідовність:</p> - -<pre class="brush: js">function* fibonacci() { - var fn1 = 0; - var fn2 = 1; - while (true) { - var current = fn1; - fn1 = fn2; - fn2 = current + fn1; - var reset = yield current; - if (reset) { - fn1 = 0; - fn2 = 1; - } - } -} - -var sequence = fibonacci(); -console.log(sequence.next().value); // 0 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 2 -console.log(sequence.next().value); // 3 -console.log(sequence.next().value); // 5 -console.log(sequence.next().value); // 8 -console.log(sequence.next(true).value); // 0 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 2</pre> - -<p>Ви можете змусити генератор викинути виняток, викликавши його метод {{jsxref("Global_Objects/Generator/throw","throw()")}} та передавши значення винятку, яке він має викинути. Цей виняток буде викинутий з поточного призупиненого контексту генератора, так, якби поточний оператор зупинки <code>yield</code> був оператором <code>throw <em>значення</em></code>.</p> - -<p>Якщо виняток не перехоплений всередині генератора, він поширюватиметься до виклику <code>throw()</code>, і наступні виклики методу <code>next()</code> отримають властивість <code>done</code>, що дорівнює <code>true</code>.</p> - -<p>Генератори мають метод {{jsxref("Global_Objects/Generator/return","return(value)")}}, який повертає надане значення та завершує сам генератор.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/uk/web/javascript/guide/loops_and_iteration/index.html b/files/uk/web/javascript/guide/loops_and_iteration/index.html deleted file mode 100644 index 1b76102c0d..0000000000 --- a/files/uk/web/javascript/guide/loops_and_iteration/index.html +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: Цикли та ітерації -slug: Web/JavaScript/Guide/Loops_and_iteration -tags: - - JavaScript - - Інструкція - - Синтаксис - - Цикл -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> - -<p class="summary">Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава <a href="/en-US/docs/Web/JavaScript/Guide">посібника JavaScript </a> представляє різні ітераційні оператори, доступні в JavaScript.</p> - -<p>Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:</p> - -<pre class="brush: js notranslate">var step; -for (step = 0; step < 5; step++) { - // Іти 5 разів від значення 0 до 4. - console.log('Іти на схід 1 крок'); -} -</pre> - -<p>Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.</p> - -<p>Оператори циклів у JavaScript:</p> - -<ul> - <li>{{anch("for statement")}}</li> - <li>{{anch("do...while statement")}}</li> - <li>{{anch("while statement")}}</li> - <li>{{anch("labeled statement")}}</li> - <li>{{anch("break statement")}}</li> - <li>{{anch("continue statement")}}</li> - <li>{{anch("for...in statement")}}</li> - <li>{{anch("for...of statement")}}</li> -</ul> - -<h2 id="Оператор_for">Оператор <code>for</code></h2> - -<p>Цикл {{jsxref("statements/for","for")}} повторюється, доки певний вираз не стане false. Цикл <code>for</code> у JavaScript подібний до циклу <code>for</code> у мовах Java і C. Має такий вигляд:</p> - -<pre class="syntaxbox notranslate">for ([початковийВираз(<code>initialExpression)</code>]; [умова(<code>condition)</code>]; [приріст(<code>incrementExpression)</code>]) - інструкція(<code>statement)</code> -</pre> - -<p>Коли цикл <code>for</code> виконується, відбувається наступне:</p> - -<ol> - <li>Виконується вираз <code>initialExpression</code>, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.</li> - <li>Оцінюється вираз <code>condition</code>. Якщо вираз приймає значення true, ітерація циклу виконується, якщо false - цикл завершується.</li> - <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Виконується </span></font>statement</code>. Щоб виконати кілька інструкцій, використовуйте (<code>{ ... }</code>), щоб згрупувати їх.</li> - <li>Потім виконується вираз <code>incrementExpression</code>.</li> - <li>Далі все повертається до кроку 2.</li> -</ol> - -<h3 id="Приклад"><strong>Приклад</strong></h3> - -<p>Наступна функція містить вираз <code>for</code>, що рахує цифри вибраних варіантів в прокручуваному списку (елемента {{HTMLElement("select")}} , що дозволяє мультивибір). Вираз <code>for</code> оголошує змінну <code>i</code> і задає їй значення 0. Перевіряється чи <code>i</code> менша чим кількість виборів в елементі <code><select></code> , виконує наступний вираз <code>if</code>та збільшує <code>i</code> на одиницю після кожного кроку цикла.</p> - -<pre class="brush: html notranslate"><form name="selectForm"> - <p> - <label for="musicTypes">Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:</label> - <select id="musicTypes" name="musicTypes" multiple="multiple"> - <option selected="selected">R&B</option> - <option>Jazz</option> - <option>Blues</option> - <option>New Age</option> - <option>Classical</option> - <option>Opera</option> - </select> - </p> - <p><input id="btn" type="button" value="Скільки ви вибрали?" /></p> -</form> - -<script> -function howMany(selectObject) { - var numberSelected = 0; - for (var i = 0; i < selectObject.options.length; i++) { - if (selectObject.options[i].selected) { - numberSelected++; - } - } - return numberSelected; -} - -var btn = document.getElementById('btn'); -btn.addEventListener('click', function() { - alert('Кількість вибраних варіагьів: ' + howMany(document.selectForm.musicTypes)); -}); -</script> - -</pre> - -<h2 id="Оператор_do...while">Оператор <code>do...while</code></h2> - -<p>Оператор {{jsxref("statements/do...while", "do...while")}} повторює дії поки певна умова не прийме значення false. Оператор <code>do...while</code> виглядатиме наступним чином:</p> - -<pre class="syntaxbox notranslate">do - statement -while (condition); -</pre> - -<p><code>statement</code> завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати (<code>{ ... }</code>) щоб згрупувати ці вирази. Якщо <code>condition</code> приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла <code>do...while</code> зупиняються.</p> - -<h3 id="Приклади"><strong>Приклади</strong></h3> - -<p>В наступному прикладі цикл <code>do</code> ітерується принаймні один раз і повторюється доки i менша чим 5.</p> - -<pre class="brush: js notranslate">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5);</pre> - -<h2 id="Оператор_while">Оператор <code>while</code></h2> - -<p>Вираз {{jsxref("statements/while","while")}} виконується доти доки спеціальна умова приймає значення true. Вираз <code>while</code> виглядає наступним чином:</p> - -<pre class="syntaxbox notranslate">while (condition) - statement -</pre> - -<p>Якщо умова стає false, <code>statement</code> перестає виконуватись і відбувається вихід із цикла.</p> - -<p>Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, <code>statement</code> виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу <code>while</code>.</p> - -<p>Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.</p> - -<h3 id="Приклад_1"><strong>Приклад 1</strong></h3> - -<p>Наступний цикл <code>while</code> виконує цикл доти доки <code>n</code> менше трьох:</p> - -<pre class="brush: js notranslate">var n = 0; -var x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> - -<p>З кожною ітерацією, цикл збільшує <code>n,</code> та додає це до значення <code>x</code>. Тому, <code>x</code> і <code>n</code> приймають наступні значення:</p> - -<ul> - <li>Після першого виконання: <code>n</code> = 1 і<code>x</code> = 1</li> - <li>Після другого виконання: <code>n</code> = 2 і <code>x</code> = 3</li> - <li>Після третього виконання: <code>n</code> = 3 і <code>x</code> = 6</li> -</ul> - -<p>Після третьої ітерації умова <code>n < 3</code> більше не <code>true</code>, тому цикл припиняється.</p> - -<h3 id="Приклад_2"><strong>Приклад 2</strong></h3> - -<p>Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі <code>while</code> виконуватиметься постійно тому, що умова ніколи не стане <code>false</code>:</p> - -<pre class="brush: js notranslate">while (true) { - console.log('Hello, world!'); -}</pre> - -<h2 id="Оператор_labeled">Оператор <code>labeled</code></h2> - -<p> {{jsxref("statements/label","label")}} забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати <code>label</code>, щоб позначити цикл, а потім скористатися операторами <code>break</code> або <code>continue,</code> щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.</p> - -<p>Синтаксис оператора виглядає наступним чином:</p> - -<pre class="syntaxbox notranslate">label : - statement -</pre> - -<p>Значення <code><em>label</em></code> може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. <code><em>statement</em></code>, який ви ідентифікуєте може бути будь-яким виразом.</p> - -<h3 id="Приклад_3"><strong>Приклад</strong></h3> - -<p>В цьому прикладі позначка <code>markLoop</code> ідентифікує цикл <code>while</code>.</p> - -<pre class="brush: js notranslate">markLoop: -while (theMark == true) { - doSomething(); -}</pre> - -<h2 id="Оператор_break">Оператор <code>break</code></h2> - -<p>Використовуйте оператор {{jsxref("statements/break","break")}} для виходу з циклу, <code>switch</code>, чи в поєднанні з оператором <code>label</code>.</p> - -<ul> - <li>Коли ви використовуєте <code>break</code> без <code>label</code>, це завершує поточний <code>while</code>, <code>do-while</code>, <code>for</code>, або <code>switch</code> і відразу переходить до наступного оператора.</li> - <li>Коли ви використовуєте <code>break</code> із <code>label</code>, це завершує конкретний вираз позначений за допомогою цього label.</li> -</ul> - -<p>Синтаксис оператора <code>break</code> виглядає наступним чином:</p> - -<pre class="syntaxbox notranslate">break [<em>label</em>]; -</pre> - -<p>Перша форма синтаксису завершує перший батьківський цикл, або оператор <code>switch</code>; Друга форма завершує певний оператор позначений за допомогоюю <code>label</code>.</p> - -<h3 id="Приклад_1_2"><strong>Приклад 1</strong></h3> - -<p>Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням <code>theValue</code>:</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - if (a[i] == theValue) { - break; - } -}</pre> - -<h3 id="Приклад_2_Переривання_позначки"><strong>Приклад 2: </strong>Переривання позначки</h3> - -<pre class="brush: js notranslate">var x = 0; -var z = 0; -labelCancelLoops: while (true) { - console.log('Зовнішні цикли: ' + x); - x += 1; - z = 1; - while (true) { - console.log('Внутрішні цикли: ' + z); - z += 1; - if (z === 10 && x === 10) { - break labelCancelLoops; - } else if (z === 10) { - break; - } - } -} -</pre> - -<h2 id="Оператор_continue">Оператор <code>continue</code></h2> - -<p>Оператор {{jsxref("statements/continue","continue")}} може використовуватись для перезапуску <code>while</code>, <code>do-while</code>, <code>for</code>, чи виразу <code>label</code>.</p> - -<ul> - <li>Коли ви використовуєте оператор <code>continue</code> без label, це завершує дану ітерацію цикла і переходить на наступну. На відміну від оператора <code>break</code>, <code>continue</code> не завершує виконання всього цикла. В циклі <code>while</code>, Воно повертається до умови, у циклі <code>for</code> воно переходить до <code>increment-expression</code>.</li> - <li>Коли ви використовуєте <code>continue</code> з label, це переходить до виразу цикла позначеного за допомогою label.</li> -</ul> - -<p>Синтаксис оператора <code>continue</code> виглядає наступним чином:</p> - -<pre class="syntaxbox notranslate">continue [<em>label</em>]; -</pre> - -<h3 id="Приклад_1_3"><strong>Приклад 1</strong></h3> - -<p>Наступний приклад показує цикл <code>while</code> з оператором <code>continue,</code> що виконується коли значення <code>i</code> дорівнює трьом. Тоді як, <code>n</code> приймає значення 1, 3, 7, 12.</p> - -<pre class="brush: js notranslate">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - continue; - } - n += i; - console.log(n); -} -//1,3,7,12 - - -var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - // continue; - } - n += i; - console.log(n); -} -// 1,3,6,10,15 -</pre> - -<h3 id="Приклад_2_2"><strong>Приклад 2</strong></h3> - -<p>Вираз позначений <code>checkiandj</code> містить вираз позначений <code>checkj</code>. Якщо <code>continue</code> зустрічається програма зупинить ітерацію <code>checkj</code> і почнеться з наступної ітерації. Кожен раз як <code>continue</code> зустрічається, <code>checkj</code> переітеровується поки вираз не поверне <code>false</code>. Коли <code>false</code> повертається, решта виразу <code>checkiandj</code> виконується і<code>checkiandj</code> переітеровується доки умова не поверне <code>false</code>. Коли<code>false</code> повертається програма продовжує вираз слідуючого<code>checkiandj</code>.</p> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Якщо </span></font>continue</code> має label <em><code>checkiandj</code></em>, програма буде продовжуватись зверху вираза<em><code>checkiandj.</code></em></p> - -<pre class="brush: js notranslate">var i = 0; -var j = 10; -checkiandj: - while (i < 4) { - console.log(i); - i += 1; - checkj: - while (j > 4) { - console.log(j); - j -= 1; - if ((j % 2) == 0) { - continue checkj; - } - console.log(j + ' is odd.'); - } - console.log('i = ' + i); - console.log('j = ' + j); - }</pre> - -<h2 id="Оператор_for...in">Оператор <code>for...in</code></h2> - -<p>Оператор {{jsxref("statements/for...in","for...in")}} ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Оператор<code>for...in</code> виглядає наступним чином:</p> - -<pre class="syntaxbox notranslate">for (variable in object) { - statements -} -</pre> - -<h3 id="Приклад_4"><strong>Приклад</strong></h3> - -<p>Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.</p> - -<pre class="brush: js notranslate">function dump_props(obj, obj_name) { - var result = ''; - for (var i in obj) { - result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; - } - result += '<hr>'; - return result; -} -</pre> - -<p>Для об'єкту <code>car</code> з властивостями <code>make</code> і <code>model</code>, <code>result</code> результат буде:</p> - -<pre class="brush: js notranslate">car.make = Ford -car.model = Mustang -</pre> - -<h3 id="Масиви"><strong>Масиви</strong></h3> - -<p>Також це може підходити для ітерування елементів {{jsxref("Array")}}, Оператор <strong>for...in</strong> буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл {{jsxref("statements/for","for")}} з номерними індексами коли ітеруєте масив, так як <strong>for...in</strong> ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.</p> - -<h2 id="Оператор_for...of">Оператор <code>for...of</code></h2> - -<p>Оператор {{jsxref("statements/for...of","for...of")}} створює цикл, що проходиться по <a href="/en-US/docs/Web/JavaScript/Guide/iterable">ітерованому об'єкту</a> (включно з {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, об'єкт {{jsxref("functions/arguments","arguments")}} і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.</p> - -<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) { - <em>statement -</em>}</pre> - -<p>Наступний приклад показує різницю між циклами <code>for...of</code> і {{jsxref("statements/for...in","for...in")}}. У той час як <code>for...in</code> проходиться по іменах властивостей, цикл <code>for...of</code> проходиться по значеннях цих властивостей:</p> - -<pre class="brush:js notranslate">var arr = [3, 5, 7]; -arr.foo = 'hello'; - -for (var i in arr) { - console.log(i); // logs "0", "1", "2", "foo" -} - -for (var i of arr) { - console.log(i); // logs 3, 5, 7 -} -</pre> - -<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> - -<div id="gtx-trans" style="position: absolute; left: 29px; top: 10988px;"> -<div class="gtx-trans-icon"></div> -</div> diff --git a/files/uk/web/javascript/guide/numbers_and_dates/index.html b/files/uk/web/javascript/guide/numbers_and_dates/index.html deleted file mode 100644 index 71b7acd1bc..0000000000 --- a/files/uk/web/javascript/guide/numbers_and_dates/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Числа та дати -slug: Web/JavaScript/Guide/Numbers_and_dates -tags: - - Date - - JavaScript - - Math - - Number - - Дати - - Обчислення - - Посібник - - Числа -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</div> - -<p>У даному розділі представлені концепції, об'єкти та функції, які використовуються, щоб працювати та виконувати розрахунки з числами та датами у JavaScript. Це враховує використання чисел, записаних у різних системах числення, в тому числі десятковій, двійковій та шістнадцятковій, а також використання глобального об'єкта {{jsxref("Math")}} для виконання найрізноманітніших математичних операцій над числами.</p> - -<h2 id="Числа">Числа</h2> - -<p>У JavaScript, числа реалізовані у <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">64-бітному бінарному форматі IEEE 754 з подвійною точністю</a> (тобто, число між ±2<sup>−1022</sup> та ±2<sup>+1023</sup>, або приблизно від ±10<sup>−308</sup> до ±10<sup>+308</sup>, з числовою точністю у 53 біти). Цілі значення до ±2<sup>53 </sup>− 1 можуть бути відображені точно.</p> - -<p>Додатково числовий тип має три символьні значення: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}} та {{jsxref("NaN")}} (not-a-number - не число).</p> - -<p>Нещодавнім доповненням JavaScript є тип {{jsxref("BigInt")}}, який дає можливість оперувати з дуже великими цілими числами. Хоча існують застереження у використанні <code>BigInt</code>; наприклад, ви не можете змішувати та співставляти значення <code>BigInt</code> та {{jsxref("Number")}} в рамках однієї операції, і ви не можете використовувати об'єкт {{jsxref("Math")}} зі значеннями <code>BigInt</code>.</p> - -<p>У статті <a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних в JavaScript</a> числовий тип даних описаний в контексті інших примітивних типів JavaScript.</p> - -<p>Ви можете використовувати чотири типа числових літералів: десяткові, двійкові, вісімкові та шістнадцятковий.</p> - -<h3 id="Десяткові_числа">Десяткові числа</h3> - -<pre class="brush: js notranslate">1234567890 -42 - -// Будьте уважні при використанні нулів на початку числа - -0888 // 888 розбирається як десяткове число -0777 // розбирається як вісімкове число у нестрогому режимі (десяткове число 511)</pre> - -<p>Зверніть увагу, що десятковий літерал може починатися з нуля (<code>0</code>) за яким розташована інша десяткова цифра, але, якщо кожна цифра після <code>0</code> менша за 8, то число розбирається як вісімкове.</p> - -<h3 id="Двійкові_числа">Двійкові числа</h3> - -<p>Синтаксис двійковичх чисел використовує нуль попереду, за яким розташована латинська буква "B" (<code>0b</code> або <code>0B</code>). Якщо цифри після <code>0b</code> не є 0 або 1, викидається наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Missing binary digits after 0b".</p> - -<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 -var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 -var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> - -<h3 id="Вісімкові_числа">Вісімкові числа</h3> - -<p>Синтаксис вісімкових чисел теж використовує нуль попереду. Якщо числа після <code>0</code> не входять у діапазон від 0 до 7, то число буде інтерпретоване як десяткове.</p> - -<pre class="brush: js notranslate">var n = 0755; // 493 -var m = 0644; // 420</pre> - -<p>Строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується всіма переглядачами додаванням нуля попереду вісімкового числа: <code>0644 === 420</code>, а <code>"\045" === "%"</code>. У ECMAScript 2015 вісімкові значення підтримуються, якщо вони мають префікс <code>0o</code>, наприклад: </p> - -<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8</pre> - -<h3 id="Шістнадцяткові_числа">Шістнадцяткові числа</h3> - -<p>Синтаксис шістнадцяткових чисел використовує нуль попереду, за яким розташована латинська літера "X" (<code>0x</code> або <code>0X</code>). Якщо числа після 0x не входять у діапазон (0123456789ABCDEF), то буде викинутий наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Identifier starts immediately after numeric literal".</p> - -<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 -0x123456789ABCDEF // 81985529216486900 -0XA // 10</pre> - -<h3 id="Експоненціальний_запис">Експоненціальний запис</h3> - -<pre class="brush: js notranslate">1E3 // 1000 -2e6 // 2000000 -0.1e2 // 10</pre> - -<h2 id="Обєкт_Number">Об'єкт <code>Number</code></h2> - -<p>Вбудований об'єкт {{jsxref("Число", "Number")}} має властивості для числових констант, такі як масимальне числове значення, не-число (not-a-number) та нескінченність. Ви не можете змінювати значення цих властивостей і використовуєте їх наступним чином:</p> - -<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE; -var smallestNum = Number.MIN_VALUE; -var infiniteNum = Number.POSITIVE_INFINITY; -var negInfiniteNum = Number.NEGATIVE_INFINITY; -var notANum = Number.NaN;</pre> - -<p>Ви завжди посилаєтесь на властивість попередньо визначенного об'єкта <code>Number</code>, як це показано вище, а не на властивість об'єкта <code>Number</code>, створеного вами.</p> - -<p>Наступна таблиця підсумовує властивості об'єкта <code>Number</code>.</p> - -<table class="standard-table"> - <caption>Властивості <code>Number</code></caption> - <thead> - <tr> - <th scope="col"><strong>Властивість</strong></th> - <th scope="col"><strong>Опис</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}</td> - <td>Найбільше число, доступне для відображення (<code>±1.7976931348623157e+308</code>)</td> - </tr> - <tr> - <td>{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}</td> - <td> - <p>Найменше число, доступне для відображення (<code>±5e-324</code>)</p> - </td> - </tr> - <tr> - <td>{{jsxref("Число.NaN", "Number.NaN")}}</td> - <td>Спеціальне значення "не-число" (not-a-number)</td> - </tr> - <tr> - <td>{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}</td> - <td>Спеціальне значення від'ємна нескінченність; повертається при переповненні</td> - </tr> - <tr> - <td>{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}</td> - <td>Спеціальне значення додатна нескінченність; повертається при переповненні</td> - </tr> - <tr> - <td>{{jsxref("Число.EPSILON", "Number.EPSILON")}}</td> - <td>Різниця між <code>1</code> та найменшим числом, більшим за <code>1</code>, що може бути представлене об'єктом {{jsxref("Число", "Number")}} (<code>2.220446049250313e-16</code>)</td> - </tr> - <tr> - <td>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</td> - <td>Мінімальне ціле безпечне число у JavaScript (−2<sup>53</sup> + 1 або <code>−9007199254740991</code>)</td> - </tr> - <tr> - <td>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</td> - <td>Максимальне ціле безпечне число у JavaScript (+2<sup>53</sup> − 1 або <code>+9007199254740991</code>)</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Методи <code>Number</code></caption> - <thead> - <tr> - <th>Метод</th> - <th>Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}</td> - <td>Розбирає рядковий аргумент та повертає число з плаваючою крапкою, яке вдалося розпізнати.<br> - Аналог глобальної функції {{jsxref("parseFloat", "parseFloat()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Число.parseInt()", "Number.parseInt()")}}</td> - <td>Розбирає рядковий аргумент та поверає ціле число в заданій системі числення.<br> - Аналог глобальної функції {{jsxref("parseInt", "parseInt()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Число.isFinite()", "Number.isFinite()")}}</td> - <td>Визначає, чи є передане значення скінченним числом.</td> - </tr> - <tr> - <td>{{jsxref("Число.isInteger()", "Number.isInteger()")}}</td> - <td>Визначає, чи є передане значення цілим числом.</td> - </tr> - <tr> - <td>{{jsxref("Число.isNaN()", "Number.isNaN()")}}</td> - <td>Визначає, чи є передане значення {{jsxref("Global_Objects/NaN", "NaN")}}. Більш надійніша версія оригінальної глобальної функції {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</td> - <td>Визначає, чи є передане значення безпечним цілим числом.</td> - </tr> - </tbody> -</table> - -<p>Прототип <code>Number</code> надає методи для отримання інформації з об'єктів <code>Number</code> різноманітних форматів. Наступна таблиця наводить методи <code>Number.prototype</code>.</p> - -<table class="standard-table"> - <caption>Методи <code>Number.prototype</code></caption> - <thead> - <tr> - <th scope="col">Методи</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Число.toExponential", "toExponential()")}}</td> - <td>Повертає рядок, що експоненціальний запис числа.</td> - </tr> - <tr> - <td>{{jsxref("Число.toFixed", "toFixed()")}}</td> - <td>Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.</td> - </tr> - <tr> - <td>{{jsxref("Число.toPrecision", "toPrecision()")}}</td> - <td>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою.</td> - </tr> - </tbody> -</table> - -<h2 id="Обєкт_Math">Об'єкт <code>Math</code></h2> - -<p>Вбудований об'єкт {{jsxref("Math")}} має властивості та методи для математичних констант та функцій. Наприклад, властивість <code>PI</code> об'єкту <code>Math</code> має значення пі (3.141...), яке використовується у застосунку так:</p> - -<pre class="brush: js notranslate">Math.PI</pre> - -<p>Аналогічно, стандартні математичні функції є методами об'єкта <code>Math</code>. Сюди входять тригонометричні, логарифмічні, експоненціальні та інші функції. Наприклад, якби вам знадобилась тригонометрична функція сінус, ви б написали</p> - -<pre class="brush: js notranslate">Math.sin(1.56)</pre> - -<p>Зверніть увагу, що всі тригонометричні методи об'єкта <code>Math</code> в якості аргументів приймають величини в радіанах.</p> - -<p>В даній таблиці наведені методи об'єкта <code>Math</code>.</p> - -<table class="standard-table"> - <caption>Методи <code>Math</code></caption> - <thead> - <tr> - <th scope="col">Методи</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Math.abs", "abs()")}}</td> - <td>Абсолютне значення</td> - </tr> - <tr> - <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> - <td>Стандартні тригонометричні функції; з аргументом в радіанах</td> - </tr> - <tr> - <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> - <td>Обернені тригонометричні функції; повертають значення в радіанах.</td> - </tr> - <tr> - <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> - <td>Гіперболічні функції; аргумент - гіперболічний кут.</td> - </tr> - <tr> - <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> - <td>Зворотні, гіперболічні функцій; повертають гіперболічний кут.</td> - </tr> - <tr> - <td> - <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p> - </td> - <td>Експоненційні та логарифмічні фукнції.</td> - </tr> - <tr> - <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> - <td>Повертає найбільне/найменше ціле, яке менше/більше або дорівнює аргументу.</td> - </tr> - <tr> - <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> - <td>Повертає мінімальне або максимальне (відповідно) значення зі списку розділених комою чисел, переданих як аргумент.</td> - </tr> - <tr> - <td>{{jsxref("Math.random", "random()")}}</td> - <td>Повертає випадкове число в інтервалі між 0 та 1.</td> - </tr> - <tr> - <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> - <td>Фукнції округлення та обрізання.</td> - </tr> - <tr> - <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> - <td> - <p>Квадратний корінь, кубічний корінь, корінь квадратний з суми квадратів аргументів.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Math.sign", "sign()")}}</td> - <td>Знак числа, що вказує, чи є число додатним, від'ємним, чи нулем.</td> - </tr> - <tr> - <td>{{jsxref("Math.clz32", "clz32()")}},<br> - {{jsxref("Math.imul", "imul()")}}</td> - <td>Кількість перших нульових бітів у 32-бітному двійковому представлені.<br> - Результат C-подібного 32-бітного множення двох аргументів.</td> - </tr> - </tbody> -</table> - -<p>На відміну від багатьох інших об'єктів, вам не потрібно створювати екземпляри об'єкта <code>Math</code>. Завжди слід використоввати вбудований глобальний об'єкт <code>Math</code> безпосередньо.</p> - -<h2 id="Обєкт_Date">Об'єкт <code>Date</code></h2> - -<p>JavaScript не має окремого типу даних для дат. Однак, ви можете скористатись об'єктом {{jsxref("Date")}} та його методами для роботи з датою та часом у вашому проекті. Об'єкт <code>Date</code> має величезну кількість методів для встановлення, отримання та маніпулювання датами, але не має жодних властивостей.</p> - -<p>JavaScript оперує датами подібно до Java. Ці дві мови програмування мають багато подібних методів та зберігають дату як кількість мілісекунд, що минули з 00:00:00 1 січня 1970 року, в той час, як часова мітка Unix позначає кількість секунд, що минули з 00:00:00 1 січня 1970 року.</p> - -<p>Інтервал значень, які може приймати об'єкт <code>Date</code>, знаходиться від -100,000,000 до 100,000,000 днів відносно 1 січня 1970 року за UTC.</p> - -<p>Щоб створити об'єкт <code>Date</code>:</p> - -<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);</pre> - -<p>де <code>dateObjectName</code> - це ім'я створеного об'єкта <code>Date</code>; це може бути як новий об'єкт, так і властивість вже існуючого об'єкта.</p> - -<p>Виклик <code>Date</code> без оператора <code>new</code> повертає теперішню дату та час у вигляді рядка.</p> - -<p>Параметри (<code>parameters</code>) у наведеному записі можуть бути одним з наступних значень:</p> - -<ul> - <li>Порожнє значення: створюється сьогоднішня дата та час. Наприклад, <code>today = new Date();</code>.</li> - <li>Рядок, що представляє дату в наступній формі: "Місяць день, рік години:хвилини:секунди." Наприклад, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Якщо не вказані години, хвилини чи секунди, значення замінюються нулями.</li> - <li>Набір цілочисельних значень для року, місяця та дня. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> - <li>Набір цілочисельних значень для року, місяця, дня, годин, хвилин та секунд. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> -</ul> - -<h3 id="Методи_обєкта_Date">Методи об'єкта <code>Date</code></h3> - -<p>Методи об'єкта <code>Date</code> для роботи з датами та часом підпадають під такі категорії:</p> - -<ul> - <li>методи "set", для встановлення дати та часу в об'єктах <code>Date</code>.</li> - <li>методи "get", для отримання дати та часу з об'єктів <code>Date</code>.</li> - <li>методи "to", для отримання рядкових значень з об'єктів <code>Date</code>. </li> - <li>методи розбору та UTC, для розбору рядків <code>Date</code>.</li> -</ul> - -<p>За допомогою методів "get" та "set" можна встановлювати та отримувати значення секунд, хвилин, годин, днів місяця, днів тижня, місяць та рік окремо. Зверніть увагу на метод <code>getDay</code>, який повертає день тижня, але не існує відповідного методу <code>setDay</code>, оскільки день тижня визначається автоматично. Всі ці методи використовують цілі числа для представлення відповідних даних наступним чином:</p> - -<ul> - <li>Секунди та хвилини: від 0 до 59</li> - <li>Години: від 0 до 23</li> - <li>День: від 0 (неділя) до 6 (субота)</li> - <li>Дата: від 1 до 31 (день місяця)</li> - <li>Місяць: від 0 (січень) до 11 (грудень)</li> - <li>Рік: роки з 1900</li> -</ul> - -<p>Припустимо, ви визначаєте наступну дату:</p> - -<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995');</pre> - -<p>Тоді <code>Xmas95.getMonth()</code> повертає 11, а <code>Xmas95.getFullYear()</code> повертає 1995.</p> - -<p>Методи <code>getTime</code> та <code>setTime</code> зручні для порівняння дат. Метод <code>getTime</code> повертає кількість мілесекунд від 00:00:00, 1 січня 1970 року.</p> - -<p>Наприклад, наступний код показує, скільки днів залишилось у цьому році:</p> - -<pre class="brush: js notranslate">var today = new Date(); -var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Встановлюємо день та місяць -endYear.setFullYear(today.getFullYear()); // Встановлюємо цей рік -var msPerDay = 24 * 60 * 60 * 1000; // Кількість мілісекунд в одному дні -var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; -var daysLeft = Math.round(daysLeft); //Повертає кількість днів, які залишилися в цьому році</pre> - -<p>Цей приклад створює об'єкт <code>Date</code> на ім'я <code>today</code>, який містить в собі сьогоднішню дату. Далі він створює об'єкт <code>Date</code> на ім'я <code>endYear</code>, якому присвоюється поточний рік. Потім, використовуючи кількість мілісекунд в одному дні, вираховує кількість днів між <code>today</code> та <code>endYear</code>, використовуючи <code>getTime</code> та округливши результат до цілого значення кількості днів.</p> - -<p>Метод <code>parse</code> корисний для присвоєння рядкових значень існуючим об'єктам <code>Date</code>. Наприклад, наступний код використовує <code>parse</code> та <code>setTime</code> для присвоєння дати об'єкту <code>IPOdate</code>:</p> - -<pre class="brush: js notranslate">var IPOdate = new Date(); -IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre> - -<h3 id="Приклад">Приклад</h3> - -<p>У наступному прикладі, функція <code>JSClock()</code> повертає час у форматі цифрового годинника.</p> - -<pre class="brush: js notranslate">function JSClock() { - var time = new Date(); - var hour = time.getHours(); - var minute = time.getMinutes(); - var second = time.getSeconds(); - var temp = '' + ((hour > 12) ? hour - 12 : hour); - if (hour == 0) - temp = '12'; - temp += ((minute < 10) ? ':0' : ':') + minute; - temp += ((second < 10) ? ':0' : ':') + second; - temp += (hour >= 12) ? ' P.M.' : ' A.M.'; - return temp; -}</pre> - -<p>Функція <code>JSClock</code> спочатку створює новий об'єкт <code>Date</code>, який називається <code>time</code>; оскільки жодних аргументів не надано, час створюється на основі поточної дати та часу. Далі викликами методів <code>getHours</code>, <code>getMinutes</code> та <code>getSeconds</code> присвоюються значення поточної години, хвилини та секунди змінним <code>hour</code>, <code>minute</code> та <code>second</code>.</p> - -<p>Наступні чотири інструкції створюють рядкове значення на основі значення часу. Перша інструкція створює змінну <code>temp</code>, присвоюючи їй значення за допомогою умовного виразу: якщо <code>hour</code> більше за 12, то (<code>hour - 12</code>), інакше просто <code>hour</code>, у випадку ж коли <code>hour</code> дорівнює 0, він набуває значення 12.</p> - -<p>Наступна інструкція додає значення <code>minute</code> до змінної <code>temp</code>. Якщо значення <code>minute</code> менше за 10, умовний вираз додає рядок з нулем попереду; інакше додається рядок з двокрапкою для розмежування. Далі аналогічним чином інструкція додає до <code>temp</code> секунди.</p> - -<p>Зрештою, умовний вираз додає "P.M." до <code>temp</code>, якщо <code>hour</code> дорівнює або більший за 12; інакше, додається "A.M.".</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/uk/web/javascript/guide/regular_expressions/index.html b/files/uk/web/javascript/guide/regular_expressions/index.html deleted file mode 100644 index e41b342ac7..0000000000 --- a/files/uk/web/javascript/guide/regular_expressions/index.html +++ /dev/null @@ -1,635 +0,0 @@ ---- -title: Регулярні Вирази -slug: Web/JavaScript/Guide/Regular_Expressions -translation_of: Web/JavaScript/Guide/Regular_Expressions ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> - -<p class="summary"><strong>Регулярні вирази</strong> це шаблони, що використовуються для пошуку збігу,співпадіння в тексті чи строках. В JavaScript регулярні вирази також є обʼєктами. Ці шаблони використовуются для пошуку збігу у тексті. Пропоную розібратись з регулярними виразами JavaScript детальніше.</p> - -<h2 id="Створення_регулярних_виразів">Створення регулярних виразів</h2> - -<p>Ви можете створювати регулярні вирази двома способами:</p> - -<p>Використовуючи літерал регулярного виразу, який складається з шаблону між символами "/" слеш:</p> - -<pre class="brush: js notranslate">var re = /ab+c/; -</pre> - -<p>Цей спосіб підійде для статичних, простих виразів, використовуйте його для покращення продуктивності.</p> - -<p>Або через створення обʼєкта {{jsxref("RegExp")}}:</p> - -<pre class="brush: js notranslate">var re = new RegExp("ab+c"); -</pre> - -<p>В такому випадку створюєтся об'єкт з методами {{jsxref("RegExp.exec", "exec")}} та {{jsxref("RegExp.test", "test")}} класу {{jsxref("RegExp")}}, та методами з {{jsxref("String")}} классу, а саме {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, та {{jsxref("String.split", "split")}}. </p> - -<p>Використовуйте цей спосіб у випадках, коли вам відомо, що шаблон регулярного виразу буде змінюватись. Наприклад для очікування дій користувача з подальшим виконанням якоїсь функції тощо, або для побудови URL маршутів.</p> - -<h2 id="Створення_шаблону_регулярного_виразу">Створення шаблону регулярного виразу</h2> - -<p>Шаблон регулярного виразу складається зі звичайних символів, наприклад <code>/abc/</code>, або комбінації звичайних та спеціальних символів – <code>/ab*c/</code> або <code>/Chapter (\d+)\.\d*/</code>. Останій приклад містить дужки, які використовуються як запамʼятовуючий пристрiй. Збіг з цією частиною шаблону запамʼятовується для подальшого використання, більш докладно про це в розділі {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p> - -<h3 id="Використання_простих_шаблонів">Використання простих шаблонів</h3> - -<p>Прості шаблони складаються з символів, для яких потрібно знайти прямий збіг. Наприклад, шаблон <code>/abc/</code> збігається з комбінацією символів в рядку тільки у випадку, коли символи 'abc' опиняються поруч саме в такому порядку. Збіг буде успішним у рядках типу "Hi, do you know your abc's?" та "The latest airplane designs evolved from sl<strong>abc</strong>raft." В обох випадках шаблон збігається з підрядком 'abc'. В рядку 'Grab crab' збігу не буде, так як він містить підрядок 'abc', що не збігається точно з послідовністю 'abc'.</p> - -<h3 id="Використання_спеціальних_символів">Використання спеціальних символів</h3> - -<p>Коли пошук збігу вимагає чогось більшого ніж прямий збіг, наприклад пошук одного чи більше символу 'b', або пошуку пробілів, шаблон включає спеціальні символи. Так, шаблон <code>/ab*c/</code> збігається з будь-якою символьною комбінацією, де за символом 'a' може бути багато повторів символу 'b' (<code>*</code> значить 0 чи більше випадків) за яким відразу йде символ 'c'. В рядку "cbb<strong>abbbbc</strong>debc," шаблон збігається з підрядком '<strong>abbbbc</strong>'.</p> - -<p>Наступна таблиця містить повний перелік та опис спеціальних символів, які використовуються в регулярних виразах.</p> - -<table class="standard-table"> - <caption>Спеціальні символи, що використовуються в регулярних виразах.</caption> - <thead> - <tr> - <th scope="col">Символ</th> - <th scope="col">Значення</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td> - <td> - <p>Відповідає одному з наступних правил:<br> - <br> - Зворотній слеш означає що наступний символ є спеціальним та не сприймається буквально. Наприклад, '<strong><code>b</code></strong>' без передуючого '\' збігається з літерою '<strong>b</strong>' у нижньому регістрі. Але вираз '<strong><code>\b</code></strong>' не відповідає жодному збігу; він утворює спеціальний символ, що збігається з <a href="#special-word-boundary" title="#special-word-boundary">межею слова</a>.<br> - <br> - Так, шаблон <strong><code>/a*/</code></strong> покладається на спецсимвол '<strong><code>*</code></strong>', щоб знайти збіг з 0 чи більше символів '<strong>a</strong>'. На відміну від цього, щаблон <strong><code>/a\*/</code></strong> усуває сприйняття '<strong><code>*</code></strong>', як спецсимвол, та дозволяє отримати збіг '<strong>a*</strong>'.<br> - <br> - Не забувайте екранувати символ '<strong>\</strong>' подвійним ' '\\' використовуючи його в нотації RegExp("pattern"), так як '<strong>\</strong>' є екрануючим символом в рядках.</p> - </td> - </tr> - <tr> - <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td> - <td>Шукати збіг окрім перед символом переносу рядка чи кінця строки.<br> - <br> - Наприклад, <strong><code>/^A/</code></strong> не має збігу з "an A", але має збіг в рядку "<strong>A</strong>n E".<br> - <br> - Символ '<strong><code>^</code></strong>' має також і інші значення, коли він вказуєтся на початку шаблону регулярного виразу. Ознайомтесь з розділом <a href="#special-negated-character-set" title="#special-negated-character-set">доповнений набір символів</a> для отримання деталей та прикладів.</td> - </tr> - <tr> - <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td> - <td> - <p>Вказує що на забігу має завершитись строка. </p> - - <p>Наприклад, <strong><code>/t$/</code></strong> не збігається з '<strong>t</strong>' в "eater", але має збіг в "ea<strong>t</strong>".</p> - </td> - </tr> - <tr> - <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td> - <td> - <p>Збіг повторюється 0 чи більше разів. Еквівалент <code>{0,}</code>.</p> - - <p>Наприклад, <strong><code>/bo*/</code></strong> збігається з '<strong>boooo</strong>' в "A ghost <strong>boooo</strong>ed" та з '<strong>b</strong>' in "A <strong>b</strong>ird warbled", але не має збігу в "A goat grunted".</p> - </td> - </tr> - <tr> - <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td> - <td> - <p>Відповідає попередньому символу, що повторюється щонайменше 1 чи більше разів. Еквівалент <code>{1,}</code>.</p> - - <p>Наприклад, <strong><code>/a+/</code></strong> збігається з '<strong>a</strong>' в "c<strong>a</strong>ndy" та з усіма '<strong>a</strong>' в "c<strong>aaaaaaa</strong>ndy", але не має збігів у "cndy".</p> - </td> - </tr> - <tr> - <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td> - <td>Пошук збігу 0 чи 1 раз. Еквівалент <code>{0,1}</code>.<br> - <br> - Наприклад, <code>/e?le?/</code> відповідає '<strong>el</strong>' в "ang<strong>el</strong>" та '<strong>le</strong>' в "ang<strong>le</strong>", а також '<strong>l</strong>' в "os<strong>l</strong>o".<br> - <br> - Якщо вказуєтся одразу після специмволів *, +, ?, або {}, робить їх більш суворими (збіг з найменш можливою кількістю символів), на відміну від типових результатів, на відміну від несуворих пошуків (збіг з максимально можливою кількістю символів). Наприклад, застосування <strong><code>/\d+/</code></strong> (пошук повторення десятичної цифри багато разів) до "<strong>123</strong>abc" знайде "<strong>123</strong>". Але застосування <strong><code>/\d+?/</code></strong> зробить його суворим і результом збігу буде перша цифра "<strong>1</strong>".<br> - </td> - </tr> - <tr> - <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td> - <td> - <p>(дрібна крапка) вказує пошук будь-якого одного символу, окрім початку строки.</p> - - <p>Наприклад, <strong><code>/.n/</code></strong> відповідає '<strong>an</strong>' та '<strong>on</strong>' в рядку "nay, <strong>an</strong> apple is <strong>on</strong> the tree", але не знайде збігів у 'nay'.</p> - </td> - </tr> - <tr> - <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td> - <td> - <p>Пошук 'x' і запам'ятати збіг. Ці дужки також називають <em>захоплюючи дужки</em>.<br> - <br> - '<strong><code>(foo)</code></strong>' та '<strong><code>(bar)</code></strong>' в шаблоні <strong><code>/(foo) (bar) \1 \2/</code></strong> збігаються з першими двома словами в рядку "<strong>foo bar</strong> foo bar" та запамʼятовують їх. А <code><strong>\1</strong></code> та <strong><code>\2</code></strong> в шаблоні відповідають двом останім словам. Зауважте, що <code><strong>\1</strong>, <strong>\2</strong>, <strong>\n</strong></code> використовуються в порівняльній частині регулярного виразу. В зміній частині регулярного виразу потрібно використовувати синтакс <code><strong>$1</strong>, <strong>$2</strong>, <strong>$n</strong></code>: <code>'bar foo'.replace( /(...) (...)/, '$2 $1' )</code>.</p> - </td> - </tr> - <tr> - <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td> - <td>Відповідає 'x', але не запамʼятовує збіг. Такий випадок називається <em>незахоплючими дужками</em>, і дозволяє вам визначати під-вирази для роботи з операторами ругулярних виразів. Розглянемо приклад <strong><code>/(?:foo){1,2}/</code></strong>. Якщо б шаблон був <strong><code>/foo{1,2}/</code></strong>, символи <code>{1,2}</code> застосовувались би тільки до останього символу '<strong>o</strong>' в 'fo<strong>o</strong>'. В незахоплюючих дужках <code>{1,2}</code> застосовується до всього слова 'foo'.</td> - </tr> - <tr> - <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td> - <td> - <p>Відповідає 'x' тільки якщо за 'x' йде 'y'. Це називається випередження.</p> - - <p>Наприклад, <code>/Jack(?=Sprat)/</code> збігатиметься з 'Jack' тількя якщо за ним йде 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> збігається з 'Jack' тільки якщо за ним йде 'Sprat' або 'Frost'. Проте, а ні 'Sprat', а ні 'Frost' не є частиною результату збігу.</p> - </td> - </tr> - <tr> - <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td> - <td> - <p>Відповідає 'x' тільки якщо за 'x' не йде 'y'. Це називається відʼємним випередженням.</p> - - <p>Наприклад, <strong><code>/\d+(?!\.)/</code></strong> матиме збіг з числом тільки якщо за ним відсутня десяткова точка. Регулярний вираз <code><strong>/\d+(?!\.)/</strong>.exec("3.<strong>141</strong>")</code> матиме збіг з '<strong>141</strong>', але не з '3.141'.</p> - </td> - </tr> - <tr> - <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td> - <td> - <p>Відповідає 'x' або 'y'.</p> - - <p>Наприклад, <strong><code>/green|red/</code></strong> збігається з '<strong>green</strong>' в "<strong>green</strong> apple" та з '<strong>red</strong>' в "<strong>red</strong> apple."</p> - </td> - </tr> - <tr> - <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td> - <td>Відповідає точній кількості n повторень попереднього виразу. N повино бути додатним цілим числом.<br> - <br> - Наприклад, <code>/a{2}/</code> не матиме збігів для 'a' в "candy," але збігатиметься з усіма <strong>a</strong> в "c<strong>aa</strong>ndy," та двом першим <strong>a</strong> в "c<strong>aa</strong>andy."</td> - </tr> - <tr> - <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td> - <td> - <p>Де <code>n</code> та <code>m</code> – додатні цілі числа та <code>n <= m</code>. Відповідає що найменше <code>n</code> та до <code>m</code> включно повторень передуючого виразу. Якщо <code>m</code> немає, вважається що <code>m = ∞</code>.</p> - - <p>Наприклад, <code>/a{1,3}/</code> не збігається з рядком "cndy", відповідає '<strong>a</strong>' в "c<strong>a</strong>ndy," та першим двом <strong>a</strong> в "c<strong>aa</strong>ndy," а також першим трьом <strong>a</strong> в "c<strong>aaa</strong>aaaandy". Зауважте що під час порівняння "c<strong>aaa</strong>aaaandy", відповідає лише "<strong>aaa</strong>", навіть якщо оригінальний рядок містить довший рядок з <strong>a</strong>.</p> - </td> - </tr> - <tr> - <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td> - <td>Набір символів. Відповідає збігу з будь-яким із символів шаблону, включаючи <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючі послідовності</a>. Спеціальні символи такі як точка (<code>.</code>) та зірочка (<code>*</code>) не є спецсимволами в середині набору символів та не потребують екранування. Ви можете задавати послідовності використовуючи дефіс, як в наступному прикладі.<br> - <br> - Шаблон<code> [a-d]</code>, що представляє теж саме що й <code>[abcd]</code>, збігається з '<strong>b</strong>' в "<strong>b</strong>risket" та з '<strong>c</strong>' в "<strong>c</strong>ity". Шаблони <code><strong>/[a-z.]+/</strong> та</code> <strong><code>/[\w.]+/</code></strong> збігаються зі всім рядком "test.i.ng".</td> - </tr> - <tr> - <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td> - <td> - <p>Відʼємний або компліментарний набір змін. Цей вираз відповідає збігу з будь-чим що не міститься в квадратних дужках. Ви можете зазначити діапазон використовуючи дефіс. Все що працює зі звичайним набором символів спрацює і в цьому випадку.</p> - - <p>Наприклад, <code>[^abc]</code> теж саме що й <code>[^a-c]</code>. Вони відповідають збігу 'r' в "brisket" та 'h' в "chop."</p> - </td> - </tr> - <tr> - <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td> - <td>Відповідає символу backspace (U+0008). Потрібно використовувати квадратні дужки, якщо ви бажаєте отримати збіг з літералом backspace. (Не треба плутати з <code>\b</code>.)</td> - </tr> - <tr> - <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td> - <td> - <p>Відповідає межі слова. Межа слова відповідає позиції де літерному символу не передує або слідує за ним інший літерний символ. Зауважте, що межа слова не включається до збігу. Іншими словами його довжина дорівнює нулю. (Не треба плутати з <code>[\b]</code>.)</p> - - <p>Приклади:<br> - <code>/\bm/</code> відповідає '<strong>m</strong>' в "<strong>m</strong>oon" ;<br> - <code>/oo\b/</code> не збігається з '<strong>oo</strong>' в "m<strong>oo</strong>n", тому що за '<strong>oo</strong>' йде символ '<strong>n</strong>', який є літерним символом;<br> - <code>/oon\b/</code> збігається з '<strong>oon</strong>' в "m<strong>oon</strong>", тому що '<strong>oon</strong>' є кінцем рядка, тож за ним не йде літерний символ;<br> - <code>/\w\b\w/</code> ніколи не буде мати збігу, тому що за літерним символом ніколи не буде йти не-літерний символ разом з літерним символом.</p> - - <div class="note"> - <p><strong>Примітка:</strong> Рушій регулярних виразів JavaScript визначає <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">особливий набір символів</a> що є літерними символами. Будь-який символ не з цього переліка вважається розділовим знаком - межею слова. Цей набір символів є доволі обмеженим: він складається тільки з символів латинської абетки в верхньому та нижньому регістрах, цифр та символу підкресленя. Акцентовані літери, такі як "é" або "ü", несподівано, вважаються розділовими знаками.</p> - </div> - </td> - </tr> - <tr> - <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td> - <td> - <p>Відповідає межі не-слова. Цей літерал відповідає позиції де попередній та наступний символи є символами одного типу: Тож обидва символи повині бути літерними, або не-літерними символами. Початок та кінець рядка вважаються не-літерними символами.</p> - - <p>Наприклад, <code>/\B../</code> відповідає '<strong>oo</strong>' в "n<strong>oo</strong>nday", та <code>/y\B./</code> збігається з 'ye' в "possibly <strong>ye</strong>sterday."</p> - </td> - </tr> - <tr> - <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td> - <td> - <p>Де <em>X</em> є символом в діапазоні від A до Z. Відповідає керуючим символам в рядку.</p> - - <p>Наприклад, <code>/\cM/</code> відповідає control-M (U+000D) в рядку.</p> - </td> - </tr> - <tr> - <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td> - <td> - <p>Відповідає цифровому символу. Еквівалент <code>[0-9]</code>.</p> - - <p>Наприклад, <code>/\d/</code> або <code>/[0-9]/</code> збігатиметься з '<strong>2</strong>' в "B<strong>2</strong> is the suite number."</p> - </td> - </tr> - <tr> - <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td> - <td> - <p>Відповідає не-цифровому символу. Еквівалент <code>[^0-9]</code>.</p> - - <p>Наприклад, <code>/\D/</code> або <code>/[^0-9]/</code> збігатиметься з '<strong>B</strong>' в "<strong>B</strong>2 is the suite number."</p> - </td> - </tr> - <tr> - <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td> - <td>Відповідає символу прогону сторінки (U+000C).</td> - </tr> - <tr> - <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td> - <td>Відповідає символу переводу рядка (U+000A).</td> - </tr> - <tr> - <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td> - <td>Відповідає символу повернення каретки (U+000D).</td> - </tr> - <tr> - <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td> - <td> - <p>Відповідає одиничному пробільному символу, включаючи пробіл, табуляцію, прогін сторінки, перевод рядка. Еквівалент <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Наприклад, <code>/\s\w*/</code> збігається з ' <strong>bar</strong>' в "foo <strong>bar</strong>."</p> - </td> - </tr> - <tr> - <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td> - <td> - <p>Відповідає одиничному непробільному символу. Еквівалент <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Наприклад, <code>/\S\w*/</code> відповідає '<strong>foo</strong>' в "<strong>foo</strong> bar."</p> - </td> - </tr> - <tr> - <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td> - <td>Відповідає табуляції (U+0009).</td> - </tr> - <tr> - <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td> - <td>Відповідає вертикальній табуляції (U+000B).</td> - </tr> - <tr> - <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td> - <td> - <p>Відповідає будь-якому літерно-цифровому символу включаючи символ підкреслювання. Еквівалент <code>[A-Za-z0-9_]</code>.</p> - - <p>Наприклад, <code>/\w/</code> відповідає '<strong>a</strong>' в "<strong>a</strong>pple," '<strong>5</strong>' в "$<strong>5</strong>.28," та '<strong>3</strong>' в "<strong>3</strong>D."</p> - </td> - </tr> - <tr> - <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td> - <td> - <p>Відповідає будь-якому не-літерному символу. Еквівалент <code>[^A-Za-z0-9_]</code>.</p> - - <p>Наприклад, <code>/\W/</code> або <code>/[^A-Za-z0-9_]/</code> відповідає '<strong>%</strong>' в "50<strong>%</strong>."</p> - </td> - </tr> - <tr> - <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td> - <td> - <p>Де <em>n</em> є додатним цілим числом, зворотнє посилання на останій збіг підрядка з <em>n</em>-х відповідних круглих дужок шаблона регулярного виразу (рахуючи від лівої дужки).</p> - - <p>Наприклад, <code>/apple(,)\sorange\1/</code> відповідає '<strong>apple, orange,</strong>' в "<strong>apple, orange,</strong> cherry, peach."</p> - </td> - </tr> - <tr> - <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td> - <td>Відповідає символу NULL (U+0000). Не використовуйте цей символ разом з іншими цифрами, тому що <code>\0<digits></code> є вісімковою <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючою послідовністю</a>.</td> - </tr> - <tr> - <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td> - <td>Відповідає символу з кодом hh (два шістнадцяткові знаки)</td> - </tr> - <tr> - <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td> - <td>Відповідає символу з кодом hhhh (чотири шістнадцяткові знаки).</td> - </tr> - <tr> - <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td> - <td>(тільки разом з прапором <strong>u</strong>) Відповідає символу Юнікод з коом hhhh (шістнадцяткові знаки).</td> - </tr> - </tbody> -</table> - -<p>Екранований ввід користувача буде вважатись літерною послідовністю після застосування регулярного виразу для простої заміни:</p> - -<pre class="brush: js notranslate">function escapeRegExp(string){ - return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& - підстановка результату -}</pre> - -<h3 id="Використання_дужок">Використання дужок</h3> - -<p>Дужки навколо будь-якої частини регулярного виразу означають, що ця частина порівнюванного рядка буде збережена. Після цього, ця частина рядка може бути вкликана для повторного використання, більш докладно у {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p> - -<p>Наприклад, шаблон <code>/Chapter (\d+)\.\d*/</code> показує додатково екрановані та спеціальні символи частини шаблону, яку потрібно запамʼятати. Він відповідає точному збігу слова 'Chapter ' за яким йде один чи більше цифрових символів (<strong><code>\d</code></strong> означає будь-який цифровий символ, а <strong><code>+</code></strong> означає 1 чи більше разів), за якими йде десяткова точка (яка сама по собі є спеціальним символом; додавання слеша <strong>\</strong> перед точкою дозволяє зробити її звичайним символом '<strong>.</strong>'), за якою йде будь-яке число, що повторюється від 0 та більше разів (<strong><code>\d</code></strong> означає числовий символ, <strong><code>*</code></strong><code> </code>означає 0 та більше разів). На додачу, дужки використовуються для того, щоб запамʼятати першу послідовність числових символів.</p> - -<p>Цей шаблон в рядку "Open Chapter 4.3, paragraph 6" знайде числовий символ '4' та запамʼятає його. Шаблон не знайде збігів в "Chapter 3 and 4", тому що рядок не містить точку після '3'.</p> - -<p>Для пошуку відповідності підрядка в дужках без його запамʼятовування. додавайте на початку шаблона в дужках комбінацію <strong><code>?:</code></strong>. Наприклад, <code>(?:\d+)</code> відповідає одному чи білше числовому символу але без їх запамʼятовування.</p> - -<h2 id="Робота_з_регулярними_виразами">Робота з регулярними виразами</h2> - -<p>Регулярні вирази використовуються разом з методами RegExp: test та exec, а також з методами String: mathc, replace, search та split. Ці методи детально описані в <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p> - -<table class="standard-table"> - <caption>Методи, які використовують регулярні вирази</caption> - <thead> - <tr> - <th scope="col">Метод</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("RegExp.exec", "exec")}}</td> - <td>Метод <code>RegExp, який виконує пошук віповідностей у рядку. Він повертає список знайдених відповідностей.</code></td> - </tr> - <tr> - <td>{{jsxref("RegExp.test", "test")}}</td> - <td>Метод <code>RegExp, який перевіряє, чи рядок містить відповідність регулярному виразу. Повертає</code> true або false.</td> - </tr> - <tr> - <td>{{jsxref("String.match", "match")}}</td> - <td>Метод <code>String</code> який виконує пошук відповідностей у рядку. Повертає список знайдених відповідностей, або null за невдачі.</td> - </tr> - <tr> - <td>{{jsxref("String.search", "search")}}</td> - <td>Метод <code>String</code> який перевіряє , чи рядок містить відповідність регулярному виразу. Повертає індекс відповідності або -1 в разі невдачі.</td> - </tr> - <tr> - <td>{{jsxref("String.replace", "replace")}}</td> - <td>Метод <code>String</code> який виконує пошук відповідності у рядку і заміну знайдених підрядків на заданий рядок заміни.</td> - </tr> - <tr> - <td>{{jsxref("String.split", "split")}}</td> - <td>Метод <code>String</code> який застосовує регулярний вираз чи рядок-розділювач для розбиття рядку на список підрядків..</td> - </tr> - </tbody> -</table> - -<p>Коли Вам потрібно дізнатися чи міститься шаблон у рядку, використовуйте методи <code>test</code> або <code>search</code>, для детальнішої інформації використовуйте методи <code>exec</code> чи <code>match</code> (виконуються повільніше). Якщо методи <code>exec</code> або <code>match</code> знаходять відповідність вони повертають список і оновлюють властивості пов'язаного об'єкта регулярного виразу, а також передвизначеного об'єкта регулярного виразу, <code>RegExp</code>. В протилежному випадку, метод <code>exec</code> повертає <code>null</code> (який приводиться до <code>false</code>).</p> - -<p>В наступному прикладі, скрипт використовує метод <code>exec</code> для знаходження віповідності у рядку.</p> - -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; -var myArray = myRe.exec("cdbbdbsbz"); -</pre> - -<p>Якщо у Вас немє потреби мати доступ до властивостей регулярного виразу, альтернативний шлях створення <code>myArray</code> - у такому скрипті:</p> - -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); -</pre> - -<p>Ще один варіант цього скрипта, на випадок, якщо Вам потрібно сконструювати регулярний вираз з рядка:</p> - -<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g"); -var myArray = myRe.exec("cdbbdbsbz"); -</pre> - -<p>Скрипти в цих прикладах знаходять відповідність, повертають список з результатами пошуку а також оновлюють властивості, показані в наступній таблиці.</p> - -<table class="standard-table"> - <caption>Результати виконання регулярного виразу</caption> - <thead> - <tr> - <th scope="col">Об'єкт</th> - <th scope="col">Властивість чи індекс</th> - <th scope="col">Опис</th> - <th scope="col">У цьому прикладі</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="4"><code>myArray</code></td> - <td></td> - <td>Відповідний рядок та всі запам'ятовані підрядки.</td> - <td><code>["dbbd", "bb"]</code></td> - </tr> - <tr> - <td><code>index</code></td> - <td>Індекс відповідності на основі 0 у вхідному рядку.</td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>input</code></td> - <td>Початковий рядок.</td> - <td><code>"cdbbdbsbz"</code></td> - </tr> - <tr> - <td><code>[0]</code></td> - <td>Останні відповідні символи.</td> - <td><code>"dbbd"</code></td> - </tr> - <tr> - <td rowspan="2"><code>myRe</code></td> - <td><code>lastIndex</code></td> - <td>Індекс з якого починати наступне порівняння. (Ця властивість встановлюється лише якщо регулярний вираз використовує g опцію, описану в {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td> - <td><code>5</code></td> - </tr> - <tr> - <td><code>source</code></td> - <td>Текст шаблону. Оновлений під час створення регулярного виразу, а не викионання.</td> - <td><code>"d(b+)d"</code></td> - </tr> - </tbody> -</table> - -<p>Як показано у другій формі цього прикладу, ви можете використовувати регулярні вирази створені через ініціалізатор об'єкта без привласнення їх до змінної. Однак якщо ви робите це, то кожен випадок це регулярний вирах. По цій причині, якщо ви використовуєте цю фору без привласнення до змінної, то у ви не зможете використовувати властивості регулярних виразів. Для прикладу, представте, що у вас є наступний скрипт:</p> - -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; -var myArray = myRe.exec("cdbbdbsbz"); -console.log("The value of lastIndex is " + myRe.lastIndex); - -// "Значення lastIndex є 5" -</pre> - -<p>Однак, якщо ви маєте цей скрипт:</p> - -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); -console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); - -// "Значення lastIndex є 0" -</pre> - -<p>Випадки <code>/d(b+)d/g</code> у цих двох виразах є різними об'єктами регулярних виразів, отже мають різні значення для їх <code>lastIndex</code> властивості. Якщо вам треба мати доступ до властивостей регулярного виразу, який був створений через ініціалізатор об'єкту, то спочатку вам треба привласнити його до змінної.</p> - -<h3 id="Використання_збігів_підрядків_у_дужках"><a id="Using_parenthesized_substring_matches" name="Using_parenthesized_substring_matches">Використання збігів підрядків у дужках</a></h3> - -<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> - -<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p> - -<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p> - -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; -var str = "John Smith"; -var newstr = str.replace(re, "$2, $1"); -console.log(newstr); -</pre> - -<p>This prints "Smith, John".</p> - -<h3 id="Advanced_searching_with_flags">Advanced searching with flags</h3> - -<p>Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p> - -<table class="standard-table"> - <caption>Regular expression flags</caption> - <thead> - <tr> - <th scope="col">Flag</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>g</code></td> - <td>Global search.</td> - </tr> - <tr> - <td>i</td> - <td>Case-insensitive search.</td> - </tr> - <tr> - <td>m</td> - <td>Multi-line search.</td> - </tr> - <tr> - <td>y</td> - <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td> - </tr> - </tbody> -</table> - -<p>To include a flag with the regular expression, use this syntax:</p> - -<pre class="brush: js notranslate">var re = /pattern/flags; -</pre> - -<p>or</p> - -<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags"); -</pre> - -<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p> - -<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p> - -<pre class="brush: js notranslate">var re = /\w+\s/g; -var str = "fee fi fo fum"; -var myArray = str.match(re); -console.log(myArray); -</pre> - -<p>This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:</p> - -<pre class="brush: js notranslate">var re = /\w+\s/g; -</pre> - -<p>with:</p> - -<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g"); -</pre> - -<p>and get the same result.</p> - -<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p> - -<h2 id="Examples">Examples</h2> - -<p>The following examples show some uses of regular expressions.</p> - -<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3> - -<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p> - -<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs, -// and may have multiple spaces between first and last names. -var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; - -var output = ["---------- Original String\n", names + "\n"]; - -// Prepare two regular expression patterns and array storage. -// Split the string into array elements. - -// pattern: possible white space then semicolon then possible white space -var pattern = /\s*;\s*/; - -// Break the string into pieces separated by the pattern above and -// store the pieces in an array called nameList -var nameList = names.split(pattern); - -// new pattern: one or more characters then spaces then characters. -// Use parentheses to "memorize" portions of the pattern. -// The memorized portions are referred to later. -pattern = /(\w+)\s+(\w+)/; - -// New array for holding names being processed. -var bySurnameList = []; - -// Display the name array and populate the new array -// with comma-separated names, last first. -// -// The replace method removes anything matching the pattern -// and replaces it with the memorized string—second memorized portion -// followed by comma space followed by first memorized portion. -// -// The variables $1 and $2 refer to the portions -// memorized while matching the pattern. - -output.push("---------- After Split by Regular Expression"); - -var i, len; -for (i = 0, len = nameList.length; i < len; i++){ - output.push(nameList[i]); - bySurnameList[i] = nameList[i].replace(pattern, "$2, $1"); -} - -// Display the new array. -output.push("---------- Names Reversed"); -for (i = 0, len = bySurnameList.length; i < len; i++){ - output.push(bySurnameList[i]); -} - -// Sort by last name, then display the sorted array. -bySurnameList.sort(); -output.push("---------- Sorted"); -for (i = 0, len = bySurnameList.length; i < len; i++){ - output.push(bySurnameList[i]); -} - -output.push("---------- End"); - -console.log(output.join("\n")); -</pre> - -<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3> - -<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p> - -<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p> - -<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <script type="text/javascript"> - var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; - function testInfo(phoneInput){ - var OK = re.exec(phoneInput.value); - if (!OK) - window.alert(phoneInput.value + " isn't a phone number with area code!"); - else - window.alert("Thanks, your phone number is " + OK[0]); - } - </script> - </head> - <body> - <p>Enter your phone number (with area code) and then click "Check". - <br>The expected format is like ###-###-####.</p> - <form action="#"> - <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button> - </form> - </body> -</html> -</pre> - -<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/uk/web/javascript/guide/using_promises/index.html b/files/uk/web/javascript/guide/using_promises/index.html deleted file mode 100644 index d3b986e51a..0000000000 --- a/files/uk/web/javascript/guide/using_promises/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: Використання промісів -slug: Web/JavaScript/Guide/Using_promises -tags: - - JavaScript - - Promise - - Посібник - - Проміс - - асинхронний -translation_of: Web/JavaScript/Guide/Using_promises ---- -<div>{{jsSidebar("JavaScript Guide")}}</div> - -<div>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> - -<p>{{jsxref("Promise")}} (з англ. - "обіцянка", далі - "проміс") - це об'єкт, що відображає кінцеве завершення або невдачу асинхронної операції. Оскільки більшість людей є споживачами раніше створенних промісів, цей посібник спочатку пояснить споживання повернених промісів, а далі пояснить, як їх створювати.</p> - -<p>Проміс, по суті, є поверненим об'єктом, до якого ви прикріплюєте функції зворотного виклику, замість того, щоб передавати їх у функцію.</p> - -<p>Уявіть собі функцію <code>createAudioFileAsync()</code>, яка асинхронно генерує звуковий файл, маючи конфігураційний запис та дві функції зворотного виклику, одна викликається, якщо аудіофайл був успішно створений, а інша викликається, якщо виникає помилка.</p> - -<p>Ось код, який використовує <code>createAudioFileAsync()</code>:</p> - -<pre class="brush: js line-numbers language-js notranslate">function successCallback(result) { - console.log("Аудіофайл створений за адресою: " + result); -} - -function failureCallback(error) { - console.log("Під час створення аудіофайлу виникла помилка: " + error); -} - -createAudioFileAsync(audioSettings, successCallback, failureCallback); -</pre> - -<p>Замість цього, сучасні функції повертають проміс, до якого ви можете приєднати функції зворотного виклику:</p> - -<p>Якщо переписати функцію <code>createAudioFileAsync()</code>, щоб вона повертала проміс, її використання буде ось таким простим:</p> - -<pre class="brush: js notranslate">createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</pre> - -<p>Це скорочений запис для:</p> - -<pre class="brush: js notranslate">const promise = createAudioFileAsync(audioSettings); -promise.then(successCallback, failureCallback);</pre> - -<p>Ми називаємо це <em>асинхронним викликом функції</em>. Ця конвенція має декілька переваг. Ми дослідимо кожну з них.</p> - -<h2 id="Гарантії">Гарантії</h2> - -<p>На відміну від старомодних колбеків, проміс постачається з певними гарантіями:</p> - -<ul> - <li>Функції зворотного виклику ніколи не будуть викликані до <a href="/uk/docs/Web/JavaScript/EventLoop">завершення поточного виконання</a> циклу подій JavaScript.</li> - <li>Функції зворотного виклику, додані за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>, навіть <em>після</em> успіху або невдачі асинхронної операції, будуть викликані, як наведено вище.</li> - <li>Можна додати більше одного зворотного виклику, викликавши метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> декілька разів. Кожен зворотний виклик виконується один за одним, у тому порядку, в якому вони були додані.</li> -</ul> - -<p>Однією з величезних переваг промісів є <strong>ланцюгування</strong>.</p> - -<h2 id="Ланцюгування">Ланцюгування</h2> - -<p>Типовою потребою є виконання двох або більше асинхронних операцій одна за одною, коли кожна наступна операція починається, коли попередня успішно завершується, з результатом з попереднього кроку. Ми досягаємо цього, створюючи <strong>ланцюжок промісів</strong>.</p> - -<p>Ось вам магія: функція <code>then()</code> повертає <strong>новий проміс</strong>, що відрізняється від оригіналу:</p> - -<pre class="brush: js notranslate">const promise = doSomething(); -const promise2 = promise.then(successCallback, failureCallback); -</pre> - -<p>або</p> - -<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback); -</pre> - -<p>Цей другий проміс (<code>promise2</code>) представляє собою завершення не тільки <code>doSomething()</code>, але й <code>successCallback</code> або <code>failureCallback</code>, які ви передали, вони, в свою чергу, можуть бути іншими асинхронними функціями, що повертають проміс. В цьому випадку будь-які функції зворотного виклику, додані до <code>promise2</code>, стають в чергу за промісом, що повертається <code>successCallback</code> чи <code>failureCallback</code>.</p> - -<p>По суті, кожен проміс відображає завершення іншого асинхроннго кроку в ланцюжку.</p> - -<p>В старі часи виконання декількох асинхронних операцій підряд призвело б до класичної піраміди смерті з колбеків:</p> - -<pre class="brush: js notranslate">doSomething(function(result) { - doSomethingElse(result, function(newResult) { - doThirdThing(newResult, function(finalResult) { - console.log('Ось фінальний результат: ' + finalResult); - }, failureCallback); - }, failureCallback); -}, failureCallback); -</pre> - -<p>З сучасними функціями замість цього ми приєднуємо наші функції зворотного виклику до промісів, що повертаються, формуючи ланцюжок промісів.</p> - -<pre class="brush: js notranslate">doSomething().then(function(result) { - return doSomethingElse(result); -}) -.then(function(newResult) { - return doThirdThing(newResult); -}) -.then(function(finalResult) { - console.log('Ось фінальний результат: ' + finalResult); -}) -.catch(failureCallback); -</pre> - -<p>Аргументи до <code>then</code> є необов'язковими, а <code>catch(failureCallback)</code> - це скорочений запис для <code>then(null, failureCallback)</code>. Ви можете побачити це, виражене за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>:</p> - -<pre class="brush: js notranslate">doSomething() -.then(result => doSomethingElse(result)) -.then(newResult => doThirdThing(newResult)) -.then(finalResult => { - console.log(`Ось фінальний результат: ${finalResult}`); -}) -.catch(failureCallback); -</pre> - -<p><strong>Важливо</strong>: Завжди повертайте результати, інакше функції зворотного виклику не перехоплять результат попереднього проміса (у стрілкових функціях <code>() => x</code> є скороченим записом для <code>() => { return x; }</code>).</p> - -<h3 id="Ланцюгування_після_catch">Ланцюгування після catch</h3> - -<p>Ланцюгувати <em>після </em>невдачі можливо, наприклад, <code>catch</code> є корисним у разі виконання нових операцій навіть після того, як операція у ланцюжку завершилась неуспішно. Дивіться наступний приклад:</p> - -<pre class="brush: js notranslate">new Promise((resolve, reject) => { - console.log('Початковий'); - - resolve(); -}) -.then(() => { - throw new Error('Щось пішло не так'); - - console.log('Зробити це'); -}) -.catch(() => { - console.log('Зробити те'); -}) -.then(() => { - console.log('Зробити це, що б не відбувалось раніше'); -}); - -</pre> - -<p>Це виведе наступний текст:</p> - -<pre class="notranslate">Початковий -Зробити те -Зробити це, що б не відбувалось раніше -</pre> - -<p><strong>Зауважте:</strong> Текст "Зробити це" не був виведений, тому що помилка "Щось пішло не так" спричинила відхилення.</p> - -<h2 id="Спливання_помилок">Спливання помилок</h2> - -<p>Ви, можливо, пригадуєте, що тричі бачили <code>failureCallback</code> раніше, у піраміді смерті, у порівнянні з лише одним викликом наприкінці ланцюжку промісів.</p> - -<pre class="brush: js notranslate">doSomething() -.then(result => doSomethingElse(value)) -.then(newResult => doThirdThing(newResult)) -.then(finalResult => console.log(`Ось фінальний результат: ${finalResult}`)) -.catch(failureCallback); -</pre> - -<p>Якщо виникає виняток, переглядач передивляється ланцюжок у пошуках обробників <code>catch</code> або <code>onRejected</code>. Це дуже схоже на модель того, як працює синхронний код:</p> - -<pre class="brush: js notranslate">try { - let result = syncDoSomething(); - let newResult = syncDoSomethingElse(result); - let finalResult = syncDoThirdThing(newResult); - console.log(`Ось фінальний результат: ${finalResult}`); -} catch(error) { - failureCallback(error); -} -</pre> - -<p>Ця симетрія з асинхронним кодом сягає кульмінації в синтаксичному цукрі <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> в ECMAScript 2017:</p> - -<pre class="brush: js notranslate">async function foo() { - try { - let result = await doSomething(); - let newResult = await doSomethingElse(result); - let finalResult = await doThirdThing(newResult); - console.log(`Ось фінальний результат: ${finalResult}`); - } catch(error) { - failureCallback(error); - } -} -</pre> - -<p>Він будується на промісах, наприклад, <code>doSomething()</code> - це та сама функція, що й раніше. Ви можете прочитати більше про синтаксис <a href="https://developers.google.com/web/fundamentals/primers/async-functions">тут</a>.</p> - -<p>Проміси виправляють фундаментальну хибу з пірамідою смерті, перехоплюючи всі помилки, навіть викинуті винятки та помилки программування. Це критично важливо для функціональної композиції асинхронних операцій.</p> - -<h2 id="Події_відхилення_промісів">Події відхилення промісів</h2> - -<p>Коли проміс відхиляється, одна з двох подій надсилається у глобальну область видимості (загалом, це або <a href="/uk/docs/Web/API/Window"><code>window</code></a>, або, при використанні у веб-виконавці, це <a href="/uk/docs/Web/API/Worker"><code>Worker</code></a> або інший інтерфейс на базі виконавців). Ці дві події наступні:</p> - -<dl> - <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event" title="Подія rejectionhandled надсилається у глобальну область видимості скрипта (зазвичай, window, але також і Worker), коли об'єкт JavaScript Promise відхиляється, але після того, як відхилення було оброблене."><code>rejectionhandled</code></a></dt> - <dd>Надсилається, коли проміс відхиляється, після того, як відхилення було оброблене функцією виконавця <code>reject</code>.</dd> - <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event" title="Подія unhandledrejection надсилається у глобальну область видимості скрипта, коли об'єкт JavaScript Promise, який не має обробника відхилення, відхиляється; зазвичай, це window, але також може бути Worker."><code>unhandledrejection</code></a></dt> - <dd>Надсилається, коли проміс відхиляється, але немає доступного обробника відхилення.</dd> -</dl> - -<p>У обох випадках подія (типу <a href="/uk/docs/Web/API/PromiseRejectionEvent" title="Інтерфейс PromiseRejectionEvent відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript Promise відхиляються."><code>PromiseRejectionEvent</code></a>) має в якості полів властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/promise"><code>promise</code></a>, яка вказує відхилений проміс, та властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/reason"><code>reason</code></a>, яка передає надану причину відхилення проміса.</p> - -<p>Це робить можливою резервну обробку помилок для промісів, а також допомагає відлагоджувати проблеми в управлінні промісами. Ці обробники є глобальними за контекстом, тому усі помилки потраплятимуть в однакові обробники подій, незалежно від джерела.</p> - -<p>Один випадок особливої корисності: при написанні коду для {{Glossary("Node.js")}}, зазвичай, модулі, які ви включаєте у свій проект, можуть мати необроблені відхилені проміси. Вони виводяться у консоль середовищем виконання Node. Ви можете перехопити їх для аналізу та обробити у своєму коді — або просто уникнути захаращення ними виводу даних — додавши обробник події <a href="/uk/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code></a>, ось так:</p> - -<pre class="brush: js notranslate">window.addEventListener("unhandledrejection", event => { - /* Ви можете почати тут, додавши код, щоб дослідити - вказаний проміс через event.promise та причину у - event.reason */ - - event.preventDefault(); -}, false);</pre> - -<p>Викликавши метод події <a href="/uk/docs/Web/API/Event/preventDefault" title="Метод інтерфейсу Event preventDefault() каже програмному агенту, що, якщо подія не була явно оброблена, її дія за замовчуванням не має виконуватись."><code>preventDefault()</code></a>, ви кажете середовищу виконання JavaScript не виконувати дію за замовчуванням, коли відхилений проміс лишається необробленим. Ця дія зазвичай містить виведення помилки у консоль, а це якраз випадок для Node.</p> - -<p>В ідеалі, звісно, ви маєте досліджувати відхилені проміси, щоб бути певними, що жоден з них не є насправді помилкою коду, перед тим, як відкидати ці події.</p> - -<h2 id="Створення_промісу_на_основі_старого_API_зі_зворотним_викликом">Створення промісу на основі старого API зі зворотним викликом</h2> - -<p>{{jsxref("Promise","Проміс")}} може бути створенний з нуля за допогою свого конструктора. Це необхідно лише для обгортки старих API.</p> - -<p>В ідеальному світі всі асинхронні функції повертали б проміси. На жаль, деякі API досі очікують старомодну передачу функцій зворотного виклику для успіху та/або невдачі. Найбільш очевидним прикладом є функція {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p> - -<pre class="brush: js notranslate">setTimeout(() => saySomething("Пройшло 10 секунд"), 10000); -</pre> - -<p>Змішування старомодних зворотних викликів та промісів є проблематичним. Якщо <code>saySomething</code> завершиться невдачею або міститиме помилку программування, ніщо її не перехопить.</p> - -<p>На щастя, ми можемо обгорнути <code>saySomething</code> у проміс. Найкращою практикою вважається обгортати проблематичні функції на якомога нижчому рівні і вже ніколи не звертатись до них прямо.</p> - -<pre class="brush: js notranslate">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); - -wait(10000).then(() => saySomething("10 секунд")).catch(failureCallback); -</pre> - -<p>По суті, конструктор промісу приймає функцію виконання, яка дозволяє вирішити або відхилити проміс вручну. Оскільки <code>setTimeout</code>, насправді, ніколи не завершується невдало, ми пропускаємо функцію відхилення в цьому випадку.</p> - -<h2 id="Композиція">Композиція</h2> - -<p>Методи {{jsxref("Promise.resolve()")}} та {{jsxref("Promise.відхилено", "Promise.reject()")}} є скороченими записами для створення вручну вже вирішених або відхилених промісів відповідно. Інколи це може бути корисно.</p> - -<p>Методи {{jsxref("Promise.all()")}} та {{jsxref("Promise.race()")}} є двома інструментами композиції для паралельного виконання асинхронних операції.</p> - -<p>Ми можемо почати операції паралельно та чекати, доки вони усі не завершаться ось так:</p> - -<pre class="brush: js notranslate">Promise.all([func1(), func2(), func3()]) -.then(([result1, result2, result3]) => { /* використати result1, result2 та result3 */ });</pre> - -<p>Послідовна композиція можлива з використанням певного розумного JavaScript:</p> - -<pre class="brush: js notranslate">[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve()) -.then(result3 => { /* використати result3 */ });</pre> - -<p>По суті, ми зменшуємо масив асинхронних функцій до ланцюжка промісів, еквівалентного: <code>Promise.resolve().then(func1).then(func2).then(func3);</code></p> - -<p>Це можна перетворити на композиційну функцію багаторазового використання, що є типовим у функціональному програмуванні:</p> - -<pre class="brush: js notranslate">const applyAsync = (acc,val) => acc.then(val); -const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));</pre> - -<p>Функція <code>composeAsync()</code> прийме будь-яку кількість функцій в якості аргументів і поверне нову функцію, яка приймає початкове значення, що має пройти крізь конвеєр композиції:</p> - -<pre class="brush: js notranslate">const transformData = composeAsync(func1, func2, func3); -const result3 = transformData(data); -</pre> - -<p>В ECMAScript 2017 послідовну композицію можна виконати простіше, за допомогою async/await:</p> - -<pre class="brush: js notranslate">let result; -for (const f of [func1, func2, func3]) { - result = await f(result); -} -/* використати останній результат (тобто, result3) */</pre> - -<h2 id="Хронометраж">Хронометраж</h2> - -<p>Щоб уникнути сюрпризів, функції, передані до <code>then()</code>, ніколи не викликатимуться синхронно, навіть для вже вирішеного проміса:</p> - -<pre class="brush: js notranslate">Promise.resolve().then(() => console.log(2)); -console.log(1); // 1, 2 -</pre> - -<p>Замість негайного виконання, передані функції ставляться у чергу мікрозадач. Це означає, що вони виконуються пізніше, коли черга стає порожньою в кінці поточного виконання циклу подій JavaScript, тобто, досить скоро:</p> - -<pre class="brush: js notranslate">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); - -wait().then(() => console.log(4)); -Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); -console.log(1); // 1, 2, 3, 4 -</pre> - -<h2 id="Вкладеність">Вкладеність</h2> - -<p>Прості ланцюжки промісів найкраще тримати рівними, без вкладень, оскільки вкладення можуть бути результатом недбалої композиції. Дивіться <a href="#Типові_помилки">типові помилки</a>.</p> - -<p>Вкладеність є контролюючою структурою для обмеження області видимості блоків <code>catch</code>. Зокрема, вкладений <code>catch</code> перехоплює лише помилки своєї області видимості та нижче, але не ті помилки, що знаходяться вище у ланцюжку поза вкладеною областю видимості. При правильному використанні це надає більшу точність у виявленні помилок:</p> - -<pre class="brush: js notranslate">doSomethingCritical() -.then(result => doSomethingOptional(result) - .then(optionalResult => doSomethingExtraNice(optionalResult)) - .catch(e => {})) // Ігнорувати, якщо не працює щось другорядне; продовжити. -.then(() => moreCriticalStuff()) -.catch(e => console.error("Критична помилка: " + e.message));</pre> - -<p>Зауважте, що необов'язкові кроки тут вкладені, не для відступів, але для передбачливого розташування зовнішніх дужок <code>(</code> та <code>)</code> навколо.</p> - -<p>Внутрішній нейтралізуючий блок <code>catch</code> перехоплює помилки тільки від <code>doSomethingOptional()</code> та <code>doSomethingExtraNice()</code>, після чого виконання коду продовжується у <code>moreCriticalStuff()</code>. Що важливо, якщо функція <code>doSomethingCritical()</code> завершується невдало, її помилка перехоплюється тільки кінцевим (зовнішнім) блоком <code>catch</code>.</p> - -<h2 id="Типові_помилки">Типові помилки</h2> - -<p>Ось деякі типові помилки, яких варто остерігатися при складанні ланцюжків промісів. Декілька з цих помилок проявляються у наступному прикладі:</p> - -<pre class="brush: js example-bad notranslate">// Поганий приклад! Помічено 3 помилки! - -doSomething().then(function(result) { - doSomethingElse(result) // Забули повернути проміс з внутрішнього ланцюжка + непотрібне вкладення - .then(newResult => doThirdThing(newResult)); -}).then(() => doFourthThing()); -// Забули завершити ланцюжок блоком catch! -</pre></pre> - -<p>Перша помилка - не завершувати ланцюжки як слід. Це відбувається, коли ми створюємо новий проміс, але забуваємо його повернути. Як наслідок, ланцюг переривається, чи, скоріше, ми отримуємо два конкуруючі ланцюжки. Це означає, що <code>doFourthThing()</code> не чекатиме на завершення <code>doSomethingElse()</code> чи <code>doThirdThing()</code> і запуститься паралельно з ними, скоріше за все, ненавмисно. В окремих ланцюжках також окремо обробляються помилки, що призводить до неперехоплених помилок.</p> - -<p>Друга помилка - непотрібна вкладеність, що уможливлює першу помилку. Вкладеність також обмежує область видимості внутрішніх обробників помилок, а це — якщо зроблене ненавмисно — може призвести до неперехоплених помилок. Варіантом цього є <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">антишаблон конструювання промісів</a>, який поєднує вкладення з надлишковим використанням конструктора промісів для загортання коду, який вже використовує проміси.</p> - -<p>Третя помилка - забувати завершувати ланцюжки блоком <code>catch</code>. Незавершені ланцюжки промісів призводять до неперехоплених відхилень промісів у більшості переглядачів.</p> - -<p>Гарний практичний підхід - завжди або повертати, або завершувати ланцюжки промісів, і, як тільки ви отримуєте новий проміс, повертати його негайно, щоб вирівняти ланцюжок:</p> - -<pre class="brush: js example-good notranslate">doSomething() -.then(function(result) { - return doSomethingElse(result); -}) -.then(newResult => doThirdThing(newResult)) -.then(() => doFourthThing()) -.catch(error => console.error(error));</pre> - -<p>Зауважте, що <code>() => x</code> є скороченням для <code>() => { return x; }</code>.</p> - -<p>Тепер ми маємо єдиний, детермінований ланцюжок з правильною обробкою помилок.</p> - -<p>Використання <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> вирішує більшість, якщо не всі ці проблеми — натомість, найпоширенішою помилкою при використанні цього синтаксису є забуте ключове слово <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>.</p> - -<h2 id="Коли_зустрічаються_задачі_та_проміси">Коли зустрічаються задачі та проміси</h2> - -<p>Якщо ви стикаєтеся з ситуаціями, коли у вас є проміси та задачі (такі, як події або зворотні виклики), які запускаються у непередбачуваному порядку, можливо, вам буде корисно скористатись мікрозадачами, щоб перевірити статус або збалансувати проміси, коли створення промісів залежить від певних умов.</p> - -<p>Якщо ви вважаєте, що мікрозадачі могли б вирішити цю проблему, дивіться <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide">посібник з мікрозадач</a>, щоб дізнатись, як використовувати метод <code><a href="/uk/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask" title="The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.">queueMicrotask()</a></code>, щоб поставити функцію у чергу як мікрозадачу.</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{jsxref("Promise.then()")}}</li> - <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> </li> - <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> - <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> - <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> - <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> - <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p> diff --git a/files/uk/web/javascript/guide/working_with_objects/index.html b/files/uk/web/javascript/guide/working_with_objects/index.html deleted file mode 100644 index 214bae97aa..0000000000 --- a/files/uk/web/javascript/guide/working_with_objects/index.html +++ /dev/null @@ -1,490 +0,0 @@ ---- -title: Робота з об'єктами -slug: Web/JavaScript/Guide/Working_with_Objects -tags: - - JavaScript - - Object - - Документ - - Об'єкт - - Посібник -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</div> - -<p class="summary">Мова JavaScript базується на простій, заснованій на об'єктах парадигмі. Об'єкт - це колекція властивостей, а властивість - це асоціація між іменем (або <em>ключем</em>) та значенням. Значення властивості може бути функцією, в цьому випадку властивість відома як метод. На додачу до об'єктів, попередньо визначених у веб-переглядачі, ви можете визначати власні об'єкти. Цей розділ описує, як використовувати об'єкти, властивості, функції та методи, і як створювати власні об'єкти.</p> - -<h2 id="Огляд_обєктів">Огляд об'єктів</h2> - -<p>Об'єкти у JavaScript, як і у багатьох інших мовах програмування, можна порівняти з об'єктами у реальному житті. Концепію об'єктів у JavaScript можна зрозуміти на прикладі матеріальних об'єктів з реального життя.</p> - -<p>У JavaScript об'єкт - це окрема сутність з властивостями та типом. Порівняємо його, для прикладу, з чашкою. Чашка - це об'єкт з властивостями. Чашка має колір, дизайн, вагу, матеріал, з якого вона зроблена, і т.д. Так само, об'єкти JavaScript можуть мати властивості, які визначають їхні характеристики.</p> - -<h2 id="Обєкти_та_властивості">Об'єкти та властивості</h2> - -<p>Об'єкт JavaScript має асоційовані з ним властивості. Властивість об'єкта можна описати як змінну, прикріплену до об'єкта. Властивості об'єкта - це, загалом, те саме, що й звичайні змінні JavaScript, але прикріплені до об'єктів. Властивості об'єкта визначають характеристики об'єкта. Ви звертаєтесь до властивостей об'єкта через просту крапкову нотацію:</p> - -<pre class="brush: js notranslate">objectName.propertyName -</pre> - -<p>Як усі змінні JavaScript, і ім'я об'єкта (яке може бути звичайною змінною), і ім'я властивості чутливі до регістру. Ви можете визначити властивість, присвоївши їй значення. Наприклад, створимо об'єкт на ім'я <code>myCar</code> (моя машина) та дамо йому властивості <code>make</code> (виробник), <code>model</code> (модель) та <code>year</code> (рік) ось так:</p> - -<pre class="brush: js notranslate">var myCar = new Object(); -myCar.make = 'Ford'; -myCar.model = 'Mustang'; -myCar.year = 1969; -</pre> - -<p>Наведений приклад також міг бути написаний за допомогою <strong><a href="#Використання_обєктних_ініціалізаторів">об'єктного ініціалізатора</a></strong>, який є списком з нуля чи більше розділених комами пар імен властивостей об'єкта та асоційованих з ними значень, записаний у фігурних дужках (<code>{}</code>):</p> - -<pre class="brush: js notranslate">var myCar = { - make: 'Ford', - model: 'Mustang', - year: 1969 -}; -</pre> - -<p>Неприсвоєні властивості об'єкта мають значення {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p> - -<pre class="brush: js notranslate">myCar.color; // undefined</pre> - -<p>До властивостей об'єктів JavaScript також можна звертатись чи присвоювати їх за допомогою дужкової нотації (щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступ до властивостей</a>). Об'єкти іноді називають <em>асоціативними масивами</em>, оскільки кожна властивість асоціюється з рядковим значенням, яке можна використати для доступу до неї. Отже, для прикладу, ви можете звертатись до властивостей об'єкта <code>myCar</code> наступним чином:</p> - -<pre class="brush: js notranslate">myCar['make'] = 'Ford'; -myCar['model'] = 'Mustang'; -myCar['year'] = 1969; -</pre> - -<p>Ім'я властивості об'єкта може бути будь-яким дозволеним рядком JavaScript чи будь-чим, що можна привести до рядка, в тому числі порожній рядок. Однак, будь-яке ім'я властивості, яке не є дозволеним ідентифікатором JavaScript (наприклад, ім'я властивості, що містить пробіл чи дефіс, або починається з цифри) доступне тільки через позначення у квадратних дужках. Ця нотація також дуже корисна, коли імена властивостей мають бути динамічно визначені (коли ім'я властивості не визначене до початку виконання). Приклади наступні:</p> - -<pre class="brush: js notranslate">// створюємо одночасно чотири змінні, розділені комами, -// та присвоюємо їм значення -var myObj = new Object(), - str = 'myString', - rand = Math.random(), - obj = new Object(); - -myObj.type = 'крапковий синтаксис'; -myObj['date created'] = 'рядок з пробілом'; -myObj[str] = 'рядкове значення'; -myObj[rand] = 'випадкове число'; -myObj[obj] = 'об\'єкт'; -myObj[''] = 'навіть порожній рядок'; - -console.log(myObj); -</pre> - -<p>Будь ласка, зауважте, що усі ключі, позначені у квадратних дужках, перетворюються на рядки, якщо тільки вони не є символами, оскільки імена властивостей (ключів) об'єктів JavaScript можуть бути тільки рядками або символами (в якийсь момент також будуть додані приватні імена, з розвитком <a href="https://github.com/tc39/proposal-class-fields">пропозиції щодо полів класу</a>, але вони не використовуватимуться у формі <code>[]</code>). Наприклад, у наведеному вище коді, коли ключ <code>obj</code> додається до об'єкта <code>myObj</code>, JavaScript викличе метод {{jsxref("Object.toString", "obj.toString()")}} та використає отриманий рядок як новий ключ.</p> - -<p>Ви також можете звернутись до властивості, використавши рядкове значення, що зберігається у змінній:</p> - -<pre class="brush: js notranslate">var propertyName = 'make'; -myCar[propertyName] = 'Ford'; - -propertyName = 'model'; -myCar[propertyName] = 'Mustang'; -</pre> - -<p>Ви можете використати дужкову нотацію з циклом <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> для перебору усіх перелічуваних властивостей об'єкта. Для ілюстрації того, як це працює, наступна функція відображає властивості об'єкта, коли ви передаєте об'єкт та ім'я об'єкта в якості аргументів у функцію:</p> - -<pre class="brush: js notranslate">function showProps(obj, objName) { - var result = ``; - for (var i in obj) { - // obj.hasOwnProperty() відфільтровує властивості від ланцюга прототипів об'єкта - if (obj.hasOwnProperty(i)) { - result += `${objName}.${i} = ${obj[i]}\n`; - } - } - return result; -} -</pre> - -<p>Отже, виклик функції <code>showProps(myCar, "myCar")</code> поверне наступне:</p> - -<pre class="brush: js notranslate">myCar.make = Ford -myCar.model = Mustang -myCar.year = 1969</pre> - -<h2 id="Перелік_властивостей_обєкта">Перелік властивостей об'єкта</h2> - -<p>Починаючи з <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, існують три вбудовані методи перелічити / продивитись властивості об'єкта:</p> - -<ul> - <li>цикли <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> - Цей метод продивляється усі перелічувані властивості об'єкта та його ланцюжок прототипів</li> - <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> - Цей метод повертає масив з іменами усіх особистих (не з ланцюга прототипів) перелічуваних властивостей ("ключів") об'єкта <code>o</code>.</li> - <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> - Цей метод повертає масив, що містить імена усіх особистих властивостей (перелічуваних чи ні) об'єкта <code>o</code>.</li> -</ul> - -<p>До ECMAScript 5 не існувало вбудованого способу перелічити усі властивості об'єкта. Однак, цього можна досягти наступною функцією:</p> - -<pre class="brush: js notranslate">function listAllProperties(o) { - var objectToInspect; - var result = []; - - for(objectToInspect = o; objectToInspect !== null; - objectToInspect = Object.getPrototypeOf(objectToInspect)) { - result = result.concat( - Object.getOwnPropertyNames(objectToInspect) - ); - } - - return result; -} -</pre> - -<p>Це може бути корисним для виявлення "схованих" властивостей (властивостей у ланцюгу прототипів, які недоступні через об'єкт, тому що інша властивість з таким самим іменем зустрічається у ланцюгу раніше). Список лише доступних властивостей можна легко зробити, прибравши дублікати у масиві.</p> - -<h2 id="Створення_нових_обєктів">Створення нових об'єктів</h2> - -<p>JavaScript має чимало попередньо визначених об'єктів. На додачу, ви можете створювати свої власні об'єкти. Ви можете створити об'єкт за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора</a>. Або ви можете спочатку створити функцію-конструктор, після чого створювати об'єкти, використовуючи оператор <code>new</code>.</p> - -<h3 id="Використання_обєктних_ініціалізаторів"><span id="Object_initializers">Використання об'єктних ініціалізаторів</span></h3> - -<p>На додачу до створення об'єктів за допомогою функції-конструктора, ви можете створювати об'єкти, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктний ініціалізатор</a>. Використання об'єктних ініціалізаторів іноді називають створенням об'єктів літеральною нотацією. "Об'єктний ініціалізатор" відповідає термінології, що використовується у мові C++.</p> - -<p>Синтаксис об'єкта, що використовує об'єктний ініціалізатор, наступний:</p> - -<pre class="brush: js notranslate">var obj = { property_1: value_1, // property_# може бути ідентифікатором... - 2: value_2, // або числом... - // ..., - 'property n': value_n }; // або рядком -</pre> - -<p>де <code>obj</code> - ім'я нового об'єкта, кожне ім'я <code>property_<var>i</var></code> є ідентифікатором (або числом, або рядковим літералом), а кожне значення <code>value_<var>i</var></code> є виразом, чиє значення присвоюється властивості <code>property_<var>i</var></code>. Змінна <code>obj</code> та присвоєння є необов'язковими; якщо вам непотрібно звертатись до цього об'єкта будь-де, вам непотрібно присвоювати його змінній. (Зауважте, що вам може знадобитись загорнути об'єктний літерал у круглі дужки, якщо об'єкт з'являється там, де очікується інструкція, щоб літерал не був прийнятий за блочну інструкцію.)</p> - -<p>Об'єктні ініціалізатори є виразами, а кожний об'єктний ініціалізатор створює новий об'єкт, коли виконується інструкція, де він знаходиться. Ідентичні об'єктні ініціалізатори створюють окремі об'єкти, які не вважатимуться рівними. Об'єкти створюються так, ніби відбувся виклик <code>new Object()</code>; тобто, об'єкти, створені об'єктними літералами, є екземплярами <code>Object</code>.</p> - -<p>Наступна інструкція створює об'єкт та присвоює його змінній <code>x</code> тільки за умови, що вираз <code>cond</code> є правдивим:</p> - -<pre class="brush: js notranslate">if (cond) var x = {greeting: 'привітик'}; -</pre> - -<p>Наступний приклад створює об'єкт <code>myHonda</code> з трьома властивостями. Зауважте, що властивість <code>engine</code> також є об'єктом зі своїми властивостями.</p> - -<pre class="brush: js notranslate">var myHonda = {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}; -</pre> - -<p>Ви також можете використовувати об'єктні ініціалізатори для створення масивів. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Масивні_літерали">масивні літерали</a>.</p> - -<h3 id="Використання_функції-конструктора">Використання функції-конструктора</h3> - -<p>Також ви можете створити об'єкт, виконавши ці два кроки:</p> - -<ol> - <li>Визначити тип об'єкта, написавши функцію-конструктор. Загальноприйнято, і на це є причини, писати їх з великої літери.</li> - <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li> -</ol> - -<p>Щоб визначити тип об'єкта, створіть функцю для типу об'єкта, яка визначає його ім'я, властивості та методи. Наприклад, припустимо, ви хочете створити тип об'єкта для автомобілів. Ви хочете, щоб цей тип об'єкта називався <code>Car</code>, і ви хочете, щоб він мав властивості для виробника, моделі та року. Щоб це зробити, ви б написали наступну функцію:</p> - -<pre class="brush: js notranslate">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>Зверніть увагу на використання <code>this</code> для присвоєння значень властивостям об'єкта на основі значень, переданих у функцію.</p> - -<p>Тепер ви можете створити об'єкт на ім'я <code>mycar</code> наступним чином:</p> - -<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); -</pre> - -<p>Ця інструкція створює об'єкт <code>mycar</code> та присвоює вказані значення його властивостям. Тоді значенням <code>mycar.make</code> є рядок "Eagle", <code>mycar.year</code> дорівнює цілому число 1993 і т.д.</p> - -<p>Ви можете створити довільне число об'єктів <code>Car</code> викликами <code>new</code>. Наприклад,</p> - -<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); -var vpgscar = new Car('Mazda', 'Miata', 1990); -</pre> - -<p>Об'єкт може мати властивість, яка сама є іншим об'єктом. Наприклад, припустимо, ви визначаєте об'єкт <code>person</code> (людина) наступним чином:</p> - -<pre class="brush: js notranslate">function Person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> - -<p>і далі створюєте два екземпляра об'єкта <code>person</code> наступним чином:</p> - -<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M'); -var ken = new Person('Ken Jones', 39, 'M'); -</pre> - -<p>Тоді ви можете переписати визначення <code>Car</code>, щоб включити властивість <code>owner</code> (власник), яка приймає об'єкт <code>person</code> ось так:</p> - -<pre class="brush: js notranslate">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> - -<p>Тепер, щоб створити нові об'єкти, ви зробите наступне:</p> - -<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); -var car2 = new Car('Nissan', '300ZX', 1992, ken); -</pre> - -<p>Зверніть увагу, що, замість передачі літералу рядка чи цілого числа під час створення нових об'єктів, наведені вище інструкції передають об'єкти <code>rand</code> та <code>ken</code> в якості значень власників. Тепер, якщо вам потрібно дізнатись ім'я власника <code>car2</code>, ви можете звернутись до наступної властивості:</p> - -<pre class="brush: js notranslate">car2.owner.name -</pre> - -<p>Зауважте, що ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція</p> - -<pre class="brush: js notranslate">car1.color = 'чорний'; -</pre> - -<p>додає властивість <code>color</code> (колір) до <code>car1</code>, та присвоює їй значення "чорний." Однак, це не впливає на всі інші об'єкти. Щоб додати нову властивість до усіх об'єктів того самого типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p> - -<h3 id="Використання_методу_Object.create">Використання методу <code>Object.create</code></h3> - -<p>Об'єкти також можна створювати методом {{jsxref("Object.create()")}}. Цей метод може бути дуже корисним, тому що дозволяє обирати прототип для об'єкта, який ви хочете створити, без необхідності визначати функцію-конструктор.</p> - -<pre class="brush: js notranslate">// Властивості об'єкта Animal (тварина) та інкапсуляція методу -var Animal = { - type: 'Безхребетні', // Значення властивості за замовчуванням - displayType: function() { // Метод, що виводитиме тип тварини - console.log(this.type); - } -}; - -// Створити нову тварину з назвою animal1 -var animal1 = Object.create(Animal); -animal1.displayType(); // виведе: Безхребетні - -// Створити нову тварину з назвою fish (риба) -var fish = Object.create(Animal); -fish.type = 'Риби'; -fish.displayType(); // виведе: Риби</pre> - -<h2 id="Наслідування">Наслідування</h2> - -<p>Усі об'єкти у JavaScript успадковуються від принаймні одного іншого об'єкта. Об'єкт, від якого наслідується інший об'єкт, відомий як прототип, а успадковані властивості можна знайти у об'єкті конструктора <code>prototype</code>. Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p> - -<h2 id="Індексування_властивостей_обєкта">Індексування властивостей об'єкта</h2> - -<p>Ви можете звернутись до властивості об'єкта або за іменем властивості, або за його оригінальним індексом. Якщо ви з самого початку визначили властивість за іменем, ви завжди маєте звертатись до неї за іменем, а якщо ви визначили властивість за індексом, ви завжди маєте звертатись до неї за індексом.</p> - -<p>Це обмеження працює, коли ви створюєте об'єкт та його властивості функцією-конструктором (як ми робили раніше з типом об'єкта <code>Car</code>) та коли ви явно визначаєте окремі властивості (наприклад, <code>myCar.color = "червоний"</code>). Якщо ви початково визначили властивість об'єкта з індексом, як от <code>myCar[5] = "25 mpg"</code>, ви далі звертаєтесь до властивості лише у вигляді <code>myCar[5]</code>.</p> - -<p>Винятком з цього правила є подібний до масиву об'єкт з HTML, такий як подібний до масиву об'єкт <code>forms</code>. Ви завжди можете посилатись на об'єкти у цих подібних до масивів об'єктах або за їхнім порядковим номером (в залежності від їхнього розташування у документі), або за іменем (якщо воно визначене). Наприклад, якщо другий тег <code><FORM></code> у документі має атрибут <code>NAME</code>, що дорівнює "myForm", ви можете звернутись до форми <code>document.forms[1]</code>, або <code>document.forms["myForm"]</code>, або <code>document.forms.myForm</code>.</p> - -<h2 id="Визначення_властивостей_для_типу_обєкта">Визначення властивостей для типу об'єкта</h2> - -<p>Ви можете додати властивість до попередньо визначеного типу об'єкта за допомогою властивості <code>prototype</code>. Це визначає властивість, спільну для усіх об'єктів вказаного типу, а не лише для одного екземпляру об'єкта. Наступний код додає властивість <code>color</code> (колір) до усіх об'єктів типу <code>Car</code> (автомобіль), після чого присвоює значення властивості <code>color</code> об'єкта <code>car1</code>.</p> - -<pre class="brush: js notranslate">Car.prototype.color = null; -car1.color = 'чорний'; -</pre> - -<p>Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">властивість <code>prototype</code></a> об'єкта <code>Function</code> у <a href="/uk/docs/Web/JavaScript/Reference">довіднику JavaScript</a>.</p> - -<h2 id="Визначення_методів">Визначення методів</h2> - -<p><em>Метод</em> - це функція, асоційована з об'єктом, або, простіше кажучи, метод - це властивість об'єкта, яка є функцією. Методи визначаються так само, як звичайні функції, за винятком того, що вони мають бути асоційовані з властивістю об'єкта. Дивіться більше подробиць у <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методів</a>. Приклад наступний:</p> - -<pre class="brush: js notranslate">objectName.methodname = functionName; - -var myObj = { - myMethod: function(params) { - // ...зробити щось - } - - // ТАКЕ ТЕЖ ПРАЦЮЄ - - myOtherMethod(params) { - // ...зробити щось інше - } -}; -</pre> - -<p>де <code>objectName</code> - це існуючий об'єкт, <code>methodname</code> - це ім'я, яке ви присвоюєте методу, а <code>functionName</code> - це ім'я функції.</p> - -<p>Далі ви можете викликати метод у контексті об'єкта наступним чином:</p> - -<pre class="brush: js notranslate">object.methodname(params); -</pre> - -<p>Ви можете визначати методи для типу об'єкта, додавши визначення методів у конструктор об'єкта. Ви можете визначити функцію, що буде форматувати та відображати властивості попередньо визначених об'єктів <code>Car</code>; наприклад,</p> - -<pre class="brush: js notranslate">function displayCar() { - var result = `Чудовий автомобіль ${this.year} ${this.make} ${this.model}`; - pretty_print(result); -} -</pre> - -<p>де <code>pretty_print</code> - функція, що відображатиме горизонтальне правило та рядок. Зверніть увагу на використання <code>this</code> для посилання на об'єкт, до якого належить метод.</p> - -<p>Ви можете зробити цю функцію методом <code>Car</code>, додавши інструкцію</p> - -<pre class="brush: js notranslate">this.displayCar = displayCar; -</pre> - -<p>до визначення об'єкта. Отже, повне визначення <code>Car</code> виглядатиме так</p> - -<pre class="brush: js notranslate">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> - -<p>Тоді ви можете викликати метод <code>displayCar</code> для кожного об'єкта наступним чином:</p> - -<pre class="brush: js notranslate">car1.displayCar(); -car2.displayCar(); -</pre> - -<h2 id="Використання_this_у_посиланнях_на_обєкт">Використання <code>this</code> у посиланнях на об'єкт</h2> - -<p>JavaScript має спеціальне ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, яке ви можете використати всередині метода, щоб вказати на поточний об'єкт. Наприклад, припустимо, ви маєте 2 об'єкта, <code>Manager</code> та <code>Intern</code>. Кожен об'єкт має свої власні <code>name</code> (ім'я), <code>age</code> (вік) та <code>job</code> (роботу). У функції <code>sayHi()</code>, зверніть увагу, є <code>this.name</code>. Додані до 2-х об'єктів, вони можуть бути викликані та повернуть <code>'Привіт, мене звуть'</code>, а далі додають значення <code>name</code> з цього конкретного об'єкта. Як показано нижче. </p> - -<pre class="brush: js notranslate">const Manager = { - name: "Джон", - age: 27, - job: "Програміст" -} -const Intern= { - name: "Бен", - age: 21, - job: "Програміст-інтерн" -} - -function sayHi() { - console.log('Привіт, мене звуть', this.name) -} - -// додаємо функцію sayHi до обох об'єктів -Manager.sayHi = sayHi; -Intern.sayHi = sayHi; - -Manager.sayHi() // Привіт, мене звуть Джон -Intern.sayHi() // Привіт, мене звуть Бен -</pre> - -<p><code>this</code> посилається на об'єкт, в якому знаходиться. Ви можете створити нову функцію під назвою <code>howOldAmI()</code>, яка виводить повідомлення про те, скільки цій людині років. </p> - -<pre class="brush: js notranslate">function howOldAmI (){ - console.log('Мені ' + this.age + ' років.') -} -Manager.howOldAmI = howOldAmI; -Manager.howOldAmI() // Мені 27 років. -</pre> - -<h2 id="Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</h2> - -<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">Гетер</a> - це метод, який отримує значення конкретної властивості. <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">Сетер</a> - це метод, який присвоює значення конкретній властивості. Ви можете визначати гетери та сетери на будь-якому існуючому базовому об'єкті чи об'єкті, створеному користувачем, якщо він підтримує додавання нових властивостей. </p> - -<p>Гетери та сетери можуть бути або</p> - -<ul> - <li>визначені за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів</a>, або</li> - <li>додані пізніше до будь-якого об'єкта у будь-який час за допомогою методу додавання гетерів чи сетерів.</li> -</ul> - -<p>При визначенні гетерів та сетерів за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів </a>вам потрібно лише додати перед методом-гетером <code>get</code>, а перед методом-сетером <code>set</code>. Звісно, гетер не повинен очікувати на параметри, а сетер очікує рівно на один параметер (нове значення, яке треба присвоїти). Наприклад:</p> - -<pre class="brush: js notranslate">var o = { - a: 7, - get b() { - return this.a + 1; - }, - set c(x) { - this.a = x / 2; - } -}; - -console.log(o.a); // 7 -console.log(o.b); // 8 <-- В цьому місці запускається метод get b(). -o.c = 50; // <-- В цьому місці запускається метод set c(x). -console.log(o.a); // 25 -</pre> - -<p>Властивості об'єкта <code>o</code> наступні:</p> - -<ul> - <li><code>o.a</code> — число</li> - <li><code>o.b</code> — гетер, який вертає <code>o.a</code> плюс 1</li> - <li><code>o.c</code> — сетер, який присвоює <code>o.a</code> половину значення, присвоєного <code>o.c</code></li> -</ul> - -<p>Будь ласка, зауважте, що імена функцій гетерів та сетерів, визначені у об'єктному літералі за допомогою "[gs]et <em>властивість</em>()" (на відміну від <code>__define[GS]etter__</code> ), не є іменами самих гетерів, хоча синтаксис <code>[gs]et <em>propertyName</em>(){ }</code> і міг ввести вас в оману.</p> - -<p>Гетери та сетери також можуть бути додані до об'єкта в будь-який момент після створення за допомогою методу <code>Object.defineProperties</code>. Першим параметром цього методу є об'єкт, на якому ви хочете визначити гетер чи сетер. Другим параметром є об'єкт, чиї імена властивостей є іменами гетерів чи сетерів і чиї значення властивостей є об'єктами для визначення функцій гетерів чи сетерів. Ось приклад, який визначає такі самі гетер та сетер, які використовувались у попередньому прикладі:</p> - -<pre class="brush: js notranslate">var o = { a: 0 }; - -Object.defineProperties(o, { - 'b': { get: function() { return this.a + 1; } }, - 'c': { set: function(x) { this.a = x / 2; } } -}); - -o.c = 10; // Запускає сетер, який присвоює 10 / 2 (5) властивості 'a' -console.log(o.b); // Запускає гетер, який видає a + 1, тобто 6 -</pre> - -<p>Яку з двох форм обирати, залежить від вашого стилю програмування та наявної задачі. Якщо ви вже користуєтесь об'єктним ініціалізатором при визначенні прототипу, ви, скоріше за все, обиратимете першу форму. Ця форма є більш компактною та природньою. Однак, якщо ви додаєте гетери та сетери пізніше — оскільки не писали прототип чи окремий об'єкт — тоді друга форма є єдино можливою. Друга форма, можливо, найкраще відображає динамічну природу JavaScript — але вона може зробити код важким для читання та розуміння.</p> - -<h2 id="Видалення_властивостей">Видалення властивостей</h2> - -<p>Ви можете видалити неуспадковані властивості оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Наступний код демонструє, як прибрати властивість.</p> - -<pre class="brush: js notranslate">// Створює новий об'єкт, myobj, з двома властивостями, a та b. -var myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -// Прибирає властивість a, залишивши у myobj лише властивість b. -delete myobj.a; -console.log ('a' in myobj); // виведе: "false" -</pre> - -<p>Ви також можете використати <code>delete</code>, щоб видалити глобальну змінну, якщо ключове слово <code>var</code> не використовувалось для оголошення змінної:</p> - -<pre class="brush: js notranslate">g = 17; -delete g; -</pre> - -<h2 id="Порівняння_обєктів">Порівняння об'єктів</h2> - -<p>У JavaScript об'єкти належать до типу посилань. Два окремі об'єкти ніколи не дорівнюють один одному, навіть якщо мають однакові властивості. Лише порівняння об'єкта з самим собою поверне true.</p> - -<pre class="brush: js notranslate">// Дві змінні, два окремих об'єкти з однаковими властивостями -var fruit = {name: 'яблуко'}; -var fruitbear = {name: 'яблуко'}; - -fruit == fruitbear; // вертає false -fruit === fruitbear; // вертає false</pre> - -<pre class="brush: js notranslate">// Дві змінні, один об'єкт -var fruit = {name: 'яблуко'}; -var fruitbear = fruit; // Присвоїти fruitbear посилання на об'єкт fruit - -// Тут fruit та fruitbear вказують на один об'єкт -fruit == fruitbear; // вертає true -fruit === fruitbear; // вертає true - -fruit.name = 'виноград'; -console.log(fruitbear); // output: { name: "виноград" }, замість { name: "яблуко" } -</pre> - -<p>Щоб дізнатись більше щодо операторів порівняння, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператори порівняння</a>.</p> - -<h2 id="Див._також">Див. також</h2> - -<ul> - <li>Щоб зануритись глибше, читайте <a href="/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model">докладно про об'єктну модель JavaScript's</a>.</li> - <li>Щоб дізнатись щодо класів ECMAScript 2015 (альтернативний спосіб створення об'єктів), читайте розділ <a href="/uk/docs/Web/JavaScript/Reference/Classes">класи JavaScript</a>.</li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</p> diff --git a/files/uk/web/javascript/index.html b/files/uk/web/javascript/index.html deleted file mode 100644 index 51c10dc7dc..0000000000 --- a/files/uk/web/javascript/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: JavaScript -slug: Web/JavaScript -tags: - - JavaScript - - Вчити - - Мова - - Посібник -translation_of: Web/JavaScript ---- -<div>{{JsSidebar}}</div> - -<p class="summary">JavaScript (JS) — це невибаглива до ресурсів мова програмування з {{Glossary("First-class Function", "функціями першого класу")}}, код якої інтерпретується та компілюється під час виконання. Хоча JavaScript насамперед відома як скриптова мова для веб-сторінок, вона також використовується у <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">багатьох небраузерних середовищах</a> на кшталт <a href="/en-US/docs/Glossary/Node.js">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> та <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. JavaScript — {{Glossary("Prototype-based programming", "прототип-орієнтована")}} {{glossary("Dynamic_programming_language", "динамічна мова")}}, що має декілька парадигм та підтримує {{glossary("OOP", "об'єктно-орієнтований")}}, <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BC%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">імперативний</a> та <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%B5%D0%BA%D0%BB%D0%B0%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">декларативний</a> (тобто <a href="https://uk.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D1%96%D0%B9%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">функціональне програмування</a>) стилі. Розгорнуте визначення та докладний опис JavaScript <a href="/uk/docs/Learn/JavaScript">читайте за посиланням</a>.</p> - -<p>Ця частина сайту присвячена безпосередньо мові JavaScript, і вона не стосується тонкощів, пов'язаних з веб-сторінками чи іншим оточенням, у якому виконується JavaScript. Специфічну інформацію щодо {{Glossary("API","API")}} для Веб-сторінок дивіться, будь ласка, у підрозділах <a href="/uk/docs/Web/API">Web APIs</a> та <a href="/uk/docs/Glossary/DOM">DOM</a>.</p> - -<p>Стандартом для JavaScript є <a href="/uk/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Станом на 2012 рік усі <a href="http://kangax.github.io/compat-table/es5/">сучасні браузери</a> вже мали повну підтримку ECMAScript 5.1. Застарілі браузери підтримують щонайменше ECMAScript 3. 17 червня 2015 року <a href="http://www.ecma-international.org">ECMA International </a>випустила шосту базову версію ECMAScript з офіційною назвою ECMAScript 2015, яка у попередніх обговореннях йменувалася ECMAScript 6 або ES6. Відтоді стандарти ECMAScript оновлюються раз на рік. Ця документація посилається на найсвіжішу версію чернетки, тобто <a href="http://tc39.github.io/ecma262/">ECMAScript 2019</a> на цей час.</p> - -<p>Не варто плутати JavaScript з <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">мовою програмування Java</a>. Обидві мови "Java" та "JavaScript" є товарними знаками чи зареєстрованими торговими марками Oracle у Сполучених Штатах та інших країнах. Проте ці дві мови програмування мають великі розбіжності у синтаксисі, семантиці та застосуванні.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Навчальні_посібники">Навчальні посібники</h2> - -<p>Навчайтесь програмуванню на JavaScript за допомогою путівників та посібників.</p> - -<h3 id="Для_повних_новачків">Для повних новачків</h3> - -<p>Якщо ви не маєте взагалі ніякого досвіду програмування на JavaScript, але маєте бажання навчитись, починайте <a href="/uk-UA/docs/Learn/JavaScript">з підрозділу JavaScript у нашому Просторі навчальних матеріалів</a>. Цей підрозділ складається з наступних лекцій:</p> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Guide">Перші кроки з JavaScript</a></dt> - <dd>Відповіді на деякі фундаментальні питання на кшталт "JavaScript — це що?", "На що він схожий?" та "Які має можливості?" з оглядом ключових компонентів JavaScript, таких як змінні, рядки, числа та масиви.</dd> - <dt><a href="/uk/docs/Learn/JavaScript/Building_blocks">Блоки, з яких складається JavaScript</a></dt> - <dd>Продовжуємо огляд ключових компонентів JavaScript, цього разу спрямовуючи нашу увагу на зазвичай вживані типові блоки коду, такі як умовні викази, цикли, функції та події.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Знайомство з об'єктами у JavaScript</a></dt> - <dd>Якщо ви маєте бажання надалі вдосконалювати свій рівень знань мови та створювати більш ефективний код, важливо розумітися на об'єктно-орієнтованій природі JavaScript, і ця лекція має стати вам у пригоді.</dd> -</dl> - -<h3 id="Путівник_з_JavaScript">Путівник з JavaScript</h3> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Guide">Путівник з JavaScript</a></dt> - <dd>Детальний путівник з JavaScript для осіб, які<br> - вже мають досвід програмування на JavaScript чи іншій мові.</dd> -</dl> - -<h3 id="Середній_рівень">Середній рівень</h3> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Клієнтський веб-API</a></dt> - <dd>Під час написання клієнтського JavaScript для веб-сайтів або додатків не хочеться дуже заглиблюватись лише для того, щоб почати використовувати API — інтерфейсами для управління браузером та операційною системою, на якій виконується сайт, чи просто даними інших веб-сайтів чи сервісів. У цьому розділі ми розкриваємо, що являють собою ці API, і як використовувати деякі з найбільш загальних інтерфейсів, з якими доведеться часто мати справу у вашій розробницькій діяльності. </dd> - <dt><a href="/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Введення у JavaScript наново</a></dt> - <dd>Огляд для осіб, які <em>вважають</em>, що знають JavaScript.</dd> -</dl> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Data_structures">Структури даних у JavaScript</a></dt> - <dd>Огляд структур даних, наявних у JavaScript.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Equality_comparisons_and_sameness">Порівняння рівностей та тотожність</a></dt> - <dd>JavaScript пропонує три шляхи для порівняння значень: строга рівність з застосуванням <code>===</code>, нестрога з <code>==</code> та метод <code>{{jsxref("Global_Objects/Object/is", "Object.is()")}}</code>.</dd> -</dl> - -<h3 id="Просунутий_рівень">Просунутий рівень</h3> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Успадкування та ланцюг прототипів</a></dt> - <dd>Розтлумачення успадкування на базі прототипів, яке здебільшого невірно розуміють та недооцінюють.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Суворий режим</a></dt> - <dd>Використання будь-якої змінної без попередньої декларації у суворому режимі заборонено. Цей режим грунтується на ECMAScript 5 з низкою обмежень для поліпшення швидкості й стабільності та спрощення зневадження (дослідження) коду.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Typed_arrays">Типізовані масиви у JavaScript</a></dt> - <dd>Типізовані масиви у JavaScript надають механізм доступу до необроблених бінарних даних.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Memory_Management">Керування пам'яттю</a></dt> - <dd>Життєвий цикл пам'яті та збирання сміття у JavaScript.</dd> - <dt><a href="/uk/docs/Web/JavaScript/EventLoop">Мультипотокова модель та Цикл подій</a></dt> - <dd>JavaScript має мультипотокову подель, яка грунтується на "циклі подій".</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Документація">Документація</h2> - -<p>Перегляньте повну документацію по <a href="/uk/docs/Web/JavaScript/Reference">JavaScript</a>.</p> - -<dl> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects">Стандартні об'єкти</a></dt> - <dd>Ознайомтесь зі стандартними вбудованими об'єктами {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}} та ін.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Operators">Вирази та оператори</a></dt> - <dd>Дізнайтесь більше про особливості поведінки у JavaScript операторів {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритети операторів</a> тощо.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Statements">Викази та декларації</a></dt> - <dd>Усвідомте, як працюють {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} та інші викази й ключовики JavaScript.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></dt> - <dd>Навчіться застосовувати функції JavaScript для розробки власних додатків.</dd> -</dl> - -<h2 id="Інструменти_та_ресурси">Інструменти та ресурси</h2> - -<p>Корисні інструменти для створення та зневадження (дослідження) вашого коду JavaScript.</p> - -<dl> - <dt><a href="/uk/docs/Tools">Інструменти розробника у Firefox</a></dt> - <dd><a href="/uk/docs/Tools/Scratchpad">Блокнот</a>, <a href="/uk/docs/Tools/Web_Console">Консоль</a>, <a href="/uk/docs/Tools/Profiler">Профілювання JavaScript</a>, <a href="/uk/docs/Tools/Debugger">Зневаджувач</a> та ін.</dd> - <dt><a href="/uk/docs/Web/JavaScript/Shells">Оболонки JavaScript</a></dt> - <dd>Надають Вам можливіть швидко протестувати сніпети JavaScript.</dd> - <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> - <dd> - <p>Спрощують командну роботу. Додайте TogetherJS до Вашого сайту, і Ваші відвідувачі матимуть можливість допомагати одне одному у реальному часі.</p> - </dd> - <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> - <dd>Питання з тегом "JavaScript" на ресурсі Stack Overflow.</dd> - <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript">Версії JavaScript та примітки до випуску</a></dt> - <dd>Переглядайте історію розвитку компонентів JavaScript та поточний статус їхньої підтримки.</dd> - <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> - <dd>Наживо редагуйте JavaScript, CSS й HTML та миттєво отримуйте результати. Використовуйте зовнішні ресурси та співпрацюйте з вашою командою онлайн.</dd> - <dt><a href="https://plnkr.co/">Plunker</a></dt> - <dd>Plunker — це онлайн-спільнота для створення, співпраці і обміном вашими ідеями у галузі веб-розробки. Редагуйте ваш JavaScript, CSS і HTML файли, та одразу отримуйте результат і файлову структуру.</dd> -</dl> -</div> -</div> diff --git a/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html deleted file mode 100644 index 365b96ee79..0000000000 --- a/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Наслідування та ланцюжок прототипів -slug: Web/JavaScript/Inheritance_and_the_prototype_chain -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -<div>{{jsSidebar("Advanced")}}</div> - -<p>JavaScript є дещо незвичним для розробників із досвідом у клас-орієнтованих мовах програмування (таких як Java чи C++), оскільки він є динамічним і не надає реалізації класу на рівні мови (ключове слово <code>class</code> введене в ES2015, але є синтаксичним цукром, тому JavaScript залишається прототип-орієнтованою мовою).</p> - -<p>Якщо йдеться про наслідування, то JavaScript має лише одну конструкцію: обʼєкти. Кожен обʼєкт містить у якості прихованої властивості посилання на інший обʼєкт, який називається <strong>прототипом</strong> даного.<strong> </strong>Цей прототип у свою чергу має свій прототип<strong>, </strong>і так далі, поки не досягаємо обʼєкта, прототипом якого є <code>null</code>. За визначенням, <code>null</code> не має прототипу і слугує фінальним значенням у цьому <strong>ланцюжку прототипів</strong>.</p> - -<p>Майже всі обʼєкти в JavaScript є екземплярами {{jsxref("Object")}}, який стоїть на вершині ланцюжка прототипів.</p> - -<p>Прототипна модель наслідування нерідко розглядається як одна зі слабкостей JavaScript, але фактично вона є потужнішою за класичну. Класичну модель, наприклад, досить нескладно побудувати на основі прототипної.</p> - -<p> </p> - -<h2 id="Наслідування_за_допомогою_ланцюжка_прототипів">Наслідування за допомогою ланцюжка прототипів</h2> - -<h3 id="Наслідування_властивостей">Наслідування властивостей</h3> - -<p>Обʼєкти в JavaScript є динамічними "наборами" властивостей (будемо називати їх <strong>власними властивостями</strong>). Обʼєкти в JavaScript містять посилання на свій обʼєкт-прототип. При зверненні до будь-якої властивості обʼєкта пошук цієї властивості відбувається не лише всередині обʼєкта, але і в його прототипі, і у прототипі прототипа, і так далі, поки властивість із заданим імʼям не буде знайдена, або не буде досягнуто кінця ланцюжка прототипів.</p> - -<div class="note"> -<p>Відповідно до стандарту ECMAScript, запис <code>someObject.[[Prototype]]</code> використовується для вказання прототипа <code>someObject</code>. Починаючи з ECMAScript 2015, доступ до <code>[[Prototype]]</code> отримують за допомогою {{jsxref("Object.getPrototypeOf()")}} та {{jsxref("Object.setPrototypeOf()")}}. Це еквівалентно властивості JavaScript <code>__proto__</code>, яка не відповідає стандарту, але де-факто імплементована у більшості браузерів.</p> - -<p>Ви не повинні плутати це з <code><em>func</em>.prototype</code>, властивістю функції, яка натомість визначає, що <code>[[Prototype]]</code> має бути присвоєний усім <em>екземплярам</em> обʼєктів, створених цією функцією як конструктором. Властивість <code><strong>Object.prototype</strong></code> представляє прототип {{jsxref("Object")}}.</p> -</div> - -<p>Ось що відбувається при спробі звернення до властивості:</p> - -<pre class="brush: js">// За допомогою функції f створимо обʼєкт o із власними властивостями a і b: -let f = function () { - this.a = 1; - this.b = 2; -} -let o = new f(); // {a: 1, b: 2} - -// додаємо властивості у прототип фунції f - f.prototype.b = 3; - f.prototype.c = 4; - -// не присвоюйте значення f.prototype = {b:3,c:4}; це зруйнує ланцюжок прототипів -// o.[[Prototype]] має властивості b та c. -// o.[[Prototype]].[[Prototype]] це Object.prototype. -// Нарешті, o.[[Prototype]].[[Prototype]].[[Prototype]] це null. -// Це кінець ланцюжка прототипів, оскільки null, -// за визначенням, не має [[Prototype]]. -// Отже, повністю ланцюжок прототипів виглядатиме так: -// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null - -console.log(o.a); // 1 -// Чи є 'a' власною влативістю для o? Так, і її значення 1. - -console.log(o.b); // 2 -// Чи є 'b' власною властивістю для o? Так, і її значення 2. -// Прототип також має властивість 'b', але вона не відвідується. -// Це називається "затінюванням властивості". - -console.log(o.c); // 4 -// Чи є 'c' власною властивістю для o? Ні, перевіряємо його прототип. -// Чи є 'c' власною властивістю для o.[[Prototype]]? Так, і її значення 4. - -console.log(o.d); // undefined -// Чи є 'd' власною властивістю для o? Ні, перевіряємо його прототип. -// Чи є 'd' власною властивістю для o.[[Prototype]]? Ні, перевіряємо його прототип. -// o.[[Prototype]].[[Prototype]] це null, закінчуємо пошук, -// властивості не знайдено, повертаємо undefined.</pre> - -<p><a href="https://repl.it/@khaled_hossain_code/prototype">Посилання на код</a></p> - -<p>Присвоєння значення властивості обʼєкта створює власну властивість. Єдиним винятком є той випадок, коли властивість успадковується разом із <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">геттером або сеттером</a>.</p> - -<h3 id="Успадкування_методів">Успадкування "методів"</h3> - -<p>JavaScript не має "методів" у тому вигляді, як у клас-орієнтованих мовах. У JavaScript будь-яку функцію можна додати до обʼєкта в якості властивості. Успадкована фукція поводиться так само як і будь-яка інша властивість, включаючи затінювання властивостей, як було показано вище (в даному випадку це є певною формою <em>заміщення методу</em>).</p> - -<p>Коли виконується успадкована функція, значення <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> вказує на обʼєкт, що її наслідує, а не на обʼєкт-прототип, у якому функція є власною властивістю.</p> - -<pre class="brush: js">var o = { - a: 2, - m: function() { - return this.a + 1; - } -}; - -console.log(o.m()); // 3 -// Коли тут викликається o.m, 'this' вказує на o - -var p = Object.create(o); -// p є обʼєктом, що наслідує від o - -p.a = 4; // створюється власна властивість 'a' для p -console.log(p.m()); // 5 -// коли викликається p.m, 'this' вказує на p. -// Тобто коли p наслідує функцію m обʼєкта o, -// 'this.a' означає p.a, власну властивість 'a' обʼєкта p -</pre> - -<h2 id="Різні_способи_створення_обʼєктів_та_результуючого_ланцюжка_прототипів">Різні способи створення обʼєктів та результуючого ланцюжка прототипів</h2> - -<h3 id="Обʼєкти_що_створені_за_допомогою_синтаксичних_конструкцій">Обʼєкти, що створені за допомогою синтаксичних конструкцій</h3> - -<pre class="brush: js">var o = {a: 1}; - -// The newly created object o has Object.prototype as its [[Prototype]] -// o has no own property named 'hasOwnProperty' -// hasOwnProperty is an own property of Object.prototype. -// So o inherits hasOwnProperty from Object.prototype -// Object.prototype has null as its prototype. -// o ---> Object.prototype ---> null - -var b = ['yo', 'whadup', '?']; - -// Arrays inherit from Array.prototype -// (which has methods indexOf, forEach, etc.) -// The prototype chain looks like: -// b ---> Array.prototype ---> Object.prototype ---> null - -function f() { - return 2; -} - -// Functions inherit from Function.prototype -// (which has methods call, bind, etc.) -// f ---> Function.prototype ---> Object.prototype ---> null -</pre> - -<h3 id="За_допомогою_конструктора">За допомогою конструктора</h3> - -<p>Конструктор в JavaScript це "просто" функція, яка може бути викликана з <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">новим оператором</a>.</p> - -<pre class="brush: js">function Graph() { - this.vertices = []; - this.edges = []; -} - -Graph.prototype = { - addVertex: function(v) { - this.vertices.push(v); - } -}; - -var g = new Graph(); -// g is an object with own properties 'vertices' and 'edges'. -// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. -</pre> - -<h3 id="За_допомогою_Object.create">За допомогою <code>Object.create</code></h3> - -<p>У ECMAScript 5 введений новий метод: {{jsxref("Object.create()")}}. Виклик цього методу створює новий об'єкт. Прототип цього об'єкту це перший аргумент функції:</p> - -<pre class="brush: js">var a = {a: 1}; -// a ---> Object.prototype ---> null - -var b = Object.create(a); -// b ---> a ---> Object.prototype ---> null -console.log(b.a); // 1 (inherited) - -var c = Object.create(b); -// c ---> b ---> a ---> Object.prototype ---> null - -var d = Object.create(null); -// d ---> null -console.log(d.hasOwnProperty); -// undefined, because d doesn't inherit from Object.prototype -</pre> - -<div> -<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> - -<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> - -<pre class="brush: js">'use strict'; - -class Polygon { - constructor(height, width) { - this.height = height; - this.width = width; - } -} - -class Square extends Polygon { - constructor(sideLength) { - super(sideLength, sideLength); - } - get area() { - return this.height * this.width; - } - set sideLength(newLength) { - this.height = newLength; - this.width = newLength; - } -} - -var square = new Square(2); -</pre> - -<h3 id="Продуктивність">Продуктивність</h3> - -<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> - -<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated.</p> - -<p>To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> - -<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> -</div> - -<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> - -<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> - -<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> - -<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> - -<h2 id="Приклад">Приклад </h2> - -<p><code>B</code> shall inherit from <code>A</code>:</p> - -<pre class="brush: js">function A(a) { - this.varA = a; -} - -// What is the purpose of including varA in the prototype when A.prototype.varA will <em>always</em> be shadowed by -// this.varA, given the definition of function A above? -A.prototype = { - varA: null, // Shouldn't we strike varA from the prototype as doing nothing? - // perhaps intended as an optimization to allocate space in hidden classes? - // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables - // would be valid if varA wasn't being initialized uniquely for each instance - doSomething: function() { - // ... - } -}; - -function B(a, b) { - A.call(this, a); - this.varB = b; -} -B.prototype = Object.create(A.prototype, { - varB: { - value: null, - enumerable: true, - configurable: true, - writable: true - }, - doSomething: { - value: function() { // override - A.prototype.doSomething.apply(this, arguments); // call super - // ... - }, - enumerable: true, - configurable: true, - writable: true - } -}); -B.prototype.constructor = B; - -var b = new B(); -b.doSomething(); -</pre> - -<p>The important parts are:</p> - -<ul> - <li>Types are defined in <code>.prototype</code>.</li> - <li>You use <code>Object.create()</code> to inherit.</li> -</ul> - -<h2 id="prototype_та_Object.getPrototypeOf"><code>prototype</code> та <code>Object.getPrototypeOf</code></h2> - -<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> - -<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> - -<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> - -<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> - -<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> - -<p>So, when you call</p> - -<pre class="brush: js">var o = new Foo();</pre> - -<p>JavaScript actually just does</p> - -<pre class="brush: js">var o = new Object(); -o.[[Prototype]] = Foo.prototype; -Foo.call(o);</pre> - -<p>(or something like that) and when you later do</p> - -<pre class="brush: js">o.someProp;</pre> - -<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> - -<div> -<h2 id="Висновки">Висновки</h2> - -<p>It is <strong>essential</strong> to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> -</div> diff --git a/files/uk/web/javascript/javascript_technologies_overview/index.html b/files/uk/web/javascript/javascript_technologies_overview/index.html deleted file mode 100644 index b1c4e7b724..0000000000 --- a/files/uk/web/javascript/javascript_technologies_overview/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Огляд технологій JavaScript -slug: Web/JavaScript/JavaScript_technologies_overview -translation_of: Web/JavaScript/JavaScript_technologies_overview -original_slug: Web/JavaScript/oglyad_tehnologiy_JavaScript ---- -<div>{{JsSidebar("Introductory")}}</div> - -<h2 id="Introduction">Introduction</h2> - -<p>Whereas <a href="/en-US/docs/Web/HTML">HTML</a> defines a webpage's structure and content and <a href="/en-US/docs/Web/CSS">CSS</a> sets the formatting and appearance, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> adds interactivity to a webpage and creates rich web applications.</p> - -<p>However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, including the DOM (Document Object Model).</p> - -<h2 id="JavaScript_the_core_language_(ECMAScript)">JavaScript, the core language (ECMAScript)</h2> - -<p>The core language of JavaScript is standardized by the ECMA TC39 committee as a language named <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p> - -<p>This core language is also used in non-browser environments, for example in <a href="http://nodejs.org/">node.js</a>.</p> - -<h3 id="What_falls_under_the_ECMAScript_scope">What falls under the ECMAScript scope?</h3> - -<p>Among other things, ECMAScript defines:</p> - -<ul> - <li>Language syntax (parsing rules, keywords, control flow, object literal initialization...)</li> - <li>Error handling mechanisms (throw, try/catch, ability to create user-defined Error types)</li> - <li>Types (boolean, number, string, function, object...)</li> - <li>The global object. In a browser, this global object is the window object, but ECMAScript only defines the APIs not specific to browsers, e.g. <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li> - <li>A prototype-based inheritance mechanism</li> - <li>Built-in objects and functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li> - <li>Strict mode</li> -</ul> - -<h3 id="Browser_support">Browser support</h3> - -<p>As of October 2016, the current versions of the major Web browsers implement <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> and <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, but older versions (still in use) implement ECMAScript 5 only.</p> - -<h3 id="Future">Future</h3> - -<p>The major 6th Edition of ECMAScript was officially approved and published as a standard on June 17, 2015 by the ECMA General Assembly. Since then ECMAScript Editions are published on a yearly basis.</p> - -<h3 id="Internationalization_API">Internationalization API</h3> - -<p>The <a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date-and-time formatting for JavaScript applications, letting the applications choose the language and tailor the functionality to their needs. The initial standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.</p> - -<h2 id="DOM_APIs">DOM APIs</h2> - -<h3 id="WebIDL">WebIDL</h3> - -<p>The <a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> provides the glue between the DOM technologies and ECMAScript.</p> - -<h3 id="The_Core_of_the_DOM">The Core of the DOM</h3> - -<p>The Document Object Model (DOM) is a cross-platform, <strong>language-independent convention</strong> for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the <strong>DOM tree</strong> may be addressed and manipulated by using methods on the objects. The {{glossary("W3C")}} standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:</p> - -<ul> - <li>The document structure, a tree model, and the DOM Event architecture in <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li> - <li>A less rigorous definition of the DOM Event Architecture, as well as specific events in <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li> - <li>Other things such as <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> and <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li> -</ul> - -<p>From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".</p> - -<h3 id="HTML_DOM">HTML DOM</h3> - -<p><a href="http://www.whatwg.org/html">HTML</a>, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the <em>meaning</em> of elements. The HTML DOM includes such things as the <code>className</code> property on HTML elements, or APIs such as {{ domxref("document.body") }}.</p> - -<p>The HTML specification also defines restrictions on documents; for example, it requires all children of a <code>ul</code> element, which represents an unordered list, to be <code>li</code> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.</p> - -<p>Looking for the <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, and the other DOM elements? Read the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p> - -<h2 id="Other_notable_APIs">Other notable APIs</h2> - -<ul> - <li>The <code>setTimeout</code> and <code>setInterval</code> functions were first specified on the <code><a href="http://www.whatwg.org/html/#window">Window</a></code> interface in HTML Standard.</li> - <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> makes it possible to send asynchronous HTTP requests.</li> - <li>The <a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstract CSS rules as objects.</li> - <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>allows parallel computation.</li> - <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> allows low-level bidirectional communication.</li> - <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> is a drawing API for {{htmlelement("canvas")}}.</li> -</ul> - -<h3 id="Browser_support_2">Browser support</h3> - -<p>As every web developer has experienced, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">the DOM is a mess</a>. Browser support uniformity varies a lot from feature to feature, mainly because many important DOM features have very unclear, specifications (if any), and different web browsers add incompatible features for overlapping use cases (like the Internet Explorer event model). As of June 2011, the W3C and particularly the WHATWG are defining older features in detail to improve interoperability, and browsers in turn can improve their implementations based on these specifications.</p> - -<p>One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use JavaScript libraries, which abstract DOM features and keep their APIs working the same in different browsers. Some of the most widely used frameworks are <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, and <a href="http://developer.yahoo.com/yui/">YUI</a>.</p> diff --git a/files/uk/web/javascript/memory_management/index.html b/files/uk/web/javascript/memory_management/index.html deleted file mode 100644 index 0022a81129..0000000000 --- a/files/uk/web/javascript/memory_management/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Керування пам'яттю -slug: Web/JavaScript/Memory_Management -tags: - - JavaScript - - Збирання сміття - - пам'ять - - продуктивність -translation_of: Web/JavaScript/Memory_Management ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p>У низькорівневих мовах, наприклад C, існують примітивні функції для ручного керування пам'яттю, такі як <a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a> та <a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a>. В той же час JavaScript автоматично виділяє пам'ять при створенні об'єктів та звільняє її, коли вони більше не використовуються (<em>збирання сміття</em>). Ця автоматичність є потенційним джерелом плутанини: вона може дати розробникам хибне враження, що їм не потрібно хвилюватись щодо керування пам'яттю.</p> - -<h2 id="Життєвий_цикл_памяті">Життєвий цикл пам'яті</h2> - -<p>Незалежно від мови програмування, життєвий цикл пам'яті завжди приблизно той самий:</p> - -<ol> - <li>Виділення потрібної пам'яті</li> - <li>Використання виділеної пам'яті (читання, запис)</li> - <li>Вивільнення виділеної пам'яті, коли вона більше не потрібна</li> -</ol> - -<p>Друга частина в усіх мовах є явною. Перша та остання частини є явними у низькорівневих мовах, але, як правило, неявні у мовах високого рівня, таких як JavaScript.</p> - -<h3 id="Виділення_памяті_у_JavaScript">Виділення пам'яті у JavaScript</h3> - -<h4 id="Ініціалізація_значень">Ініціалізація значень</h4> - -<p>Щоб не турбувати розробника виділеннями пам'яті, JavaScript автоматично виділяє пам'ять, коли оголошуються початкові значення.</p> - -<pre class="brush: js">var n = 123; // виділяє пам'ять для числа -var s = 'блабла'; // виділяє пам'ять для рядка - -var o = { - a: 1, - b: null -}; // виділяє пам'ять для об'єкта та значень, що він містить - -// (як з об'єктом) виділяє пам'ять для масиву та -// значень, що він містить -var a = [1, null, 'аовл']; - -function f(a) { - return a + 2; -} // виділяє пам'ять для функції (об'єкт, який можна викликати) - -// функціональні вирази також виділяють пам'ять для об'єкта -someElement.addEventListener('click', function() { - someElement.style.backgroundColor = 'blue'; -}, false); -</pre> - -<h4 id="Виділення_памяті_через_виклики_функцій">Виділення пам'яті через виклики функцій</h4> - -<p>Виклики деяких функцій виділяють пам'ять під об'єкт.</p> - -<pre class="brush: js">var d = new Date(); // виділяє пам'ять під об'єкт Date - -var e = document.createElement('div'); // видділяє пам'ять під елемент DOM</pre> - -<p>Деякі методи виділяють пам'ять для нових значень чи об'єктів:</p> - -<pre class="brush: js">var s = 'йцуке'; -var s2 = s.substr(0, 3); // s2 - новий рядок -// Оскільки рядки є незмінними, -// JavaScript може вирішити не виділяти пам'ять, -// а лише зберегти діапазон [0, 3]. - -var a = ['ouais ouais', 'nan nan']; -var a2 = ['generation', 'nan nan']; -var a3 = a.concat(a2); -// новий масив з 4 елементів, що є -// поєданням елементів a та a2. -</pre> - -<h3 id="Використання_значень">Використання значень</h3> - -<p>Використання значень, по суті, означає читання та запис у виділеній пам'яті. Це можна зробити зчитуванням та записом значення змінної чи властивості об'єкта, чи навіть передачею аргументу у функцію.</p> - -<h3 id="Звільнення_памяті_коли_вона_більше_не_потрібна">Звільнення пам'яті, коли вона більше не потрібна</h3> - -<p>Більшість проблем керування пам'яттю виникають на цій стадії. Найскладніший аспект цього етапу полягає у визначенні, коли виділена пам'ять більше не потрібна. </p> - -<p>Низькорівневі мови вимагають, щоб розробник вручну визначав, у якій точці програми виділена пам'ять більше не потрібна, та звільняв її.</p> - -<p>Деякі високорівневі мови, такі як JavaScript, використовують форму автоматичного керування пам'яттю, відому як <a href="https://uk.wikipedia.org/wiki/%D0%97%D0%B1%D0%B8%D1%80%D0%B0%D0%BD%D0%BD%D1%8F_%D1%81%D0%BC%D1%96%D1%82%D1%82%D1%8F">збирання сміття</a> (ЗС). Збирач сміття відслідковує виділення пам'яті та визначає момент, коли блок виділеної пам'яті більше не потрібний, і повертає його. Цей автоматичний процес є неточним, оскільки загальна проблема визначення, чи потрібна наразі та чи інша ділянка пам'яті, є <a href="https://uk.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC%D1%96%D1%87%D0%BD%D0%B0_%D1%80%D0%BE%D0%B7%D0%B2%27%D1%8F%D0%B7%D0%BD%D1%96%D1%81%D1%82%D1%8C">нерозв'язною</a>.</p> - -<h2 id="Збирання_сміття">Збирання сміття</h2> - -<p>Як було зазначено вище, загальна проблема автоматичного визначення того, що якась ділянка пам'яті "більше не потрібна", є нерозв'язною. Як наслідок, збирачі сміття впроваджують обмеження вирішення загальної проблеми. Цей розділ пояснює концепції, необхідні для розуміння головних алгоритмів збирання сміття та відповідних обмежень.</p> - -<h3 id="Посилання">Посилання</h3> - -<p>Головна концепція, на яку покладаються алгоритми збирачів сміття - це концепція <em>посилань</em>. У контексті керування пам'яттю об'єкт посилається на інший об'єкт, якщо звертається до нього (явно чи неявно). Наприклад, об'єкт JavaScript має посилання на свій <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">прототип</a> (неявне посилання) та на значення своїх властивостей (явне посилання).</p> - -<p>У цьому контексті поняття "об'єкта" є ширшим, ніж звичайні об'єкти JavaScript, і містить також області видимості функцій (або глобальну область видимості).</p> - -<h3 id="Збирання_сміття_через_підрахунок_посилань">Збирання сміття через підрахунок посилань</h3> - -<p>Це найпримітивніший алгоритм збирання сміття. Цей алгоритм звужує проблему з визначення того, чи об'єкт досі є потрібним, до визначення того, чи мають інші об'єкти досі посилання на даний об'єкт. Об'єкт називається "сміттям", або підлягає збиранню, якщо на нього вказує нуль посилань.</p> - -<h4 id="Приклад">Приклад</h4> - -<pre class="brush: js">var x = { - a: { - b: 2 - } -}; -// Створено 2 об'єкта. Один має посилання у іншому як одна з його властивостей. -// Інший має посилання через присвоєння його змінній 'x'. -// Зрозуміло, що жоден з них не може бути прибраний. - - -var y = x; // Змінна 'y' - друга сутність, що має посилання на об'єкт. - -x = 1; // Тепер об'єкт, що початково був присвоєний 'x', має унікальне посилання, - // втілене у змінній 'y'. - -var z = y.a; // Посилання на властивість 'a' об'єкта. - // Цей об'єкт тепер має 2 посилання: одне у вигляді властивості, - // інше у вигляді змінної 'z'. - -y = 'mozilla'; // Об'єкт, що початково був присвоєний 'x', тепер має нуль посилань. - // Він може бути прибраний. - // Однак, на його властивість 'a' досі посилається - // змінна 'z', тому її не можна вивільнити. - -z = null; // Властивість 'a' об'єкта, що початково був присвоєний x, - // має нуль посилань. Об'єкт тепер може бути прибраний. -</pre> - -<h4 id="Обмеження_Циклічні_посилання">Обмеження: Циклічні посилання</h4> - -<p>Існує обмеження у випадку циклічних посилань. У наступному прикладі два об'єкти створені з властивостями, в яких вони посилаются один на одного, таким чином створюючи цикл. Вони вийдуть за межі області видимості, коли завершиться виклик функції. В цей момент вони стають непотрібними, і їхня виділена пам'ять має бути повернена. Однак, алгоритм, що підраховує посилання, не вважатиме їх готовими для повернення, оскільки кожен з двох об'єктів має принаймні одне посилання, що вказує на нього, в результаті жоден з них не позначається для збирання сміття. Циклічні посилання є типовою причиною витоків пам'яті.</p> - -<pre class="brush: js">function f() { - var x = {}; - var y = {}; - x.a = y; // x посилається на y - y.a = x; // y посилається на x - - return 'йцуке'; -} - -f(); -</pre> - -<h4 id="Приклад_з_реального_життя">Приклад з реального життя</h4> - -<p>Internet Explorer 6 та 7 відомі тим, що їхні збирачі сміття для об'єктів DOM працюють на основі підрахунку посилань. Цикли є типовою помилкою, що призводить до витоків пам'яті:</p> - -<pre class="brush: js">var div; -window.onload = function() { - div = document.getElementById('myDivElement'); - div.circularReference = div; - div.lotsOfData = new Array(10000).join('*'); -}; -</pre> - -<p>У наведеному прикладі DOM-елемент "myDivElement" має циклічне посилання на самого себе у властивос |